💡 시멘틱(Semantic) 태그
- 예전에는 전부 div 로 섹션을 나눠 구성했지만 이제 각 부분마다 알맞은 태그 (시멘틱 태그)를 활용하여 구성
<!DOCTYPE html> <html> <head> /*시멘틱 태그 <meta charset="utf-8"> <title></title> </head> <body> <header> <h1>MY HOMEPAGE</h1> <hr/> </header> <nav> /*시멘틱 태그 <ul> <li>HTML5</li> <li>CSS3</li> <li>JAVASCRIPT</li> <li>JQUERY</li> </ul> <hr/> </nav> <section> /*시멘틱 태그 <h1>What is HTML5?</h1> <p>HTML5 is gooooooooooooooooooooooooooooooooooooooooooooooooood</p> <hr/> </section> <footer> /*시멘틱 태그 <p>xxx주식회사 서울시 00구 00동</p> </footer> </body> </html>
📌CSS란?
- CSS란 HTML요소에 스타일 규칙을 연결하는 것
- 선택자(Selector)와 선언(Declaration)으로 구성
- 🔎선택자(Selectio)
- 규칙을 적용할 요소를 나타냄
- 쉼표로 구분하여 하나 이상의 요소에 적용할 수 있음
- 🔎선언(Declaration)
- 스타일을 적용하는 방법을 나타냄
- 프로퍼티와 값이 쌍으로 구성됨 (클론으로 구분)
- 하나의 프로퍼티와 값의 설정이 끝날 때마다 세미콜론 사용
- 한 개의 선언에 여러개의 프로퍼티 지정 가능
💡 선택자 태그
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { /* div 부분의 배경 색상 지정 background: #ffd800(yellow); } </style> </head> <body> <h1>제목 입니다.</h1> <p>본문 입니다.</p> <div> /* 선택자 태그 (배경색 지정하고자 하는 부분을 div로 묶어주기) <h1>제목 입니다.</h1> <p>본문 입니다.</p> </div> </body> </html>
- 결과
💡 선택자 태그를 활용하여 부분만 style 적용하기
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { /* div 부분 적용 background: lightblue; } span { /* span 부분 적용 background: red; color: blue; } </style> </head> <body> <h1><span>제목</span>입니다.</h1> <p>본문 입니다.</p> <div> <h1>제목 입니다.</h1> <p>본문 입니다.</p> </div> </body> </html>
- 결과
💡 선택자 태그 활용
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> li, /* 콤마 이용해서 한번에 설정 가능 p, h1 { color: gold; } h1 { /* 밑에 있는 태그로 적용 (위의 h1 덮어씀) color: blue; } p { font-weight: bold; } </style> </head> <body> <header> <h1>oo 주식회사</h1> </header> <nav> <ul> <li>회사소개</li> <li>제품소개</li> <li>고객센터</li> <li>공지사항</li> </ul> </nav> <section> <p> 우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사 입니다. </p> </section> <footer> <p>서울시 oo구 oo동 oo빌딩</p> </footer> </body> </html>
- 결과
💡 * 선택자
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> * { /* 모든 부분에 적용 background: lightgoldenrodyellow; color: goldenrod; } p { /* all 선택자를 덮어써서 적용됨 font-weight: bold; color: lightskyblue; } </style> </head> <body> <header> <h1>oo 주식회사</h1> </header> <nav> <ul> <li>회사소개</li> <li>제품소개</li> <li>고객센터</li> <li>공지사항</li> </ul> </nav> <section> <p> 우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사 입니다. </p> </section> <footer> <p>서울시 oo구 oo동 oo빌딩</p> </footer> </body> </html>
- 결과
💡 id, class
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .menu { /* class 접근 방법: '.' + class명 */ color: hwb(0 14% 0%); font-weight: bold; font-size: 30px; } .bg { background: yellow; } #footer { /* id 접근 방법: '#' + id명 */ background: skyblue; } </style> <title></title> </head> <body> <div id="header"> <h1 class="bg">HEADER</h1> </div> <div id="wrap"> <div id="content"> <h1 class="bg">CONTENT</h1> <ul> <li class="menu">menu1</li> <li>menu2</li> <li class="menu">menu3</li> <li>menu4</li> <li class="menu">menu5</li> </ul> <ol> <li class="menu">menu1</li> <li>menu2</li> <li class="menu">menu3</li> <li>menu4</li> <li class="menu">menu5</li> </ol> </div> <div id="side_banner"> <h1>BANNER</h1> <a href="http://www.sba.seoul.kr" target="_blank"><img src="http://www.sba.seoul.kr/kr/images/footer/f_logo.png"></a> </div> </div> <div id="footer"> <h1>FOOTER</h1> </div> </body> </body> </html>
- 결과
💡 속성 선택자
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> input { color: green; font-size: 30px; font-weight: bold; } input[type="text"] { color: orange; font-size: 50px; width: 200px; } input[type="tel"] { /* 대괄호 안에 MIME타입을 지정하여 해당 부분에 스타일 적용가능 */ color: red; } img[src] { /* 대괄호 안에 속성을 지정하여 해당 속성에 스타일 적용가능 */ border: 5px solid green; } </style> <body> <form> 이름 : <input type="text" /> <br /> 아이디 : <input type="text" /> <br /> 비밀번호 : <input type="password" /> <br /> 전화번호 : <input type="tel" /> <br /> </form> <img src="Navi_dr.png" /> <br /> </body> </html>
- 결과
💡 후손 및 자손 선택자
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> #header, #wrap, #footer { border: 1px solid #cccccc; width: 500px; } div li { /* div 안에 있는 li에 적용 */ background-color: red; } div p { /* div 안에 있는 p에 적용 */ font-size: 25px; } div > h1 { /* div 바로 밑에 있는 h1에만 적용 */ font-weight: bold; color: yellow; } </style> <body> <div id="header"> <div class="logo"> <h1>LOGO</h1> </div> <div class="copy"> <h2>global company</h2> </div> </div> <div id="wrap"> <p> 서울시 8대 신성장동력의 하나인 녹색산업을 집중 육성하기 위해 녹색기업에 특화된 지원기관인 녹색산업지원센터는 녹색중소기업의 종합 지원체계를 구축하고 실질적 성과창출을 유도하여 서울형 녹색산업 인프라 조성과 효율적인 지원사업 시행으로 녹색중소기업의 경영내실화 및 산업 저변확대에 기여하는 것이 목적 </p> <ul> <li><p>서울애니메이션센터</p></li> <li><h1>서울시녹색산업지원센터</h1></li> <li><p>DMC(디지털미디어시티)</p></li> <li><h1>서울게임콘텐츠센터</h1></li> <li><p>서울시우수사회적기업지원</p></li> <li><h1>캐릭터포털사이트</h1></li> <li><p>재미로/재미랑</p></li> </ul> </div> <div id="footer"> <img src="http://www.sba.seoul.kr/kr/images/footer/copyright.png" /> </div> </body> </html>
- 결과
📌html의 단위
-
절대단위와 상대단위로 나뉨
-
px(픽셀): 모니터의 해상도에 따라 상대적인 크기를 가짐. 절대 단위이므로 상황에 따라 역동적인 특성이 없기 때문에 사용자 접근성이 낮다.
- em: 부모 요소의 폰트 사이즈를 기준으로 한 단위
1em = font size (부모 엘리먼트) .parent { font-size: 20px; } .chile { font-size: 2em; } ** 2em = 2 x 20px;
- rem: 최상위 엘리먼트의 폰트 사이즈를 기준으로 한 단위
html { font-size: 50px; } .parent { font-size: 20px; } .child { font-size: 2rem; }
개발 연습장