본문 바로가기
프로그래밍/CSS

[CSS 핵심강좌] 2. 선택자

by 꾸션 2023. 3. 4.

CSS 선택자는 웹 페이지에서 요소를 선택하고 스타일을 적용하는 데 사용되는 메커니즘입니다.

여러 유형의 선택자가 있습니다

1. 요소 선택자

특정 유형의 모든 요소를 선택합니다. 예를 들어, 선택자 "p"는 페이지의 모든 "p" 요소를 선택합니다.

p {
  color: red;
}

위의 CSS 코드는 페이지의 모든 "p" 요소의 텍스트 색상을 빨간색으로 지정합니다.

2. 클래스 선택자

특정 클래스 속성을 가진 요소를 선택합니다. 클래스 선택자는 마침표 (.)와 클래스 이름으로 표시됩니다. 예를 들어, 선택자 ".highlight"는 클래스 "highlight"를 가진 모든 요소를 선택합니다.

.highlight {
  background-color: yellow;
}

위의 CSS 코드는 페이지의 클래스 속성 값이 "highlight"인 모든 요소의 배경 색상을 노란색으로 지정합니다.

3. ID 선택자

특정 ID 속성을 가진 요소를 선택합니다. ID 선택자는 해시 기호 (#)와 ID 이름으로 표시됩니다. 예를 들어, 선택자 "#header"는 ID "header"를 가진 요소를 선택합니다.

#header {
  font-size: 24px;
}

위의 CSS 코드는 페이지의 ID 속성 값이 "header"인 요소의 글꼴 크기를 24px로 지정합니다.

4. 하위 선택자

특정 요소의 하위 항목을 선택합니다. 하위 선택자는 공백으로 구분됩니다. 예를 들어, 선택자 "body p"는 "body" 요소의 모든 "p" 하위 요소를 선택합니다.

body p {
  font-weight: bold;
}

위의 CSS 코드는 페이지의 "body" 요소의 하위 요소인 모든 "p" 요소의 글꼴 두께를 굵게 지정합니다.

5. 자식 선택자

특정 요소의 직계 자식 요소를 선택합니다. 자식 선택자는 꺽쇠 기호 (>)로 구분되며 직계 자식 요소만 선택합니다. 예를 들어, 선택자 "body > p"는 "body" 요소의 직계 자식인 "p" 요소만 선택합니다.

ul > li {
  font-style: italic;
}

위의 CSS 코드는 페이지의 "ul" 요소의 직계 자식인 "li" 요소의 글꼴 스타일을 기울임꼴로 지정합니다.

6. 인접 형제 선택자

다른 요소와 바로 인접한 요소를 선택합니다. 인접 형제 선택자는 더하기 기호 (+)로 구분되며 바로 인접한 형제 요소만 선택합니다. 예를 들어, 선택자 "h1 + p"는 "h1" 요소와 바로 인접한 첫 번째 "p" 요소를 선택합니다.

h1 + p {
  margin-top: 0;
}

위의 CSS 코드는 페이지에서 첫 번째 "h1" 요소와 바로 인접한 "p" 요소의 위쪽 여백을 0으로 설정합니다.

7. 속성 선택자

속성 및 속성 값에 따라 요소를 선택합니다. 속성 선택자는 대괄호 ([])로 표시되며 속성의 존재, 속성 값 또는 속성 값의 부분 일치에 따라 요소를 선택할 수 있습니다.

a[target="_blank"] {
  color: blue;
}

위의 CSS 코드는 "target" 속성 값이 "_blank"인 모든 "a" 요소의 텍스트 색상을 파란색으로 지정합니다.

CSS 선택자는 웹 페이지의 모양을 제어하고 웹 사이트를 유지 관리하고 업데이트하기 쉽게하는 강력한 도구입니다. 다양한 선택자를 조합하여 페이지의 특정 요소를 대상으로 스타일을 적용하여 웹 사이트의 모양과 느낌을 완전히 제어할 수 있습니다.

반응형

댓글