CSS - 선택자: 스타일이 가득한 웹 페이지로의 문턱
안녕하세요, 미래의 웹 디자인 슈퍼스타! 이 흥미로운 여정에서 CSS 선택자 세계를 안내해 드리게 되어 기쁩니다. 10년 이상 컴퓨터 과학을 가르쳐온 경험을 가진 저는, 선택자를 마스터하면 웹 디자인의 가능성을 열어주는 보물상자를 열어버리는 것과 같다고 말씀드릴 수 있습니다. 그럼, 함께 웹 페이지를 빛나게 하기 위해 다이빙해봅시다!
선택자의 종류
여정을 시작하기 전에, 탐구할 다양한 선택자 유형을 빠르게 살펴보겠습니다:
| 선택자 유형 | 예시 | 설명 |
|---|---|---|
| 일반 | * | 모든 요소 선택 |
| 요소 | p | 모든 요소 선택 |
| 클래스 | .classname | class="classname"를 가진 요소 선택 |
| ID | #idname | id="idname"를 가진 요소 선택 |
| 속성 | [attribute] | 지정된 속성을 가진 요소 선택 |
| 그룹 | selector1, selector2 | selector 중 하나에 맞는 모든 요소 선택 |
| 伪类 | :hover | 특정 상태의 요소 선택 |
| 伪要素 | ::first-line | 요소의 특정 부분 선택 |
| 자손 | div p | 요소 내의 모든 요소 선택 |
| 자식 | div > p | 부모가 인 모든
요소 선택 |
| 인접 형제 | div + p | 다음에 바로 오는 첫 번째 요소 선택 |
| 일반 형제 | div ~ p | 요소의 형제인 모든 요소 선택 |
이제 이들 중 하나씩 자세히 탐구해보겠습니다!
CSS 일반 선택자
일반 선택자는 CSS의 스위스 아르미Knife와 같습니다 - 모든 것을 선택합니다! 별표 (*)로 표현됩니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}이 코드는 모든 요소의 여백과 패딩을 초기화하고 box-sizing 속성을 설정합니다. 이는 스타일시트의 시작 부분에서 자주 사용되어 깨끗한 시작점을 만듭니다.
CSS 요소 선택자
요소 선택자는 특정 HTML 요소를 타겟합니다. 간단하지만 강력합니다.
p {
font-size: 16px;
line-height: 1.5;
}
h1 {
color: #333;
font-family: 'Arial', sans-serif;
}여기서 우리는 모든
요소에 16픽셀의 폰트 크기와 1.5의 줄 간격을 적용하고, 모든
요소에 어두운 회색 색상과 Arial 폰트를 적용합니다.
CSS 클래스 선택자
클래스 선택자는 매우 다재다능합니다. 동일한 클래스를 공유하는 여러 요소에 스타일을 적용할 수 있습니다.
.highlight {
background-color: yellow;
font-weight: bold;
}
.error-message {
color: red;
border: 1px solid red;
padding: 10px;
}이 예제에서, class="highlight"를 가진 모든 요소는 노란 배경색과 굵은 글자로 표시되고, class="error-message"를 가진 요소는 빨간색 글자와 빨간 테두리 그리고 패딩이 적용됩니다.
CSS ID 선택자
ID 선택자는 단일, 고유한 요소를 스타일링하는 데 사용됩니다. 해시(#) 기호로 시작됩니다.
#header {
background-color: #f0f0f0;
padding: 20px;
}
#main-content {
max-width: 800px;
margin: 0 auto;
}이 코드는 id="header"와 id="main-content"를 가진 요소를 스타일링합니다. ID는 페이지 내에서 고유해야 합니다!
CSS 속성 선택자
속성 선택자는 요소의 속성이나 속성 값에 따라 요소를 타겟합니다.
[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
[href^="https"] {
color: green;
}
[class*="btn"] {
cursor: pointer;
}여기서 우리는 type="text"를 가진 모든 요소, "https"로 시작하는 모든 링크, 그리고 클래스 이름에 "btn"이 포함된 모든 요소를 스타일링합니다.
CSS 그룹 선택자
그룹 선택자는 여러 선택자에 같은 스타일을 적용할 수 있습니다. 쉼표로 구분됩니다.
h1, h2, h3 {
font-family: 'Georgia', serif;
color: #333;
}
.error, .warning {
font-weight: bold;
}이 코드는 h1, h2, h3 요소에 같은 폰트 가족과 색상을 적용하며, .error와 .warning 클래스에 bold 스타일을 적용합니다.
CSS伪类 선택자
伪类 선택자는 특정 상태의 요소를 타겟합니다.
a:hover {
text-decoration: underline;
}
input:focus {
outline: 2px solid blue;
}
li:nth-child(odd) {
background-color: #f0f0f0;
}이 스타일은 링크가 hover 상태일 때 밑줄을 추가하고, 포커스된 입력 요소에 파란 테두리를 추가하며, 짝수 번째 목록 아이템에 연한 회색 배경을 적용합니다.
CSS伪要素 선택자
伪要素 선택자는 요소의 특정 부분을 스타일링할 수 있습니다.
p::first-letter {
font-size: 2em;
font-weight: bold;
}
h1::before {
content: "? ";
}
div::selection {
background-color: yellow;
}이 코드는 문단의 첫 글자를 커지고 굵게 표시하고, h1 요소 앞에 포인팅 핀 이모지를 추가하며, div 내에서 선택된 텍스트를 노란 배경으로 표시합니다.
CSS 자손 선택자
자손 선택자는 다른 요소의 자손을 타겟합니다.
article p {
line-height: 1.6;
}
.container .box {
border: 1px solid #ccc;
}이 코드는 article 내의 모든 p 요소와 class="container" 요소 내의 class="box" 요소를 스타일링합니다.
CSS 자식 선택자
자식 선택자는 요소의 직접 자식을 타겟합니다.
ul > li {
list-style-type: square;
}
div > p {
margin-bottom: 10px;
}이 코드는 ul의 직접 자식인 모든 li 요소에 정사각형 부호를 적용하고, div의 직접 자식인 p 요소에 하단 여백을 추가합니다.
CSS 인접 형제 선택자
인접 형제 선택자는 다른 요소 다음에 바로 오는 요소를 타겟합니다.
h1 + p {
font-size: 1.2em;
font-weight: bold;
}
.button + .button {
margin-left: 10px;
}이 코드는 h1 다음에 바로 오는 첫 번째 p 요소를 커지고 굵게 표시하고, 버튼이 다른 버튼 뒤에 바로 오는 경우 왼쪽 여백을 추가합니다.
CSS 일반 형제 선택자
일반 형제 선택자는 다른 요소의 형제를 타겟합니다, 즉 인접 형제 선택자와 달리 바로 옆에 있지 않아도 됩니다.
h1 ~ p {
color: #666;
}
.highlight ~ li {
font-style: italic;
}이 코드는 h1 요소의 형제인 모든 p 요소의 색상을 변경하고, class="highlight" 요소의 형제인 모든 li 요소에 이탤릭 스타일을 적용합니다.
CSS 중첩 선택자
중첩 선택자는 선택자를 중첩하여 더 간결하고 가독성 있는 CSS를 작성할 수 있습니다.
.container {
max-width: 1200px;
margin: 0 auto;
.header {
background-color: #f0f0f0;
padding: 20px;
h1 {
color: #333;
}
}
.content {
padding: 20px;
p {
line-height: 1.6;
}
}
}이 중첩 구조는 요소 간의 관계를 명확히 보여주고 CSS를 더 조직적으로 만듭니다.
CSS 중첩 선택자의 특성
- 향상된 가독성: 중첩은 HTML의 구조를 반영합니다.
- 반복 감소: 부모 선택자를 다시 작성할 필요가 없습니다.
- 용이한 유지보수: 부모 선택자의 변경이 중첩된 선택자에 자동으로 적용됩니다.
- 범위 제한: 스타일은 자연스럽게 부모 문맥에 제한됩니다.
기억하세요, 중첩은 강력하지만 너무 깊게 중첩하면 CSS가 이해하기 어려워질 수 있습니다.
그렇게 해서, 내 용功한 웹 디자인 제자! CSS 선택자의 매력적인 여행을 마친 것입니다. 이 도구들을 가지고 아름답게 스타일링된 웹 페이지를 만드는 길에 한 걸음 더 나아갔습니다. 연습이 완벽을 만들어요, 그러니 다양한 선택자와 조합을 실험해 보지 마세요. 행복한 코딩을 기원합니다!
Credits: Image by storyset