CSS(Cascading Style Sheets)는 규칙 기반 언어로서, 웹 페이지의 특정 요소 또는 요소 그룹에 적용 할 스타일 그룹을 지정하는 규칙을 정의한다.
예를 들어 "특정 페이지 내의 타이틀을 큰 빨간색 텍스트로 표시" 를 원할 때 아래 코드와 같이 CSS로 작성하고 정의한다.
.h1 {
color: red;
font-size: 5em;
}
● Cascading : 스타일의 우선순위
CSS 선택자(Selectors)는 HTML 요소의 우선순위에 따라 스타일을 나타내므로 cascading은 매우 중요하다.
작성한 코드가 규칙에 맞지 않아 스타일이 작동하지 않을 수도 있으므로 CSS 메커니즘의 작동 방식을 이해하고, 우선순위에 따라 코드를 작성해야 한다.
* 우선순위 : 태그 < 클래스 < #아이디 < 인라인 스타일 (html 태그에 작성/지정한 스타일)
<style>
h1 { font-size: 16px; }
button { background-color: burlywood; }
.special { background-color: pink; color: violet; }
#primary { background-color: greenyellow; }
.special { background-color: brown;}
</style>
위 스타일의 우선순위는 h1 < button < .special < primary 이고,
동일한 레벨(.special)의 태그인 경우 마지막에 정의한 스타일로 적용된다
● 선택자의 유형
클래스 선택자 : Class( . )를 대상으로하는 선택자 표기
.box { }
아이디 선택자 : ID( # )를 대상으로하는 선택자 표기
#wrapBox{ }
타입 선택자 : HTML 요소(body, h1, p, ol, li 등)를 대상으로하는 선택자 표기
p {
font-size: 1em;
line-height: 1.2em;
}
전체 선택자 ( * )
* {
padding: 0;
margin: 0;
border: 0;
}
하위 선택자 (공백)
<style type="text/css">
body p { /* depth에 상관없이 body안의 p태그는 모두 선택된다 */
color: red;
}
</style>
<body>
<p> text 1</p>
<div>
<p> text 2 </p>
</div>
<p> text 3</p>
</body>
자식 선택자 ( > )
<style type="text/css">
body > p { /* 1depth아래의 자식들만 선택된다 */
color: red;
}
</style>
<body>
<p> text 1</p>
<div>
<p> text 2 </p> /* 선택되지 않는다 */
</div>
<p> text 3</p>
</body>
인접 선택자 ( + )
<style type="text/css">
div + p { /* div와 같은 depth이면서 div 바로 다음에 나오는 p가 선택된다 */
color: red;
}
</style>
<body>
<p> text 1</p>
<div>
<p> text 2 </p>
</div>
<p> text 3</p> /* text 3이 빨간색으로 출력된다 */
</body>
아래 표는 사용 가능한 선택자의 개요와 각 유형의 선택자 사용법이다.
각 선택자의 MDN 안내 페이지에 대한 링크 포함되어 있으니 클릭하여 자세히 더 알아보자.
Reference table of selectors
| 선택자 | 예 | CSS 튜토리얼 배우기 |
| 타입 선택자 | h1 { } | 타입 선택자 |
| 전체 선택자 | * { } | 전체 선택자 |
| Class 선택자 | .box { } | Class 선택자 |
| ID 선택자 | #unique { } | ID 선택자 |
| 속성 선택자 | a[title] { } | 속성 선택자 |
| 가상 클래스 선택자 | p:first-child { } | 가상 클래스 선택자 |
| 가상 요소 선택자 | p::first-line { } | 가상 요소 선택자 |
| 하위 선택자(공백) | article p | 하위 선택자 |
| 자식 선택자 | article > p | 자식 선택자 |
| 인접 형제 선택자 | h1 + p | 인접 형제 선택자 |
| 일반 형제 선택자 | h1 ~ p | 일반 형제 선택자 |
→ 가상 요소는 IE8부터 지원하기 때문에 가상 요소 선택자 :: (더블콜론)를 이용하면 가상 요소를 인식하지 못한다.
참고 자료
'Web design > HTML & CSS' 카테고리의 다른 글
| 웹사이트에 웹폰트와 이모지 적용하기 (5) | 2020.07.04 |
|---|---|
| <input>의 유형 (0) | 2020.06.10 |
| 자간, 행간, 어간 조절 (0) | 2020.05.25 |
| mix-blend-mode : 요소를 겹치는 효과 (0) | 2020.05.23 |
| [크롬] 캐시 비활성화 설정 방법 & 캐시 비우는 방법 (0) | 2020.05.06 |
