코딩 스쿨 CSS

언어선택 : HTMLㅣ CSSㅣ JAVAㅣ JAVASCRIPTㅣ MYSQLㅣ SQLㅣ PHP
▶ CSS References
CSS Reference
CSS Selectors
CSS Functions
CSS Reference Aural
CSS Web Safe Fonts
CSS Animatable
CSS Units
CSS PX-EM Converter
CSS Colors
CSS Color Values
CSS Default Values
CSS Browser Support

CSS Selectors

CSS Selectors : 다양한 선택자 가이드

  • *CSS 선택자(Selectors)**는 HTML 문서에서 스타일을 적용할 요소를 선택하는 데 사용됩니다. 선택자는 특정 HTML 요소를 대상으로 스타일을 적용하는 방법을 정의하며, 기본적인 요소 선택부터 고급 선택자까지 다양한 방식으로 요소를 선택할 수 있습니다. 이 가이드는 CSS 선택자의 종류와 사용법을 설명합니다.

1. 기본 선택자

1.1 요소 선택자

특정 HTML 요소를 선택하여 스타일을 적용합니다.

  • 예시:

    p {
    color: blue;
}

    위 코드는 모든 <p> 요소에 파란색 텍스트를 적용합니다.

1.2 클래스 선택자

클래스 이름을 기준으로 선택자를 정의하며, 클래스는 여러 요소에 적용될 수 있습니다. 클래스 선택자는 마침표(.)로 시작합니다.

  • 예시:

    .button {
    background-color: red;
    color: white;
}

    HTML에서는 다음과 같이 적용됩니다:

    <button class="button">Click me</button>

1.3 ID 선택자

ID는 고유한 요소에 적용되며, 문서 내에서 하나의 요소에만 사용할 수 있습니다. ID 선택자는 해시 기호(#)로 시작합니다.

  • 예시:

    #header {
    font-size: 24px;
}

    HTML에서는 다음과 같이 사용됩니다:

    <h1 id="header">Welcome!</h1>

1.4 전체 선택자

전체 선택자(*)는 모든 HTML 요소에 스타일을 적용합니다.

  • 예시:

    * {
    margin: 0;
    padding: 0;
}

2. 결합 선택자 (Combinator Selectors)

2.1 후손 선택자 (공백)

후손 선택자는 특정 요소의 모든 후손 요소를 선택합니다.

  • 예시:

    div p {
    color: green;
}

    위 코드는 모든 <div> 요소 내의 모든 <p> 요소에 녹색 텍스트를 적용합니다.

2.2 자식 선택자 (>)

자식 선택자는 부모 요소 바로 아래에 있는 자식 요소를 선택합니다.

  • 예시:

    div > p {
    color: blue;
}

    위 코드는 <div> 요소 바로 아래의 모든 <p> 요소에 파란색 텍스트를 적용합니다.

2.3 인접 형제 선택자 (+)

인접 형제 선택자는 특정 요소 다음에 오는 형제 요소를 선택합니다.

  • 예시:

    h1 + p {
    margin-top: 0;
}

    위 코드는 <h1> 요소 바로 다음에 나오는 <p> 요소의 상단 여백을 없앱니다.

2.4 일반 형제 선택자 (~)

일반 형제 선택자는 특정 요소 이후에 나오는 모든 형제 요소를 선택합니다.

  • 예시:

    h1 ~ p {
    color: gray;
}

    위 코드는 <h1> 요소 이후에 나오는 모든 형제 <p> 요소에 회색 텍스트를 적용합니다.

3. 속성 선택자 (Attribute Selectors)

속성 선택자는 HTML 요소의 속성을 기준으로 스타일을 적용합니다.

3.1 기본 속성 선택자 ([attribute])

특정 속성을 가진 요소를 선택합니다.

  • 예시:

    [type="text"] {
    border: 1px solid #ccc;
}

    위 코드는 type="text" 속성을 가진 모든 요소에 회색 테두리를 적용합니다.

3.2 포함 속성 선택자 ([attribute~="value"])

특정 값을 포함하는 속성을 가진 요소를 선택합니다. 값은 공백으로 구분된 여러 값 중 하나일 수 있습니다.

  • 예시:

    [class~="button"] {
    background-color: red;
}

    위 코드는 class="button red"와 같이 button이라는 클래스 값을 포함하는 모든 요소에 빨간 배경색을 적용합니다.

3.3 시작 값 속성 선택자 ([attribute^="value"])

속성 값이 특정 값으로 시작하는 요소를 선택합니다.

  • 예시:

    a[href^="https"] {
    color: green;
}

    위 코드는 href 속성이 https로 시작하는 모든 <a> 요소에 녹색 텍스트를 적용합니다.

