<22.03.15> CSS 공부 일지 #04. CSS의 다양한 Selector들

CSS 공부하기 #04

 

오늘은 CSS의 선택자(Selector)에 대해 알아보고자 한다. CSS에서 선택자는 어떤 HTML 태그를 꾸밀지를 선택하는 것으로, 여기에는 일반적인 HTML 태그가 올 수도 있으며, 클래스, 아이디, 그리고 부모 - 자식 관계를 나타내는 다양한 선택자들이 올 수 있다. 오늘은 선택자의 기본적인 활용방법과, 부모 ㅡ 자식 관계 등등 선택자에 관한 여러가지를 알아보도록 하겠다.

 

 

1. 선택자 기본

 

 

CSS 선택자를 활용하는 방법은 아래 코드와 같다.

 

p {
    background-color: red;
}

 

꾸밀 대상이 되는 HTML 요소만 입력해주고, 브라켓 사이에 속성과 값을 넣어주면 된다. 이것이 아주 가장 기본적인 CSS 코드 작성법이다. 저 선택자에 어떤 것을 입력하느냐에 따라 HTML 태그를 더욱 다양하게 선택하여 꾸밀 수 있다.

 

 

2. 클래스와 아이디

 

HTML이나 CSS 이외에 객체 지향의 언어를 공부해본 적이 있다면, 클래스에 대해서는 익히 들었을 것이다. 흔히 프로그래밍에서 말하는 클래스는, 변수와 메소드를 가지는 하나의 틀로써, 재사용성이 높아 효율적인 코딩에 도움을 주는 개념이다. CSS의 클래스도 이와 비슷하나 조금 다르다. 

 

CSS의 클래스는, 자주 사용되는 스타일을 별도로 지정해놓은 뒤 여러 HTML 태그에 적용할 수 있다. 클래스를 한 개 지정하면, 수십개의 HTML 태그마다 속성과 값을 지정해주지 않아도 일관된 스타일을 적용할 수 있다. 클래스의 사용법은 아래와 같다.

 

.title {
    font-weight: 40;
    color: red;
    background-color: blue;
}

 

CSS에서 클래스를 작성할 때는 선택자의 앞에 '.'을 반드시 붙여야 한다. 그리고 그 뒤에는 HTML 태그의 이름이 아닌, 클래스 이름을 작성한다. 위와 같이 작성한 스타일은 HTML 문서에서 아래와 같이 사용할 수 있다.

 

<header class = "title">
    ...
</header>

 

요소 이름 뒤에 class를 적어준 뒤 그 뒤에 클래스 이름을 작성한다. 위와 같이 작성하면 클래스를 손쉽게 적용할 수 있다.

 

아이디의 경우, 페이지 내에서 특정 위치나 태그를 지정하는 것이기 때문에 클래스와 달리 HTML 문서 내에서 여러 번 사용할 수 없다. 단 한 번만 사용이 가능하다. CSS 코드에서 id를 작성하기 위해서는 아래와 같이 작성하면 된다.

 

#point {
    font-style: italic;
}

 

선택자의 앞에 '#'을 붙이고, 그 뒤에 id의 이름이 붙는다. HTML 문서 내에서는 아래와 같이 작성할 수 있다.

 

<h1 id = "point">
    제 목
</h1>

 

3. 자식, 자손, 형제 선택자

 

HTML 문서의 구조를 보면 하나의 태그 아래 여러 태그가 중첩되어있는 것을 자주 보았을 것이다. 이렇게 중첩된 태그는 그 관계에 따라 부모, 자식, 자손, 형제 관계로 구분할 수 있다. 아래 코드를 보자.

 

<div>
    <h1>제목</h1>
    <p> 
       내용
    </p>
    <ol>
    	<li>
            <a href = "#">리스트1</a>
        </li>
    	<li class = "point">
            <a href = "#">리스트2</a>
        </li>
    	<li>
            <a href = "#">리스트3</a>
        </li>
            ....
    </ol>
</div>

 

