CSS 쉽게 배우기 | CSS 선택자(Selector)

CSS로 HTML요소 선택하는 방법

 

안녕하세요

이번 편에서는 CSS 선택자 (selector)를 알아볼게요

CSS 선택자는 HTML 요소를 선택하는 방법입니다

HTML 요소를 선택하는 방법인

• 요소 이름으로 선택하기
• 요소의 클래스/아이디로 선택하기
• 요소와 요소의 관계로 선택하기

들을 알아볼게요

 

CSS 선택자가 중요한 이유는, 선택자를 사용해서 내가 원하는 요소만 스타일링할 수 있기 때문입니다

선택자를 알아보기 전에 CSS를 작성하는 것 먼저 알아볼게요

CSS 작성하는 방법

CSS를 작성하는 방법은 아주 간단합니다

먼저 내가 스타일링하고 싶은 요소를 쓰고 대괄호{ }를 열어주면 됩니다

예를 들어서

요소를 스타일 하고 싶으면

p {}

이렇게 p를 쓰고 대괄호를 열어줍니다

이렇게 하면 대괄호 안에 지정한 스타일들이

요소에 적용됩니다

 

이런 방식으로 HTML의 거의 모든 요소들을 스타일링할 수 있습니다

 

그럼 대괄호 안에는 뭐가 들어갈까요?

여기에는 속성과 값이 들어갑니다

p 요소의 크기를 키우려면

p {font-size: 30px;}

이렇게 대괄호 안에서 font-size (폰트 사이즈)의 속성에 30px 만큼의 값을 주면 p 요소를 30px 만큼 키우게 됩니다

**스타일 끝에 ; (따옴표)는 꼭 있어야 합니다. 이게 없으면 에러가 나서 스타일이 적용 안될 수도 있습니다 **

그럼 이제 본격적으로 선택자를 알아볼까요?

 

 

CSS 선택자 사용하는 방법 - 요소 이름으로 선택하기

바로 위에서 벌써 CSS 선택자를 사용했습니다

요소 이름 선택자는 말 그대로 HTML의 요소 이름을 사용해서 선택하는 방법입니다

위에서 본 것처럼 요소를 선택하려면 그냥 p를 사용하면 됩니다
<h1>을 선택하려면 h1, <span>을 선택하려면 span을

 

쉽죠?

그런데 이 방법에는 한 가지 단점이 있습니다

바로 선택된 요소 모두에 스타일이 적용된다는 것입니다

 

 

CSS 선택자 사용하는 방법 - 클래스/아이디로 선택하기

요소 이름 선택 방법의 단점을 보완해주는 선택 방법입니다

이 방법은 HTML 요소의 class, id 속성을 사용해서 선택할 수 있습니다

 

**중요

id 속성은 HTML 문 서다 딱 한 개만 존재할 수 있습니다

class 속성은 몇 개를 사용하든 상관없습니다

✔
<div id="div1"></div>
<div id="div2"></div>

❌
<div id="div1"></div>
<div id="div1"></div>

id 속성은 유일한 속성으로 HTML 문서에서 중복 사용할 수 없습니다

위 예시에서 처럼 각 HTML 요소가 다른 아이디를 가질 수는 있지만 다른 요소들이 같은 아이디를 가질수 없습니다

같은 가족이라도 서로 신분증이 다른 거같이 HTML 요소들의 id도 서로 같을 수 없습니다

반면에 class는 id와 반대로 여러 요소들이 같은 class를 가질 수 있습니다

여러 사람들이 같은 성씨를 가지고 있는 것처럼 말이죠

**

 

CSS 선택자로 class를 선택할 때는 마침표. 를 사용합니다

<div class="box1"></div>

.box1 {...}

 

CSS 선택자로 id를 선택할 때는 샾#을 사용합니다

<div id="box1"></div>

#box1 {...}

 

 

그럼 모든 요소에 id 또는 class를 주면 문제 해결이네?

네니요.

 

class나 id를 사용하면 훨씬 편하게 스타일링할 수 있지만 모든 요소에 사용할 class / id 이름 생각해내는 것도 만만치 않은 일입니다

그렇게 좋은 방법도 아니고요

 

 

CSS 선택자 사용하는 방법 - 요소의 관계로 선택하기

CSS에서 제일 흔하게 사용되는 선택자는 class와 id이지만

모든 요소에 부여할 수 없기 때문에 요소끼리의 관계를 같이 사용하면 더 효율적으로 CSS를 작성할 수 있습니다

요소의 관계는 기본적으로 부모, 형제, 그리고 자녀 가 있습니다

<div class="parent">
    <p class="child">자녀</p>
    <p class="child">자녀2</p>
</div>

여기서 div와 p의 관계는 부모-자녀 관계이고

p 들은 서로 형제 관계입니다

 

<div class="grand-parent">
    <div class="parent">
        <p class="child">자녀/손주</p>
    </div>
</div>

여기서 첫 번째 div와 p의 관계는 조부모(div) - 손자(p)입니다

이제 CSS로 요소의 관계를 사용해서 요소를 선택하는 방법을 알아볼게요

 

 

 

**

중요:

CSS에서 선택자를 아래로 내려갑니다

다른 말로 부모에서 자녀를 선택할 수는 있지만 자녀에서 부모를 선택할수 없습니다

**

 

 

CSS 선택자 표

HTML	CSS	시각화	설명
<a>   <b id="b">     <a class="a"></a>     <b class="b"></b>     <c class="c"></c>   </b>   <c>     <a class="a"></a>     <b class="b"></b>     <c class="c"></c>   </c> </a>	a { }		a 요소를 선택합니다 HTML 문서에 있는 모든 a 요소들이 선택됩니다
<a>   <b id="b">     <a class="a"></a>     <b class="b"></b>     <c class="c"></c>   </b>   <c>     <a class="a"></a>     <b class="b"></b>     <c class="c"></c>   </c> </a>	a b { }		a 요소 안에 있는 모든 b 요소들을 선택합니다
<a id="a"></a> <b id="b"></b> <c id="c"></c>	#b { }		b라는 아이디를 가지고 있는 요소만 선택됩니다
<a class="a"></a> <b class="b"></b> <c class="c"></c>	. b { }		b라는 클래스를 가지고 있는 모든 요소들을 선택합니다
<a>   <b id="b">     <a class="a"></a>     <b class="b"></b>     <c class="c"></c>   </b>   <c>     <a class="a"></a>     <b class="b"></b>     <c class="c"></c>   </c> </a>	a > b { }		a 요소 안에 있는 첫 번째 b 자녀 요소를 선택합니다
<a /> <b /> <b /> <b />	a + b { }		a 요소의 바로 옆 b 형제 요소를 선택합니다
<a /> <b /> <c /> <b /> <b />	a ~ b { }		a 요소의 모든 b 형제 요소들을 선택합니다

 

 

 

이렇게 CSS 선택자의 기본을 알아봤습니다

CSS 선택자는 이번편에서 다룬것보다 훨씬 더 많이 있습니다

다른 선택자들은 끝무렵에 프로젝트 2개를 같이 하면서 알려드릴게요

 

 

다음편에서는 어떤 사이즈 단위들이 있는지 알아볼게요

 

 

오늘도 수고하셨습니다

 

 

끝!