[CSS 수업] 3강 - CSS 선택자

 

안녕하세요! CSS 수업 3강에서는 CSS 선택자에 대해 알아보겠습니다. CSS 선택자는 HTML 요소에 스타일을 적용할 때 사용되는 도구로, 다양한 종류와 특징을 가지고 있습니다. 초보자들도 쉽게 이해할 수 있도록 선택자의 종류와 사용 방법을 살펴보겠습니다.

 

1. 요소 선택자 (Element Selector)
요소 선택자는 HTML 태그 자체를 선택하는 방법입니다. 예를 들어, p 태그를 선택하려면 p라는 요소 선택자를 사용합니다. 이렇게 하면 모든 p 태그에 스타일을 적용할 수 있습니다.

p {
    color: blue;
}

위 예제는 모든 p 요소의 글자 색상을 파란색으로 변경합니다.

 

 

2. 클래스 선택자 (Class Selector)
클래스 선택자는 HTML 요소에 클래스 속성을 부여하여 스타일을 적용합니다. 요소 선택자와 달리, 클래스 선택자는 .을 사용하여 식별합니다.

.my-class {
    font-size: 18px;
}

위 예제는 my-class 클래스를 가진 요소의 글꼴 크기를 18px로 지정합니다.

 

3. ID 선택자 (ID Selector)
ID 선택자는 HTML 요소에 고유한 ID 속성을 부여하여 스타일을 적용합니다. 선택자 앞에 #을 사용하여 식별합니다.

#my-id {
    background-color: yellow;
}

위 예제는 my-id ID를 가진 요소의 배경색을 노란색으로 변경합니다.

 

반응형

 

4. 복합 선택자 (Combined Selector)
복합 선택자는 여러 선택자를 조합하여 복잡한 스타일링을 적용하는 방법입니다. 자손 선택자, 자식 선택자, 인접 형제 선택자 등이 있습니다.

· 자손 선택자: 공백을 사용하여 요소 간의 관계를 나타냅니다.
·  자식 선택자: > 기호를 사용하여 바로 아래 자식 요소를 선택합니다.
·  인접 형제 선택자: + 기호를 사용하여 바로 다음 형제 요소를 선택합니다.

/* 자손 선택자 예제 */
div p {
    color: green;
}

/* 자식 선택자 예제 */
div > p {
    font-weight: bold;
}

/* 인접 형제 선택자 예제 */
h2 + p {
    margin-top: 10px;
}

CSS 선택자는 웹 디자인의 기본 요소이므로, 다양한 선택자를 연습하고 적용해보세요. 다음 강의에서는 CSS 속성 및 값에 대해 알아보겠습니다. 많은 기대 부탁드립니다!

 

- 지난 수업 목록