본문 바로가기
Front-End/HTML&CSS

CSS #8 (CSS3 선택자)

chiro-J 2025. 6. 20. 16:24
반응형

CSS도 마찬가지로 CSS3로 오면서 HTML 요소에 대한 선택자가 다양하게 늘어나,

훨씬 더 정교하고 강력한 스타일링을 할 수 있게 되었다.

 

예시

<!DOCTYPE html>
<html>
  <head>
    <title>DOM 구조 예시</title>
  </head>
  <body>
    <section>
      <h1>
        <strong>제목 강조</strong>
      </h1>
      <img src="image.jpg" alt="예시 이미지" />
      <div>
        <p><strong>첫 번째 단락 강조</strong></p>
        <p><strong>두 번째 단락 강조</strong></p>
        <p><strong>세 번째 단락 강조</strong></p>
      </div>
    </section>
  </body>
</html>

 

 

 

연결 선택자 : 서로 다른 관계에 있는 HTML 요소들을 선택하는 방법

  1. 자식 선택자 : 부모 요소의 직접적인 자식 만을 선택
  2. 후손 선택자 : 부모 요소와 그 자식 및 자손 요소에 모두 스타일을 적용
  3. 형제 선택자 : 같은 부모를 가진 요소 중에서 지정한 요소 뒤에 나오는 형제만 선택
  4. 인접 형제 선택자 : 특정 요소 바로 뒤에 있는 첫 번째 형제만 선택
/* 자식 선택자 (>) */
div > p {
    color: blue;
}
이 스타일은 div 요소의 직접적인 자식인 <p> 요소에만 적용. 중첩된 <p> 요소에는 적용 X

/* 후손 선택자 (공백) */
div p {
    color: red;
}
이 스타일은 div 내의 모든 <p> 요소에 적용. 직접적인 자식뿐만 아니라 자손에 있는 모든 <p> 요소에도 적용

/* 형제 선택자 (~) */
h2 ~ p {
    font-size: 18px;
}
이 스타일은 h2 뒤에 나오는 모든 <p> 요소에 적용

/* 인접 형제 선택자 (+) */
h2 + p {
    color: green;
}
이 스타일은 h2 바로 뒤에 위치한 첫 번째 <p> 요소에만 적용

 

 

 

속성 선택자 : HTML 요소의 속성값에 따라 스타일을 적용할 수 있게 해줌.

  1. 기본 속성 선택자 : 특정 속성의 존재 여부에 따라 스타일을 적용
  2. 속성 값이 특정 값으로 시작하는 선택자 (^=) : 속성 값이 특정 값으로 시작하는 요소를 선택
  3. (~=) : 공백으로 구분된 속성값 중 하나가 일치하면 선택
  4. 속성 값이 특정 값으로 끝나는 선택자 ($=) : 속성 값이 특정 값으로 끝나는 요소를 선택
  5. 속성 값에 특정 값이 포함된 선택자 (*=) : 속성 값에 특정 값이 포함된 요소를 선택
  6. 여러 값이 있는 속성 선택자 : 여러 값 중 하나를 만족하는 요소를 선택
/* 기본 속성 선택자 */
input[type="text"] {
    border: 1px solid black;
}
type="text" 속성이 있는 모든 <input> 요소에 적용

/* 공백으로 구분된 속성값 중 하나 일치 선택자 (~=) */
<div class="btn primary large"></div>
div[class~="primary"] {
  border: 1px solid blue;
}
class 속성에 "primary"가 단어로 포함되어 있으면 적용

/* 속성 값이 특정 값으로 시작하는 선택자 (^=) */
a[href^="https"] {
    color: green;
}
href 속성이 https 로 시작하는 모든 링크에 적용

/* 속성 값이 특정 값으로 끝나는 선택자 ($=) */
img[src$=".jpg"] {
    border: 2px solid red;
}
src 속성이 .jpg로 끝나는 모든 이미지에 적용

/* 속성 값에 특정 값이 포함된 선택자 (*=) */
a[href*="example"] {
    color: blue;
}
href 속성에 example 이라는 단어가 포함된 모든 링크에 적용

/* 여러 값이 있는 속성 선택자 */
input[type="text"], input[type="email"] {
    background-color: lightgray;
}
type 이 text 또는 email인 모든 <input> 요소에 적용

 

 

 