위 코드를 통해 부모 - 자식, 부모 - 자손, 형제 관계에 대해 서술해보겠다. 먼저, 부모와 자식 관계는 <div>태그와 <h1>, <ol>과 <li> 처럼 자신의 태그가 낳은 하위 태그들을 일컫는 말이다. 쉽게 말하면 자신의 태그 아래에 하나의 인덴테이션 간격으로 벌어져 있는 하위 태그가 바로 자식 태그라는 것이다. <div> 태그와 <h1> 태그를 예로 들면, <div> 태그는 부모, <h1>은 자식, 마찬가지로 <p>는 <div> 태그의 자식요소이다. <li>요소들은 <ol>태그의 하위에 위치하므로, 서로 부모 자식 관계이다. <ol>은 <li>의 부모태그이며, <li>는 <ol>의 자식 태그이다.

 

그렇다면 <ol> 아래에 있는 <li> 태그는 <div>의 자식 관계인가? 그렇지 않다. <li> 태그는 <div> 태그의 자손 관계에 있다. 이는 <div> 태그가 낳은 것이 아닌, <ol> 태그가 낳았기 때문이다. 마찬가지로, <li> 태그의 자식 요소인 <a>는 <ol>의 자손 태그인것이다.

 

<ol> 태그 아래에 있는 세 개의 <li>들은 서로 같은 인덴테이션을 가지고 있다. 즉, 동위관계에 있다. 이를 바로 '형제관계'라고 한다. <div> 태그 아래에 있는 <h1>과 <p> 그리고 <ol> 태그들은 모두 형제 관계라고 할 수 있다. 

 

CSS 선택자로는 어떻게 표현할까? 우선 아래 코드는 부모-자식 관계를 나타내는 선택자이다.

 

div > h1 {
    font-weight: 1500;
    font-style: italic;
}

 

<div> 태그와 <h1> 태그 사이에 꺽쇄(>)를 삽입하여 부모 자식 관계임을 나타낸다. element > element { property : value; } 와 같은 형식이다. 

 

아래는 부모-자손 관계를 나타내는 선택자이다.

 

div li {
    background-color: brown;
}

 

<div> 태그의 자손관계에 있는 <li>를 표기할 때는 요소 사이에 공백을 넣어준다. element element { property: value; }와 같은 형식이다.

 

형제 관계를 나타내는 선택자를 살펴보자. 형제 관계 선택자는 두 가지가 있다. 아래 코드는 두 가지를 모두 나타낸 것이다.

 

.point ~ li {
    color: yellow;
}

.point + li {
    color: gray;
}

 

형제 관계를 나타낼 때에는 element ~ element { property: value; }나, element + element { property: value; } 로 작성하면 된다. 위 코드의 선택자를 해석하자면, 먼저 ~ 로 쓰인 코드는, 'HTML 문서에서 point 클래스 이후에 나타나는 li 요소들을 모두 선택해라'라는 의미가 된다. 그리고 +로 쓰인 코드는, 'HTML 문서에서 point 클래스 바로 뒤에 등장하는 li 요소만 선택해라'이다.

 

 

4. 의사 클래스

 

 

의사 클래스는, 영어로 Structural Pseudo-classes로, 이를 직역하면 구조적 의사 클래스이다. 이것들은 엄연한 클래스이며, 이 선택자들의 특징은 어떤 상태나 조건이 만족할 경우 사용할 수 있는 클래스란 의미이다. 상당히 많은 클래스들이 존재하나, 본 포스팅에서는 아주 일부만 다뤄보도록 하겠다.

 

4-1. first-child

 

first-child는 선택자의 바로 뒤에 작성하여 사용할 수 있다. 이 클래스의 의미는 여러 개의 element 중 첫 번째로 오는 자식 요소를 선택한다는 의미이다.  위에서 작성했던 HTML 코드를 다시 가져오자.

 

<div>
    <h1>제목</h1>
    <p> 
       내용
    </p>
    <ol>
    	<li>
            <a href = "#">리스트1</a>
        </li>
    	<li class = "point">
            <a href = "#">리스트2</a>
        </li>
    	<li>
            <a href = "#">리스트3</a>
        </li>
            ....
    </ol>
