프로그래밍 노트/HTML5 + CSS3
[CSS] 주요 선택자
엠씨비기
2019. 2. 7. 22:27
1. 전체 선택자
전체 선택자는 스타일을 모든 요소에 적용할 때 사용하며, 전체 선택자로는 *(별표)를 사용한다.
2. 태그 선택자
특정 태그가 쓰인 모든 요소에 스타일을 적용하며, 전체 선택자 다음으로 많은 요소들에 스타일을 적용한다.
3. 클래스 선택자
특정 부분에만 스타일을 적용할 때 사용하는 것이 클래스 선택자이다.
클래스 선택자는 태그 대신 클래스 이름을 사용하는데, 클래스 이름 앞에는 마침표(.)를 붙인다.
4. id 선택자
클래스 선택자와 동일하네 특정 부분에만 스타일을 적용할 때 사용한다.
다만, 클래스 선택자의 경우 여러번 반복 적용이 가능하지만, id 선택자의 경우 문서 내 한번만 적용이 가능하다.
사용법은 클래스 선택자의 마침표(.) 대신, 샵(#) 기호를 앞에 붙인다.
5. 그룹 선택자
여러 선택자를 쉼표(,)로 구분해 나열한 후 동일한 스타일을 지정하는 것을 그룹 선택자라고 한다.
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE html> <html lang = "ko"> <head> <meta charset="utf-8"> <style> /*전체 선택자*/ *{ background:ivory; /*배경색은 아이보리*/ text-align:center; /*글자를 가운데 정렬*/ } /*태그 선택자*/ h1{ font-size:2em; /*글자크기 지정*/ text-decoration:underline; /*아랫줄 스타일 부여*/ } table,th,td{ border-collapse:collapse; /*표 테두리 사이의 간격 제거*/ border:1px solid black; /*선 1px로 지정*/ } /*그룹 선택자*/ ul,li{ color:blue;/*글자색은 파란색*/ text-align:left; } /*클래스 선택자*/ .bold{font-weight:bold;/*볼드처리*/} /*ID 선택자*/ #header{ background:gray; color:white; } </style> </head> <body> <h1>과제관리표</h1> <ul> <li>OS 수업의 과제 제출 여부에 대해서 관리하기 위한 표 입니다.</li> <li>기한 내에 <span class="bold">제출시 'O', 미제출시 'X' 표시</span></li> </ul> <br> <table id="report_table" width = "100%"> <thead> <tr> <th id = "header">이름</th> <th id = "header">학번</th> <th id = "header">전공</th> <th id = "header">1차 과제</th> <th id = "header">2차 과제</th> <th id = "header">3차 과제</th> </tr> </thead> <tbody> <tr> <td id="name">홍길동</td> <td>151523</td> <td>컴퓨터공학</td> <td>O</td> <td>-</td> <td>-</td> </tr> <tr> <td id="name">김철수</td> <td>141129</td> <td>컴퓨터공학</td> <td>X</td> <td>-</td> <td>-</td> </tr> </tbody> </table> </body> </html> | cs |
