본문 바로가기
Study/CSS

CSS 기초 강의 2편: CSS 선택자와 우선순위

by wawManager 2024. 11. 17.
728x90

1. 기본 선택자

1) 전체 선택자(*)

전체 선택자는 페이지의 모든 HTML 요소에 스타일을 적용할 때 사용합니다. 주로 기본 스타일을 초기화하거나 공통 스타일을 설정할 때 사용됩니다.

* {
    margin: 0;
    padding: 0;
}

2) 태그 선택자

태그 선택자는 특정 HTML 태그에 스타일을 적용합니다. 태그 이름을 선택자로 사용하며, 같은 태그를 가진 모든 요소에 스타일이 적용됩니다.

p {
    color: blue;
    font-size: 18px;
}

3) 클래스 선택자(.)

클래스 선택자는 특정 클래스 이름을 가진 요소에 스타일을 적용하며, 여러 요소에 중복 적용이 가능합니다. 클래스 이름 앞에 .을 붙여 사용합니다.

<p class="highlight">클래스 선택자를 사용한 문장입니다.</p>

.highlight {
    background-color: yellow;
    font-weight: bold;
}

4) 아이디 선택자(#)

아이디 선택자는 특정 **아이디(id)**를 가진 요소에 스타일을 적용하며, 문서 내에서 고유한 하나의 요소에만 사용해야 합니다. 아이디 이름 앞에 #을 붙여 사용합니다.

<p id="unique">아이디 선택자를 사용한 문장입니다.</p>

#unique {
    color: red;
    font-size: 20px;
}

2. 복합 선택자

1) 자식 선택자(>)

자식 선택자는 특정 요소의 직계 자식 요소만 선택합니다. 부모 요소와 자식 요소 사이에 > 기호를 사용합니다.

<div class="container">
    <p>이 문장은 스타일 적용 대상입니다.</p>
    <div>
        <p>이 문장은 적용되지 않습니다.</p>
    </div>
</div>

.container > p {
    color: green;
}

 

2) 후손 선택자 (공백)

후손 선택자는 특정 요소 안의 모든 하위 요소에 스타일을 적용합니다. 부모와 자식 관계가 아니라, 자손 관계 전체에 적용됩니다.

.container p {
    font-style: italic;
}

3) 인접 형제 선택자(+)

인접 형제 선택자는 특정 요소 바로 뒤에 나오는 형제 요소에만 스타일을 적용합니다.

<h2>첫 번째 제목</h2>
<p>이 문장은 적용됩니다.</p>
<p>이 문장은 적용되지 않습니다.</p>

h2 + p {
    color: purple;
}

4) 일반 형제 선택자(~)

일반 형제 선택자는 특정 요소 뒤에 오는 모든 형제 요소에 스타일을 적용합니다.

<h3>제목</h3>
<p>첫 번째 문장입니다.</p>
<p>두 번째 문장입니다.</p>

h3 ~ p {
    color: blue;
}

3. 의사 클래스와 의사 요소

1) 의사 클래스(Pseudo-Class)

의사 클래스는 요소의 특정 상태에서 스타일을 적용할 때 사용합니다.

  • :hover: 마우스를 올렸을 때
  • :active: 클릭할 때
  • :focus: 요소에 포커스가 잡혔을 때
a:hover {
    color: orange;
}

2) 의사 요소(Pseudo-Element)

의사 요소는 요소의 특정 부분에 스타일을 적용합니다.

  • ::before: 요소 내용의 앞에 콘텐츠 삽입
  • ::after: 요소 내용의 뒤에 콘텐츠 삽입
p::before {
    content: "★ ";
    color: gold;
}

4. CSS 우선순위

CSS 스타일이 충돌할 때, 우선순위에 따라 어떤 스타일이 적용될지 결정됩니다.

우선순위 규칙

  1. 인라인 스타일 (style 속성으로 지정) - 가장 높은 우선순위
  2. 아이디 선택자 (#id)
  3. 클래스 선택자, 속성 선택자, 의사 클래스 (.class, [type="text"], :hover)
  4. 태그 선택자 (p, h1, div)
  5. 전체 선택자 (*) - 가장 낮은 우선순위

우선순위 예제

<p id="text" class="highlight" style="color: red;">우선순위 테스트</p>

/* 가장 낮은 우선순위 */
p {
    color: blue;
}

/* 클래스 선택자 */
.highlight {
    color: green;
}

/* 아이디 선택자 */
#text {
    color: purple;
}

/* 인라인 스타일 - 가장 높은 우선순위로 'red' 적용 */

이 예제에서 p 요소의 color 속성은 인라인 스타일의 빨간색이 적용됩니다.

예제: 선택자와 우선순위 활용하기

아래는 여러 선택자를 활용해 스타일을 적용한 HTML과 CSS 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>CSS 선택자와 우선순위</title>
    <style>
        /* 전체 선택자 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 태그 선택자 */
        h1 {
            color: navy;
            text-align: center;
        }

        /* 클래스 선택자 */
        .highlight {
            color: orange;
            font-weight: bold;
        }

        /* 아이디 선택자 */
        #special {
            color: green;
            font-size: 20px;
        }

        /* 자식 선택자 */
        .container > p {
            color: blue;
        }

        /* 의사 클래스 */
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <h1>CSS 선택자와 우선순위</h1>
    <div class="container">
        <p>이 문장은 파란색입니다.</p>
        <p id="special">이 문장은 초록색이며, 폰트 크기가 20px입니다.</p>
    </div>
    <p class="highlight">이 문장은 주황색으로 강조되었습니다.</p>
    <a href="#">링크에 마우스를 올려보세요.</a>
</body>
</html>

요약

이번 강의에서는 CSS 선택자의 종류와 활용법을 배웠고, 우선순위 규칙에 대해 알아보았습니다. 다양한 선택자와 우선순위를 이해하면 CSS 스타일을 더 세밀하게 적용할 수 있습니다. 다음 강의에서는 CSS 레이아웃 기초와 다양한 레이아웃 속성에 대해 알아보겠습니다.

728x90

'Study > CSS' 카테고리의 다른 글

CSS 기초 강의 6편: 반응형 웹 디자인과 미디어 쿼리  (0) 2024.11.21
CSS 기초 강의 5편: Grid 레이아웃을 활용한 2차원 레이아웃 구성하기  (0) 2024.11.20
CSS 기초 강의 4편: Flexbox를 사용한 유연한 레이아웃 구성하기  (0) 2024.11.19
CSS 기초 강의 3편: CSS 레이아웃 기초와 박스 모델  (0) 2024.11.18
CSS 기초 강의 1편: CSS의 기본 개념과 문법  (0) 2024.11.16

관련글

티스토리툴바