</div>

 

여기서 <ol> 태그의 자식요소인 <li> 태그들 중 첫 번째 <li>만 선택하고 싶을 때 first-child를 활용할 수 있다. 아래 코드를 보자.

 

li:first-child {
    color: red;
}

 

위와 같이 적용할 경우, 첫번째 <li> 태그의 색깔만 red로 바뀌는 것을 확인할 수 있다.

 

4-2. last-child

 

last-child는 first-child와 반대로 여러 element 중 마지막 자식 요소를 선택하는 것이다. 위 HTML 코드를 동일하게 사용하여 가장 마지막 <li> 요소를 사용하고 싶다면 아래와 같이 작성하면 된다.

 

li:last-child {
    color: gray;
}

 

위와 같이 작성하면 가장 마지막에 오는 <li> 요소에만 색깔이 gray로 바뀐다.

 

4-3. nth-child(n)

 

nth-child(n)은 여러 element 중 특정 위치에 있는 요소나, 특정 범위에 있는 요소를 선택할 수 있다. 괄호 안에 오는 n값을  통해 그것을 설정할 수 있는데, 단일 정수가 올 경우 형제 관계에 있는 element 중 n번째의 요소를, 그리고 n을 활용한 다른 식을 넣어 더욱 다양하게 element를 선택할 수 있다. 아래 코드를 보자.

 

li:nth-child(3) {
	color: red;
}

 

위 코드의 경우 세 번째에 오는 <li> 요소만 선택하게 된다. 단일 요소를 선택하고 싶을 땐 위와 같이 작성하면 된다. 하지만 만약에 3번째 요소부터 끝까지 선택하고 싶다면? 

 

li:nth-child(n+3) {
    color: red;
}

 

위와 같이 작성하면 세 번째 <li> 요소부터 끝까지 color가 red로 설정된다. 여기서 nth-child의 파라미터로 들어가는 것 같은 n+3에서 n의 역할은, 0부터 t(형제 관계에 있는 element 요소들의 전체 개수)를 만들어주는 n까지의 숫자가 자동으로 대입된다. 예를 들어서 형제 관계에 있는 <li> 요소가 총 7개라고 가정하자. 위와 같은 선택자를 활용하였을 때, n+3의 n은 0부터 4까지 순서대로 대입되는 것이다.ㅡ여기서 n이 5가 되면 전체 <li> 요소의 개수인 7을 초과해버린다ㅡ

 

그럼 반대로 1번 요소에서 n번까지 선택하고 싶다면 아래와 같이 작성하면 된다.

 

li:nth-child(-n+3) {
    color: red;
}

 

이번에는 n에 음수부호를 붙였다. 이렇게 될 경우, n은 0부터 -n+3이 0이 되는 값까지의 숫자만큼 대입된다. 위 코드를 에시로 들면 n은 0에서 2까지만 대입이 되는 것이다.

 

그렇다면 n번째에서 k번째까지 선택하고 싶을 경우엔 어떻게 할까? 이 같은 경우에는 조금 까다롭긴 하지만 그리 어렵지 않다. 아래 코드는 7개의 <li> 요소 중 2번째에서 6번째 <li> 요소를 선택하는 코드이다.

 

li:nth-child(n+2):nth-child(-n+6) {
    color: red;
}

 

nth-child(n):nth-child(n) 으로 작성되는데, 좌측에 오는 nth-child에는 시작 인덱스를, 우측에 오는 nth-child는 종료 인덱스를 넣어주면 된다. 이 때, 단순 정수값(2나 6)을 넣으면 적용이 되지 않는다. 반드시 위에서 기술했던 형태로 적어야 한다. 

 

 

오늘은 CSS 선택자에 대해 알아보았다. 선택자에도 다양한 종류가 있으며 이를 잘 활용하면 HTML 문서를 꾸밀 때 굉장히 많은 도움이 될 것 같다. 선택자를 능숙하게 사용할 줄 알아야 제대로 디자인 할 수 있을 것이라 생각한다. 다음번에도 재미있는 공부거리를 들고 찾아오겠다.

 

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.