구조 선택자 : 형제 요소 중에서 순서에 따라 특정 요소를 선택할 때 유용

  1. :first-child : 부모의 첫 번째 자식 요소 선택
  2. :last-child : 부모의 마지막 자식 요소 선택
  3. :nth-child(n) : n번째 자식 요소를 선택 (1부터 시작)
  4. :nth-of-type(n) : 해당 요소 타입 중에서 n번째를 선택
p:first-child {
  color: red;
}
div 안에서 첫 번째 자식이 p일 경우에만 적용 
※ div > p 구조일 때 첫 번째 p에 적용됨

p:last-child {
  color: blue;
}
div 안의 마지막 p 요소에 적용됨

p:nth-child(2) {
  font-weight: bold;
}
div 안에서 두 번째 자식 요소가 p일 때 적용됨

p:nth-child(odd) {
  background-color: #f0f0f0;
}
홀수 번째 p 요소에 적용 (1, 3, 5...)

p:nth-child(even) {
  background-color: #e0e0ff;
}
짝수 번째 p 요소에 적용 (2, 4, 6...)

p:nth-of-type(2) {
  text-decoration: underline;
}
p 태그 중 두 번째인 요소에만 적용됨 (중간에 다른 태그가 끼어 있어도 p 기준으로 순서 셈)

 

 

 

가상 클래스 & 가상 요소 : 특정 상태나 특정 위치에 있는 요소에 스타일을 적용 가능

 

가상 클래스 : 특정 상태나 상호작용에 따라 스타일을 적용

  1. :hover: 사용자가 요소에 마우스를 올렸을 때 스타일을 적용
  2. :focus: 입력 필드나 링크가 포커스를 받을 때 스타일을 적용
  3. :active: 요소가 활성화된 상태일 때 스타일을 적용 (주로 클릭된 상태)
a:hover {
    color: red;
}
마우스를 갖다 댔을 때 빨간색으로 바뀜

input:focus {
    border-color: blue;
}
포커스를 받을 때 파란색으로 바뀜

button:active {
    background-color: darkgray;
}
요소가 활성화(클릭 등) 됐을 때 어두운 회색으로 바뀜

 

가상 요소 : 실제 존재하지 않는 요소에 스타일을 적용하는 방법, 

- 텍스트나 콘텐츠의 특정 부분에 스타일을 적용할 때 사용

  1. ::before: 요소의 앞부분에 콘텐츠를 삽입
  2. ::after: 요소의 뒤부분에 콘텐츠를 삽입
  3. ::first-letter: 요소의 첫 번째 글자에 스타일을 적용
  4. ::first-line: 요소의 첫 번째 줄에 스타일을 적용
p::before {
    content: "★ ";
    color: gold;
}
p 요소 앞에 금색 ★을 추가. 글머리 느낌.

p::after {
    content: " ★";
    color: gold;
}
p 요소 뒤에 금색 ★을 추가.

p::first-letter {
    font-size: 2em;
    font-weight: bold;
}
p 요소의 첫 글자를 굵게

p::first-line {
    color: red;
    font-weight: bold;
}
p 요소의 첫 줄을 붉고 굵게

 

 

 

 

요약

  1. 연결 선택자는 여러 HTML 요소 간의 관계에 따라 스타일을 적용하는 선택자로, 자식, 후손, 형제 요소 간의 관계를 설정할 수 있습니다. (>, 공백, ~, +)
  2. 속성 선택자는 특정 HTML 요소의 속성값에 따라 스타일을 적용합니다. 예를 들어, 속성 값이 특정 값으로 시작하거나 끝나는 요소를 선택할 수 있습니다. ([attribute="value"], [attribute^="value"], [attribute$="value"], [attribute*="value"])
  3. 가상 클래스는 요소의 특정 상태에 스타일을 적용하고, 가상 요소는 요소의 특정 부분에 스타일을 적용합니다. (:hover, :focus, ::before, ::after, ::first-letter, ::first-line)

 

 

 

 

 

 

 

 

 

반응형

'Front-End > HTML&CSS' 카테고리의 다른 글

CSS #10 (반응형 웹, layout, @media)  (0) 2025.06.20
CSS #9 (CSS3 애니메이션)  (0) 2025.06.20
HTML #4 (시맨틱 태그, 멀티미디어)  (1) 2025.06.20
CSS 기초 #7 (column, table)  (0) 2025.06.19
CSS 기초 #6 (box, position)  (1) 2025.06.18

'Front-End/HTML&CSS' Related Articles

티스토리툴바