13. 문서 구조 선택자, 가상 선택자

이번 포스팅에서는 이전 포스팅에 이어서 선택자에 대한 내용을 다뤄볼건데요.

그 중에서도 문서 구조와 관련된 선택자와 가상 선택자에 대하여 알아보겠습니다.

 

1. 문서 구조 선택자

문서 구조 선택자를 설명드리기에 앞서 문서의 구조를 파악할 필요가 있습니다.

 

<div>
    <h1>안녕하세요</h1>
    <p>
        <span>반갑습니다.</span>
    </p>
</div>

 

위의 HTML 코드를 살펴보면 <div> 태그 안에 <h1> 태그와 <p> 태그가 있으며, <p> 태그 내부에 <span> 태그가 위치해 있습니다.

여기서 부모와 자식, 조상과 자손, 형제의 관계를 파악할 수 있는데요.

<div> 안에 <h1>과 <p>가 위치해있기 때문에, <h1>과 <p>는 <div>의 자식 요소입니다.

반대로 얘기하면 <div>는 <h1>과 <p>의 부모 요소가 되는 것입니다.

조상 요소와 자손 요소는 부모 요소와 자식 요소가 확장된 개념이기 때문에, 부모 요소와 자식 요소를 포함하여 여러개가 될 수 있습니다.

<div>의 자손 요소는 <h1>, <p>, <span>이 있으며, <span>의 조상 요소는 <p>, <div>가 됩니다.

그리고 형제 요소는 같은 부모를 가지고 있는 요소들을 얘기하며, <h1>과 <p>가 형제 요소입니다.

여기서 설명드린 관계들을 생각하면서 선택자를 사용하면 됩니다.

 

► 자손 선택자

자손 선택자는 선택자와 선택자 사이를 공백으로 구분합니다.

 

div p {
    font-size:12px;
}

 

위의 예시는 <div>의 자손 요소인 <p>에게 글자 크기를 12px로 지정하라는 스타일입니다.

 

► 자식 선택자

자식 선택자는 선택자와 선택자 사이에 꺽쇠 기호(>)를 입력하여 사용합니다.

 

div > p {
    font-size:12px;
}

 

위의 예시는 <div>의 자식 요소인 <p>에게 글자 크기를 12px로 지정하라는 스타일입니다.

 

► 인접 형제 선택자

인접 형제 선택자는 형제 선택자 중에 바로 뒤에 인접해있는 형제를 선택할 때 사용하며, 더하기 기호(+)를 입력하여 사용합니다.

 

h1 + p {
    font-size:12px;
}

 

위의 예시는 형제 선택자에서 <h1>의 바로 뒤에 인접한 <p>에 글자 크기를 12px로 지정하라는 스타일입니다.

2. 가상 class 선택자

가상 class 선택자는 미리 약속해둔 상황에 적용되도록 스타일을 지정할 때 사용하는데요.

이번 포스팅에서는 자주 사용되는 가상 class 선택자에 대해서 말씀드리겠습니다.

기본적으로 가상 class 선택자는 콜론 기호(:)를 사용하여 나타내며, 뒤에 미리 약속한 내용을 입력합니다.

 

► :first-child, :last-child, :nth-child(n)

위의 가상 class 선택자는 자식 요소를 선택할 때 사용합니다.

 

<ul>
    <li>1번 자식</li>
    <li>2번 자식</li>
    <li>3번 자식</li>
    <li>4번 자식</li>
    <li>5번 자식</li>
</ul>

 

li:first-child {
    color:red;
}
li:last-child {
    color:blue;
}
li:nth-child(3) {
    color:green;
}

 

위의 예시대로 가상 class 선택자를 사용하게되면 결과값은 아래와 같이 적용됩니다.

 

• 1번 자식: color:red
• 2번 자식: color:기본값
• 3번 자식: color:green
• 4번 자식: color:기본값
• 5번 자식: color:blue

 

► :focus, :hover, :active

위의 가상 class 선택자는 정해진 약속을 사용자가 행동할 때 사용됩니다.

 

h1:focus {
    color:red;
}
h1:hover {
    color:blue;
}
h1:active {
    color:green;
}

 

• :focus는 현재 초점이 위치해있는 요소에 스타일이 적용되며, 위의 예시에서는 <h1>에 초점이 위치해있다면 color:red를 적용합니다.
• :hover는 마우스 포인터가 위치해있는 요소에 스타일이 적용되며, 위의 예시에서는 <h1>에 마우스 포인터가 위치해있다면 color:blue를 적용합니다.
• :active는 사용자가 선택하여 활성화된 요소일 경우 스타일이 적용되며, 위의 예시에서는 <h1>을 클릭하면 color:green을 적용합니다.

3. 가상 요소 선택자

가상 요소 선택자는 HTML 문서 내에 존재하지는 않지만, 미리 정의한 위치에 삽입되도록 약속되어 있습니다.

가상 요소 선택자는 콜론 기호(:)를 두개 사용(::)하여 나타냅니다.

 

► ::before, ::after

::before는 선언된 요소의 가장 앞에 요소를 삽일할때 사용하며, ::after는 선언된 요소의 가장 뒤에 요소를 삽일할때 사용합니다.

 

<h1>안녕하세요</h1>

h1::before {
    content:'@@'
}
h1::after {
    content:'##'
}

 

위의 예시처럼 가상 선택자를 사용하여 스타일을 적용하면, HTML 문서 내에는 보이지 않지만 실제 웹 브라우저에서는 아래와 같은 결과를 나타내줍니다.

 

<h1><before>@@</before>안녕하세요.<after>##</after></h1>

 

실제 코드가 위와 같이 나온다는 것은 아니며, 가상 선택자가 삽입되는 위치에 대하여 이해를 돕기 위한 것입니다.

실제 업무에서는 가상 선택자를 이용하여 아이콘이나 텍스트 등을 삽입할때 많이 사용되니, 충분히 연습하시는 것을 권해드립니다.

 

여기까지 선택자들에 대한 내용이었습니다.

선택자는 종류가 다양하기 때문에 직접 작성해보면서 이해하는 것이 무엇보다 중요합니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)