CSS = Cascading style sheets
웹사이트를 꾸며주는 역할을 한다.
셀렉터
CSS를 이용해 꾸미려 특성 요소에 접근하는 것을 '셀렉터'라고 한다.
셀럭터를 만들 때는 태그를 이용하는 방법과 id와 class속성을 이용하는 방법이 있다.
1. 태그를 이용하여 셀렉터 만들기
특정 태그를 모두 꾸미고 싶다면 태그를 이용해 셀렉터를 만든다. p태그의 폰트 크기와 색상을 바꾸었다. head태그 부분에서 하위 style태그에서 태그로 이용해 접근했다. 그러면 해당 태그는 전부 CSS효과가 적용된다. li태그는 좌측에 나오는 원 표시를 지우는 것을 만들었다.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meat charset="UTF=8"> 5 <title>타이틀</title> 6 <style> 7 p{ 8 font-size: 17px; 9 color: blue; 10 } 11 12 li{ 13 list-style-type: none; 14 ] 15 </style> 16 </head> 17 <body> 18 <p>태그 p1</p> 19 <p>태그 p2</p> 20 <p>태그 p3</p> 21 22 <ul> 23 <li>li1</li> 24 <li>li2</li> 25 <li>li3</li> 26 </ul> 27 </body> 28 </html> |
2. class를 이용해 셀렉터 만들기
첫번째 소개한 태그를 이용한 셀렉터 코드에서 style태그에서 class를 사용였다. 그래서 body태그에서 class를 적용한 태그만 CSS효과가 적용되었다.
셀렉터를 만들 때 클래스를 표현하기 위해서 마침표(.)를 붙여서 사용한다. class를 이용하면 원하는 요소만 CSS효과를 적용할 수 있다.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meat charset="UTF=8"> 5 <title>타이틀</title> 6 <style> 7 p.p-target{ 8 font-size: 17px; 9 color: blue; 10 } 11 12 li.li-target{ 13 list-style-type: none; 14 ] 15 </style> 16 </head> 17 <body> 18 <p>태그 p1</p> 19 <p class="p-target">태그 p2</p> 20 <p>태그 p3</p> 21 22 <ul> 23 <li>li1</li> 24 <li class="li-target">li2</li> 25 <li>li3</li> 26 </ul> 27 </body> 28 </html> |
3. id를 이용해 셀렉터 만들기
class 말고 id라는 속성이 있다. id는 클래스와 다르게 id값이 고유해야한다. class와 같이 CSS효과가 적용되는 것은 똑같지만 id값은 한 번씩만 사용되어야 한다. id값은 해당 페이지에서 고유하게 접근할 수 있는 속성이다. 웹에서는 다양한 권장사항들을 지키지 않아도 웬만하면 종료되거나 멈추지 않는다. 하지만 id값을 class처럼 한 번이 아닌 두 번이상 사용한다면 인터넷을 하면서 번번히 종료 될 것이다.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meat charset="UTF=8"> 5 <title>타이틀</title> 6 <style> 7 #target1{ 8 font-size: 17px; 9 color: blue; 10 } 11 12 #target2{ 13 list-style-type: none; 14 ] 15 </style> 16 </head> 17 <body> 18 <p>태그 p1</p> 19 <p id="target1">태그 p2</p> 20 <p>태그 p3</p> 21 22 <ul> 23 <li>li1</li> 24 <li id="target2">li2</li> 25 <li>li3</li> 26 </ul> 27 </body> 28 </html> |
※ 복잡한 셀렉터 만들기
부모 태그와 자식 태그를 나열하여 복잡한 셀렉터를 만들 수 있다. 제시된 2개의 방법을 통해 더욱 복잡한 셀렉터를 구성할 수 있다.
1) div#container p{ font-size: 20px; color: green; } - id가 container인 div태그의 자식 태그 중 p 태그를 찾습니다. 자식 태그를 표현할 때는 띄어쓰기를 사용한다. 2) div#container div#wrap1 h3{ color: red; } - id가 container인 div태그의 자식 태그 id가 wrap2인 div를 찾고 wrap2의 자식태그인 h3을 찾는 셀렉터이다. |