[CSS] - 셀렉터

Java & Python

[CSS] - 셀렉터

토끼퉁 2023. 9. 6. 20:01

선택자(Selector)

HTML 요소를 식별하여 스타일 규칙을 적용하는 데 사용되는 패턴, 표현
셀렉터를 사용해서 특정 요소나 요소 그룹을 선태갛고, 해당 요소에 스타일을 적용할 수 있다.

1. 태그 이름(Tag Selector) : HTML 태그 이름을 셀렉터로 선택하여 사용한다.

p {
    color:red;
}

2. ID 선택자(ID Selector) : HTML에 지정된 "고유한 ID 속성 값"을 기반으로 선택하여 사용한다.
ID 이름은 해시(#)으로 시작한다.
ID는 고유한 속성이므로 기본키와 같이 하나만 존재하여야 한다.

<p id="sample">id를 사용해보는 예제입니다.</p>
sample {
    color:red;
}

3. 클래스 선택자(Class Selector) : HTML에 지정된 "클래스 속성 값"을 기반으로 선택하여 사용한다.
클래스 이름 마침표(.)으로 시작한다. 여러개의 클래스를 한 번에 지정할 경우, 공백으로 구분한다.

<p class="example">id를 사용해보는 예제입니다.</p>
.example {
    color:red;
}

.example1 .example2 .example3 {
    color:red;
}

≫ 태그이름.클래스이름으 형태로도 선언이 가능하다.

p.example {
    color:red;
}

≫ 클래스 이름은 여러 개가 될 수 있다. 서로 다른 태그여도 같은 이름을 사용할 수 있다.
≫ 클래스 이름을 가진 특정 태그에만 선택하여 사용하고 싶을 때

ID 선택자는 클래스 선택자보다 우선순위가 높다.
클래스 선택자는 태그 이름 선택자보다 우선순위가 높다.
ID > class > Tag Name

4. 자손 및 자식 관계(CSS Combinators) : 여러 개의 요소 중 특정 관계 있는 하위요소나 자식 요소만을 선택한다.

1) 자손(combinator: 공백) : 조상과 후손 사이의 모든 하위 요소들을 대상으로 한다.
2) 자식(combinator: >) : 직접적인 자식 요소들을 대상으로 한다.

div ul li {
    color: red;
}

≫ div 안에 있는 ul 안에 있는 li에 적용하겠다

div>ul>li {
    color: red;
}

≫ div 바로 아래 있는 ul 바로 안에 있는 li에 적용한다.

<div>
<ul>
<div>
<li>리스트 1</li>
</div>
<li>리스트 2</li>
</ul>
</div>

≫ 자손 : 리스트 1, 리스트 2
≫ 자식 : 리스트 2

5. 가상 클래스(Pseudo-Class) : 특정 상태나 위치 등 특별한 조건을 가진 요소를 선택하기 위해 사용된다.

a:hover {
    color: red;
}

≫ a링크 위에 마우스가 올라가면 색상변경

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

≫ li 첫번째 아이템만 굵게

ul li:nth-child(odd) {
    background-color:dodgeblue;
}

≫ 리스트 홀수번째 아이템만 배경색 설정

6. 전체 선택자(Universal Selector) : 모든 HTML 요소를 선택, 기호는 *

* {
    margin: 0;
}

7. 속성 선택자(Attribute Selector) : 특정 속성 값을 가진 HTML 요소를 선택, 기호는 대괄호[]

input[type="submit"] {
    color: white;
}

※ ※ ※ 문제 ※ ※ ※

test02 파일 이용
1. <h1> 태그의 글자 크기 32px
2. p 태그의 글자색 빨간색
3. .list 클래스가 지정된 <ul> 안의 li 들은 배경색이 연두색
4. container 안에 있는 p 태그는 글자 파란색, exception class를 가진 p 태그는 글자 연두색
5. 링크에 마우스를 올리면 배경색이 노란색