CSS (Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 지정하기 위한 스타일 시트 언어입니다. 이를 통해 웹 개발자는 HTML 요소에 대한 스타일을 적용할 수 있습니다. CSS의 중요한 부분 중 하나는 선택자(Selector)입니다. 선택자는 어떤 HTML 요소를 스타일링할지를 정의합니다.

기본 선택자

요소 선택자

가장 간단한 형태의 선택자로, 요소 이름을 직접 사용하여 스타일을 적용합니다. 예를 들어, p 선택자는 모든 <p> 요소에 스타일을 적용합니다.

p {
    color: blue;
}

클래스 선택자

클래스 선택자는 요소에 class 속성을 지정하여 스타일을 적용합니다. 클래스 선택자는 .으로 시작하며, 클래스 이름을 지정합니다. 예를 들어, btn 클래스를 가진 모든 요소에 스타일을 적용합니다.

.btn {
    font-weight: bold;
}

아이디 선택자

아이디 선택자는 요소에 id 속성을 지정하여 스타일을 적용합니다. 아이디 선택자는 #으로 시작하며, 아이디 이름을 지정합니다. 아이디는 문서 내에서 유일해야 합니다. 예를 들어, header 아이디를 가진 요소에 스타일을 적용합니다.

#header {
    background-color: #333;
    color: white;
}

속성 선택자

속성 선택자

속성 선택자는 요소가 특정 속성을 가지고 있는지 여부에 따라 스타일을 적용합니다. 속성 선택자는 속성 이름을 선택자로 지정하며, 대괄호([]) 안에 속성 값이 옵니다. 예를 들어, img 요소 중 alt 속성이 있는 경우에 스타일을 적용합니다.

img[alt] {
    border: 1px solid gray;
}

속성 값 선택자

속성 값 선택자는 속성과 속성 값의 조합에 따라 스타일을 적용합니다. 속성 값 선택자는 [속성=값]과 같은 형식으로 사용합니다. 예를 들어, input 요소 중 type 속성 값이 text인 경우에 스타일을 적용합니다.

input[type="text"] {
    width: 200px;
}

가상 클래스 선택자

가상 클래스 선택자는 특정 상태나 위치에 있는 요소에 스타일을 적용합니다.

링크와 관련된 가상 클래스 선택자

• :link : 방문하지 않은 링크에 스타일을 적용합니다.
• :visited : 방문한 링크에 스타일을 적용합니다.
• :hover : 마우스를 올려놓은 요소에 스타일을 적용합니다.
• :active : 마우스로 클릭한 요소에 스타일을 적용합니다.

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: red;
}

기타 가상 클래스 선택자

• :first-child : 첫 번째 자식 요소에 스타일을 적용합니다.
• :last-child : 마지막 자식 요소에 스타일을 적용합니다.
• :nth-child(n) : n번째 자식 요소에 스타일을 적용합니다.

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

li:last-child {
    text-decoration: underline;
}

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

CSS 선택자를 이해하고 활용하는 것은 웹 개발자에게 매우 중요합니다. 선택자를 올바르게 사용하면 웹 페이지의 스타일링을 더욱 효율적이고 편리하게 할 수 있습니다. 위에서 소개한 선택자들을 충분히 숙지하여 웹 페이지 개발에 활용해 보세요.