3.4 끝나는 값 속성 선택자 ([attribute$="value"])

속성 값이 특정 값으로 끝나는 요소를 선택합니다.

  • 예시:

    a[href$=".pdf"] {
    color: red;
}

    위 코드는 href 속성이 .pdf로 끝나는 모든 <a> 요소에 빨간 텍스트를 적용합니다.

3.5 포함하는 값 속성 선택자 ([attribute*="value"])

속성 값에 특정 문자열이 포함된 요소를 선택합니다.

  • 예시:

    a[href*="example"] {
    color: blue;
}

    위 코드는 href 속성에 example이 포함된 모든 <a> 요소에 파란 텍스트를 적용합니다.

4. 가상 클래스 (Pseudo-classes)

가상 클래스는 특정 상태에 있는 요소를 선택합니다.

4.1 :hover

마우스를 올렸을 때 요소의 스타일을 변경합니다.

  • 예시:

    a:hover {
    color: red;
}

    위 코드는 링크에 마우스를 올리면 텍스트 색상을 빨간색으로 변경합니다.

4.2 :nth-child()

특정 순서의 자식 요소를 선택합니다.

  • 예시:

    li:nth-child(2) {
    color: green;
}

    위 코드는 리스트에서 두 번째 <li> 요소에 녹색 텍스트를 적용합니다.

    • :nth-child(even): 짝수 번째 요소
    • :nth-child(odd): 홀수 번째 요소

4.3 :first-child, :last-child

첫 번째 자식과 마지막 자식을 선택합니다.

  • 예시:

    p:first-child {
    font-weight: bold;
}

p:last-child {
    color: blue;
}

4.4 :focus

입력 필드가 포커스를 받을 때 스타일을 적용합니다.

  • 예시:

    input:focus {
    border-color: blue;
}

    위 코드는 입력 필드가 포커스를 받으면 파란 테두리를 적용합니다.

5. 가상 요소 (Pseudo-elements)

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

5.1 ::before

요소의 내용 앞에 가상 콘텐츠를 추가합니다.

  • 예시:

    h1::before {
    content: "★ ";
    color: gold;
}

    위 코드는 모든 <h1> 요소 앞에 황금색 별을 추가합니다.

5.2 ::after

요소의 내용 뒤에 가상 콘텐츠를 추가합니다.

  • 예시:

    h1::after {
    content: " ★";
    color: gold;
}

    위 코드는 모든 <h1> 요소 뒤에 황금색 별을 추가합니다.

5.3 ::first-letter

첫 번째 글자에 스타일을 적용합니다.

  • 예시:

    p::first-letter {
    font-size: 2em;
    color: red;
}

    위 코드는 모든 <p> 요소의 첫 번째 글자를 크게 하고 빨간색으로 변경합니다.

5.4 ::first-line

첫 번째 줄에 스타일을 적용합니다.

  • 예시:

    p::first-line {
    font-weight: bold;
}

    위 코드는 모든 <p> 요소의 첫 번째 줄을 굵게 만듭니다.

6. 그룹화 선택자

동일한 스타일을 여러 요소에 적용할 때는 선택자를 쉼표로 구분하여 그룹화할 수 있습니다.

  • 예시:

    h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: blue;
}

    위 코드는 모든 <h1>, <h2>, <h3> 요소에 같은 폰트와 파란색 텍스트를 적용합니다

.

7. 특수 선택자

7.1 :not()

not() 가상 클래스는 특정 조건을 제외한 요소를 선택합니다.

  • 예시:

    p:not(.highlight) {
    color: gray;
}

    위 코드는 highlight 클래스를 가지지 않은 모든 <p> 요소에 회색 텍스트를 적용합니다.

7.2 :nth-of-type()

nth-of-type()는 같은 유형의 형제 요소 중 특정 번째에 위치한 요소를 선택합니다.

  • 예시:

    div:nth-of-type(2) {
    background-color: yellow;
}

    위 코드는 동일한 부모 안에서 두 번째 <div> 요소에 노란 배경색을 적용합니다.

7.3 :empty

empty 가상 클래스는 자식 요소가 없는 요소를 선택합니다.

  • 예시:

    p:empty {
    display: none;
}

    위 코드는 자식 요소가 없는 빈 <p> 요소를 숨깁니다.

요약

CSS 선택자는 HTML 요소를 선택하고 스타일을 적용하는 핵심적인 도구입니다. 기본 선택자에서 고급 가상 클래스와 가상 요소까지 다양한 선택자를 활용하면 웹 페이지의 스타일을 세밀하게 조정할 수 있습니다. 선택자를 이해하고 활용하는 것은 CSS를 효과적으로 사용하는 데 매우 중요합니다.

copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com