Type 선택자
- 하나의 웹페이지에서 일관적으로 적용할 스타일이 있을 때 사용한다.
- 특정 요소를 선택하기 위해 사용하는 것 X (ex: h2 태그를 여러 번 사용하면 모든 h2 태그에 스타일이 적용되기 때문)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
</head>
<body>
<h2>Hello!</h2>
<h3>Lorem Ipsum</h3>
<p>Have a nice day</p>
</body>
</html>/* Type Selector */
h2 {
color: purple;
}
h3 {
color: red;
}
2. ID 선택자
- ID 는 중복 사용이 불가하여, 하나의 ID 는 전체 html 에서 하나의 태그에만 부여할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="./bear.ico" />
<link rel="stylesheet" href="style.css" />
<title>CSS</title>
</head>
<body>
<h2 id="movie-list">Movie List</h2>
<ul>
<li class="blue">Toy Story</li>
<li class="blue">Zootopia</li>
<li>Inside Out</li>
</ul>
<h3 class="blue">Lorem Ipsum</h3>
<p class="blue">Have a nice day</p>
</body>
</html>/* ID Selector */
#movie-list {
color: red;
}
/* Class Selector */
.blue {
color: blue;
}
3. Class 선택자
- class 선택자는 여러 개의 요소에 같은 class 를 부여할 수 있다.
- spacing 을 활용하면 2개 이상의 class 를 가질 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="./bear.ico" />
<link rel="stylesheet" href="style.css" />
<title>CSS</title>
</head>
<body>
<h2 id="movie-list">Movie List</h2>
<ul>
<li class="blue red">Toy Story</li>
<li class="blue">Zootopia</li>
<li>Inside Out</li>
</ul>
<h3 class="blue">Lorem Ipsum</h3>
<p class="blue">Have a nice day</p>
</body>
</html>/* ID Selector */
#movie-list {
color: red;
}
/* Class Selector */
.blue {
color: blue;
}
.red {
color: red;
}
-> Toy Story의 경우 class 가 blue, red 로 두 가지 부여됐지만 css 의 cascading 특성 때문에 뒤에 있는 red 가 적용되었다.
'CSS' 카테고리의 다른 글
| display: contents로 gird 문제 해결하기 (0) | 2023.06.12 |
|---|---|
| CSS Selector - 타입 선택자 (1) | 2023.04.15 |
| CSS Selector - 자식 선택자 (0) | 2023.04.15 |
| inline 요소와 block 요소의 차이 (0) | 2023.04.12 |
| 캐스캐이딩(Cascading) 원칙 (0) | 2023.04.09 |
