CSS 선택기는 개발자가 특정 요소에 스타일을 정확하게 지정하고 적용할 수 있도록 하여 웹 페이지 스타일 지정에서 중요한 역할을 합니다. CSS 선택자를 이해하고 효과적으로 활용하는 것은 잘 구성되고 유지 관리 가능한 스타일시트를 만드는 데 필수적입니다. 이 블로그 게시물에서는 다양한 CSS 선택기를 살펴보고 스타일 지정 대상을 설정하는 방법을 알아봅니다.
[실행코드]
|
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
73
74
|
<!DOCTYPE html>
<html>
<head>
<style>
/* Tag Selector */
p {
color: blue;
}
/* Class Selector */
.highlight {
background-color: yellow;
}
/* ID Selector */
#logo {
width: 200px;
height: 100px;
}
/* Attribute Selector */
input[type="text"] {
border: 1px solid gray;
}
/* Descendant Selector */
div p {
font-weight: bold;
}
/* Child Selector */
ul > li {
list-style: square;
}
/* Adjacent Sibling Selector */
h2 + p {
margin-top: 10px;
}
/* General Sibling Selector */
h2 ~ p {
color: green;
}
/* Pseudo-Class */
a:hover {
text-decoration: underline;
}
/* Pseudo-Element */
p::first-line {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="highlight">This paragraph has a highlight class.</p>
<div>
<p>This paragraph is inside a div.</p>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Heading 2</h2>
<p>This paragraph follows the h2 element.</p>
<a href="#">Hover over this link</a>
</body>
</html>
|
cs |
CSS 선택자 소개
CSS 선택기는 스타일 지정을 위해 HTML 요소를 선택하는 데 사용되는 패턴입니다. 이를 통해 개발자는 태그 이름, 클래스, ID, 특성, 관계 등을 기반으로 요소를 대상으로 지정할 수 있습니다. CSS 선택기는 강력하고 유연하여 스타일 적용을 세밀하게 제어할 수 있습니다.
기본 선택자
- 태그 선택기: 가장 기본적인 선택기는 HTML 태그 이름으로 요소를 대상으로 합니다. 예를 들어 p는 모든 <p> 요소를 선택하고 h1은 모든 <h1> 요소를 선택합니다.
- 클래스 선택자: 클래스 선택자는 특정 클래스 속성을 가진 요소를 대상으로 합니다. 특정 클래스가 있는 요소를 선택하려면 클래스 이름 앞에 마침표(.)를 추가하십시오. 예를 들어 .highlight는 highlight 클래스가 있는 모든 요소를 선택합니다.
- ID 선택자: ID 선택자는 특정 ID 속성을 가진 요소를 대상으로 합니다. ID로 요소를 선택하려면 앞에 해시(#)와 ID 이름을 붙입니다. 예를 들어 #logo는 ID가 logo인 요소를 선택합니다.
- 속성 선택기: 속성 선택기는 해당 속성 값을 기반으로 요소를 대상으로 합니다. 예를 들어 [type="text"]는 type 속성이 "text"로 설정된 모든 요소를 선택합니다.
결합자와 관계 선택자
- 자손 선택자: 자손 선택자는 지정된 요소의 자손인 요소를 대상으로 합니다. 두 선택기 사이에 공백을 사용합니다. 예를 들어 div p는 <div> 요소의 자손인 모든 <p> 요소를 선택합니다.
- 자식 선택자: 자식 선택자는 지정된 요소의 직계 자식인 요소를 대상으로 합니다. 보다 큼 기호(>)를 사용합니다. 예를 들어 ul > li은 <ul> 요소의 직계 자식인 모든 <li> 요소를 선택합니다.
- 인접 형제 선택자: 인접 형제 선택자는 특정 형제 요소 바로 앞에 있는 요소를 대상으로 합니다. 더하기 기호(+)를 사용합니다. 예를 들어 h2 + p는 <h2> 요소 바로 뒤에 오는 모든 <p> 요소를 선택합니다.
- 일반 형제 선택자: 일반 형제 선택자는 지정된 요소의 형제인 요소를 대상으로 합니다. 물결표(~)를 사용합니다. 예를 들어 h2 ~ p는 위치에 관계없이 <h2> 요소 뒤에 오는 모든 <p> 요소를 선택합니다.
의사 클래스 및 의사 요소
- 의사 클래스: 특정 상태나 조건에 따라 대상 요소를 의사 클래스로 지정합니다. 일반적으로 사용되는 의사 클래스에는 :hover(마우스가 요소 위에 있을 때 요소 대상 지정), :active(클릭할 때 요소 대상 지정) 및 :nth-child()(기반 요소 대상 지정)가 있습니다. 상위 컨테이너에서의 위치).
- 의사 요소: 의사 요소는 요소의 특정 부분을 대상으로 합니다. 이중 콜론(::)으로 표시됩니다. 일반적으로 사용되는 가상 요소에는 ::before(요소 앞에 내용 삽입), ::after(요소 뒤에 내용 삽입) 및 ::first-line(블록의 첫 번째 줄을 대상으로 함)이 있습니다. 텍스트).
특이성 및 선택자 우선순위
CSS 선택기 특성은 충돌하는 여러 스타일이 동일한 요소를 대상으로 할 때 적용될 스타일을 결정합니다. 선택자의 유형과 각 선택자의 인스턴스 수에 따라 특이도가 계산됩니다. 인라인 스타일의 특이성이 가장 높고 그 다음이 ID, 클래스 및 태그 선택기입니다. 특이성을 이해하면 스타일 충돌을 피하고 예측 가능한 스타일 적용을 보장하는 데 도움이 됩니다.
상속 및 캐스케이딩
CSS 스타일은 상위 요소에서 하위 요소로 상속될 수 있습니다. 상속을 사용하면 각 개별 요소에 스타일을 적용할 필요성이 줄어들어 보다 효율적이고 일관된 스타일 지정이 가능합니다. 그러나 모든 스타일이 기본적으로 상속되는 것은 아닙니다. 경우에 따라 상속을 적용하기 위해 inherit 값을 명시적으로 설정해야 할 수도 있습니다. 또한 CSS의 캐스케이딩 특성은 스타일이 선언되는 순서와 특이성을 기반으로 충돌하는 스타일을 해결하는 방법을 결정합니다.
고급 선택기 및 CSS 프레임워크
CSS는 요소 대상 지정을 훨씬 더 잘 제어할 수 있는 광범위한 고급 선택기를 제공합니다. 이러한 선택기에는 하위 문자열 일치, 구조적 의사 클래스, 부정 의사 클래스 등이 있는 속성 선택기가 포함됩니다. Bootstrap 및 Foundation과 같은 CSS 프레임워크는 신속한 웹 개발을 위해 미리 스타일이 지정된 포괄적인 구성 요소 및 유틸리티 세트를 제공하기 위해 CSS 선택기를 기반으로 합니다.
결론
CSS 선택기는 개발자가 스타일 지정을 위해 HTML 요소를 정확하게 대상으로 지정할 수 있는 강력한 도구입니다. 다양한 유형의 선택자, 선택자의 특이성 및 서로 간의 관계를 이해하면 잘 구성되고 유지 관리 가능한 스타일시트를 만들 수 있습니다. CSS 프레임워크와 고급 선택기를 활용하여 스타일 지정 기능을 향상시키는 것을 잊지 마십시오. CSS 선택기에 대한 확실한 이해를 통해 시각적으로 매력적이고 매력적인 웹 페이지를 만들 수 있습니다.
'프로그래밍, 코딩, 컴퓨터 > html, css, js' 카테고리의 다른 글
| CSS Flexbox 레이아웃 만들기 (0) | 2023.06.18 |
|---|---|
| CSS 레이아웃, Content, Padding, Border, Margin (0) | 2023.06.17 |
| CSS 란? 색상, 배경, 반응형 디자인 (0) | 2023.06.15 |
| HTML5 Canvas 캔버스 그래픽 만들기 (0) | 2023.06.14 |
| HTML 이메일 뉴스레터 디자인 (1) | 2023.06.13 |