CSS란 ? Cascading Style Sheets 의 약자로 쉽게말해 HTML 같은 문서의 스타일을 꾸밀때 사용하는 언어입니다.
오늘은 태그의 id , class 속성을 사용해서 CSS를 꾸미는 법을 포스팅하겠습니다.
id를 사용해 CSS를 꾸밀려면 #을
class 사용해 CSS를 꾸밀려면 .을 붙이면 됩니다.
<코드>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>CSS id/class</title> <style> #header {width:500px; border:2px solid #cccccc; font-size:3em; text-align:center;} .menu { color:blue; font-weight:bold; font-size:30px;} </style> </head> <body> <div id="header"> Header </div> <div id="wrap"> <div id="content"> <ul> <li class="menu">menu1</li> <li>menu2</li> <li class="menu">menu3</li> <li class="menu">menu4</li> <li class="menu">menu5</li> </ul> </div> </div> <div id="footer"> Footer </div> </body> </html> | cs |
css를 사용하는 방법은 <head></head> 안에 <style> 태그를 사용하면 됩니다.
스타일 태그 안에 #header와 .menu가 있습니다.
#header = ( id = "header" ) 의 의미
.menu = ( class = "menu") 의 의미를 가집니다.
결과를 보시면 알겠지만 li 태그중 menu2만 css 적용을 못받았습니다.
class가 없기 때문입니다.
<결과>
'프로그래밍 강의 > HTML 과 CSS' 카테고리의 다른 글
| [HTML/CSS] Chapter9. 후손 및 자손 선택자 CSS (0) | 2018.09.15 |
|---|---|
| [HTML/CSS] Chapter8. 속성 선택자를 사용한 CSS (0) | 2018.09.15 |
| [HTML/CSS] Chapter6. 블록요소와 라인요소 (0) | 2018.09.14 |
| [HTML/CSS] Chapter5. Form 폼 태그!! (0) | 2018.09.14 |
| Chapter4. 테이블 태그!! (0) | 2018.09.06 |
