728x90
선택자 (selector) : 웹 문서에서 어느 부분에 스타일을 적용할지 알려 주는 것이며, 선택자를 사용하는 방법은 미리 약속되어 있다
- 전체 선택자 (universal selector) : 문서의 전체 요소에 스타일을 적용
주로 모든 하위 요소에 스타일을 한꺼번에 적용하거나, 웹 브라우저의 기본 스타일을 초기화할 때 사용한다.
* { 속성 : 값; ....}
<style> * { margin: 0; } </style> - 타입 선택자 (type selector) : 특정 태그를 사용한 모든 요소에 스타일을 적용
'태그 선택자' 혹은 '요소 선택자' 라고도 한다.
태그명 { 스타일 규칙 }
<style> p { font-style: italic; } </style> - 클래스 선택자 (class selector) : 특정 부분에만 스타일을 적용
같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때 사용한다.
클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 한다.
이미 만들어둔 클래스 스타일을 적용할 때는 태그 안에 class="클래스명" 의 형식으로 사용하며,
공백으로 구분해서 스타일 이름을 적는 것으로 하나의 요소에 클래스 스타일을 2개 이상 적용할 수 있다.
.클래스명 { 스타일 규칙 }
<style> .accent { border:1px solid #000; padding:5px; } .bg { background-color:#ddd; } </style> ... <div> <h1 class="accent bg">레드향</h1> <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p> </div> - id 선택자 (id selector) : 특정 부분에 스타일을 한 번만 적용
클래스 선택자는 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다.
주로 문서의 레이아웃과 관련된 스타일을 지정하거나, 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용한다.
#아이디명 { 스타일 규칙 }
<style> #container { width:500px; margin:10px auto; padding:10px; border:1px solid #000; } </style> ... <body> <div id="container"> ... </body> - 그룹 선택자 (group selector) : 같은 규칙을 사용하는 요소 묶기
여러 선택자에서 같은 스타일 규칙을 사용하는 경우 쉼표( , )로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의하면 된다.
선택자1, 선택자2 { 스타일 규칙 }
<style> h1, p { text-align: center; } </style>
'웹 개발' 카테고리의 다른 글
| [CSS] 글꼴 관련 스타일 (0) | 2022.01.18 |
|---|---|
| Web Developer 확장기능 (0) | 2022.01.18 |
| [CSS] 스타일과 스타일 시트 (0) | 2022.01.11 |
| [CSS] CSS 소스 경량화 (0) | 2022.01.11 |
| CSS (Cascading style sheets) (0) | 2022.01.05 |