Ch 05. CSS 선택자

CSS

Ch 05. CSS 선택자

Sila 2022. 4. 14. 22:02

CSS로 스타일링을 진행할 때, 일괄적으로 모든 요소들을 동일하게 스타일링하는 경우보다

우리가 원하는 특정 요소만 선택해서 그 요소만을 스타일링 하고 싶은 경우가 많을 것이다.

이 때, css에게 어떤 요소를 스타일링하고 싶은지 구체적으로 특정해주고 싶을 때 사용하는 것이

바로 선택자(selector)이다.

이 장에서는 class 선택자, ID 선택자, 유사 class 등 특정 요소를 선택해 스타일링하는 방법을 알아볼 것이다.

5.1 Set up

다음과 같이 html, css를 생성해주자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSS selector</h1>

    <p>CSS 선택자는 개별 html 요소들을 <em>선택</em>할 수 있게 만들어준다.</p>

    <p>이 선택자는 웹 페이지의 어떤 box도 선택할 수 있게 해준다는 점에 매우 유용하다.</p>

    <p>시간이 되면 <a href='https://internetingishard.com'>Interneting Is Hard</a> 
        페이지에 방문해보자.
    </p>

    <div>Button One</div>
</body>
</html>

아직 style.css에는 내용물이 없고 우선 만들어두기만 하면 된다.

5.2 Class Selectors

html element의 class와 연동된다고 보면 된다.

html 요소 중 동일한 class value를 가진 요소들만을 선택해 스타일링해준다.

첫 문단에 다음과 같이 class를 추가하고, css에서 동일한 class를 스타일링 해보자.

<p class='synopsis'>CSS 선택자는 개별 html 요소들을 <em>선택</em>할 수 있게 만들어준다.</p>

/*  css stylesheet  */

.synopsis {
   color: #7E8184;
   font-style: italic;
}

이걸 브라우저에서 불러와보면 다음과 같이 렌더링되는 것을 확인할 수 있다.

class 이름 전에 (.)을 붙이면 해당 이름을 가진 class를 지정한다는 의미이다.

이는 p element에만 적용되는 것이 아니라 어떤 html 요소에도 적용된다.

이를 이용해 이번엔 button one을 담은 div를 스타일링 해보자.

html, css를 각각 다음처럼 수정, 추가해주자.

<div class='button'>Button One</div>

/*  css stylesheet  */

.button {
   color: #FFF;
   background: #5995DA;
   font-weight: bold;
   padding: 20px;
   text-align: center;
   border: 2px solid #5D6063;
   border-radius: 5px;
   
   width: 200px;
   margin: 20px auto;
}

5.3 Container Divs

복수의 element들을 하나로 묶어주는 것을 통해 웹 페이지의 레이아웃을 좀 더 효율적으로 할 수 있다.

너무 많은 수의 element들을 한 번만 배치하는 것보다 우선 몇 가지의 파트로 나눠 큰 틀을 잡고,

그 안에서 세세한 조정을 거치도록 도와주는 것이 div의 역할 중 하나이다.

div로 html element들을 묶어보자. (보통 wrap한다고 표현)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class='page'>  <!-- 이 div 추가  -->
        <h1>CSS selector</h1>

        <p class="synopsis">CSS 선택자는 개별 html 요소들을 <em>선택</em>할 수 있게 만들어준다.</p>

        <p>이 선택자는 웹 페이지의 어떤 box도 선택할 수 있게 해준다는 점에 매우 유용하다.</p>

        <p>시간이 되면 <a href='https://internetingishard.com'>Interneting Is Hard</a> 
            페이지에 방문해보자.
        </p>

        <div class="button">Button One</div>
    </div>  <!-- 여기까지 -->
</body>
</html>

css도 다음처럼 추가한다.

.page {
   width: 600px;
   margin: 0 auto;
}

이제 브라우저의 윈도우의 크기에 상관없이 웹 페이지는 항상 600px 넓이를 가지고 가용한 공간의 중앙에 위치한다.

이 작업은 방금 button을 중앙에 배치한 것과 완전히 동일한 작업인데, div 하나로 다른 element들을 모두 묶음으로써

한 번에 모든 element를 중앙에 배치했다.

5.4 class style 재사용

이렇게 class를 지정해 스타일링한 css는 html element에 동일한 class를 줌으로써 계속해서 재활용할 수 있다.

버튼을 하나 더 만들고 동일한 class를 줘보자.

    <!--  전략  -->
        <div class='button'> Button Two </button>
    </div>
</body>
</html>

다시 불러오면 완전히 동일한 스타일링을 가진 버튼이 하나 더 생긴 것을 볼 수 있다.

5.5 class style 수정

여기서 두 번째 버튼을 좀 수정해주고 싶다고 해보자. 이 때는 .button css 아래에 다른 스타일링을 줘서

위쪽의 스타일링을 덮어씌울 수 있다.

Button Two에 class를 하나 더 주고 css를 추가하자.

<button class='button second'> Button Two </button>

/*  css stylesheet  */

.second {
     font-style:italic;
     background: #EEB75A;
 }

CSS에 코드를 작성하는 순서가 중요하다. 컴퓨터는 코드를 위에서 아래로 읽고,

나중에 읽은 코드와 먼저 읽은 코드가 충돌한다면 특별한 제한 사항이 없는 한 나중에 읽은 코드로

먼저 읽은 코드를 덮어씌워 버린다.

여기서 Button Two의 배경색을 바꾸려면 .second에 대한 코드를 .button에 대한 코드 아래에 배치해야 한다.

5.6 자손 선택자

첫 문단 synopsis로 돌아가보자. <em> element안의 글자는 더 이상 다른 글자와 구분이 되지 않는다.

.synopsis에 대한 코드가 모든 글자를 itailc으로 바꿔버렸기 때문이다.

이를 다시 다른 글자들과 구분하기 위해 선택자를 사용해 스타일링을 해보자.

<em>에 class를 줘서 구현할 수도 있지만 자손 선택자를 활용하면 조금 더 편하고 깔끔하게 코드를 짤 수 있다.

다음과 같이 CSS에 추가해보자.

/*  css stylesheet  */

.synopsis em {
    font-style: normal;
}

이렇게 사용하는 것이 자손 선택자인데, 한 element 안에 있는 모든 해당하는 element들을 스타일링 해준다.

예를 들어 .synopsis 안에 div가 하나 더 있고 그 안에 em에 있더라도 이 em까지 모두 스타일링이 적용된다.

이 점이 앞으로 배울 자식 선택자와는 다른 점이다.

5.7 자식 선택자

자손 선택자가 안에 포함한 모든 element를 선택한다면, 자식 선택자는 이보다 조금 더 조건이 타이트하다.

자식 선택자는 부모 element의 바로 하위에 있는 element에만 적용된다.

html을 다음과 같이 수정해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page">
        <h1>CSS selector</h1>

        <div> <h1> for the example of child selector </h1> </div> <!-- 이걸 추가 -->

        <p class="synopsis">CSS 선택자는 개별 html 요소들을 <em>선택</em>할 수 있게 만들어준다.</p>

        <p>이 선택자는 웹 페이지의 어떤 box도 선택할 수 있게 해준다는 점에 매우 유용하다.</p>

        <p>시간이 되면 <a href='https://internetingishard.com'>Interneting Is Hard</a> 
            페이지에 방문해보자.
        </p>

        <div class="button">Button One</div>
        <div class="button second">Button Two</div>
    </div>
</body>
</html>

이제 조금 전처럼 자손 선택자를 h1 element들에 대해 적용해보자.

/*  css stylesheet  */

.page h1 {
    font-size: 60px;
}

이렇게 놓고 h1 element들을 보면 둘 모두 60px로 렌더링되는 것을 확인할 수 있다.

이제 이 자손 선택자를 자식 선택자로 바꿔보자. (>) 하나만 넣어주면 된다.

 .page > h1 {
     font-size: 60px;
 }

이렇게 수정하고 다시 불러와보면 첫 번째 h1 element만이 60px로 나오는 것을 알 수 있다.

이는 두 번째 h1 element와 .page 사이에 <div>가 하나 막고 있기 때문이다.

.page 바로 하위에 있는 자식 element인 첫 번째 h1은 자식 선택자에 의해 선택되어 스타일링 되지만

사이에 <div> 하나를 낀 두 번째 <h1> element는 '자식'이 아닌 '자손' 이기 때문에

자식 선택자의 적용을 받지 않는다.

5.8 유사 선택자 (pseudo class)

HTML element에만 선택자를 붙일 수 있는 것이 아니다. 여기에 더해 사용자가 뭘 하는지에 따라

그 시점에만 스타일링을 따로 주는 것도 가능하다.

가장 쉬운 예시로 외부 링크로 연결되는 anchor element에서 사용자가 마우스를 올렸을 때만

색을 달라지게 하는 것이 있다.

그럴 때 사용하는 것이 바로 유사 선택자이다.

다음과 같이 CSS를 추가해보자.

a:link {
   color:blue;
   text-decoration:none;
}

a:visited {
   color: purple;
}

a:hover {
   color:aqua;
   text-decoration:none;
}

한 번도 링크에 방문한 적이 없다면 a element가 파란색을,

방문한 적이 있다면 보라색을, 마우스를 갖다대면 하늘색으로 변하는 것을 확인할 수 있을 것이다.

이런 유사 선택자를 2개 이상 중첩해 사용하는 것도 가능하다.

방문한 적이 있는 a element에 마우스를 갖다댈때 다른 색으로 지정하고 싶다면 다음과 같이

CSS를 추가하면 된다.

a:visited:hover{
   color: orange;
}

이는 텍스트뿐 아니라 어떤 html element에도 적용될 수 있다.

button들의 element 종류를 idv에서 a로 바꿔보자. 다음처럼 html을 수정하면 된다.

<a class="button" href="#">Button One</a>
<a class="button second" href="#">Button Two</a>

CSS에는 다음과 같이 추가한다.

.button:link,
.button:visited {
    color: #FFF;
    background: #5995DA;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    border: 2px solid #5D6063;
    border-radius: 5px;
    
    width: 200px;
    margin: 20px auto;
    /* 여기까진 같고 아래 두줄만 추가하면 된다 */
    display:block;
    text-decoration: none;
}

텍스트 뿐만 아니라 button class를 가진 element의 영역 전체를 바꿔줄 수도 있다.

다음 CSS를 추가해보자.

.button:link,
.button:visited:hover {
   color:#FFF;
   background: #76AEED;
}

여기까지 하고 불러오면 버튼 영역에 마우스를 갖다대면 버튼 배경색 전체가 바뀌는 것을 확인할 수 있을 것이다.

다른 유사 선택자중 하나로 nth-child가 있다.

이는 자식 선택자가 여러 개 있을 경우, 그 중 n번째 요소만을 골라 스타일링하는 선택자이다.

다음과 같이 html을 수정하자.

<body>
    <div class="page">
        <h1>CSS selector</h1>

        <div> <h1>for the example of child selector</h1></div> 

        <div class="pwrap">
            <p class="synopsis">CSS 선택자는 개별 html 요소들을 <em>선택</em>할 수 있게 만들어준다.</p>

            <p>이 선택자는 웹 페이지의 어떤 box도 선택할 수 있게 해준다는 점에 매우 유용하다.</p>

            <p>시간이 되면 <a href='https://internetingishard.com'>Interneting Is Hard</a> 
                페이지에 방문해보자.
            </p>
        </div>

        <a class="button" href="#">Button One</a>
        <a class="button second" href="#">Button Two</a>
    </div>
</body>

p element들을 감싸는 div 를 하나 만들고, class는 pwrap이라는 value를 주었다.

이제 CSS에서 두 번째 p element만 골라 글자 크기를 키워보자.

.pwrap > p:nth-child(2) {
    font-size: 30px;
}

5.9 id selector

class와 동일한 방식으로 사용하지만, class와 id의 다른 점은 id는 한 html 파일에 단 하나만 존재한다는 사실이다.

따라서 id를 지정해 스타일링하면 무조건 그 element 하나만을 스타일링할 수 있다.

단점이라면 class처럼 여러 개의 element를 한 번에 스타일링해주거나 재활용은 하지 못한다.

3번째 p element에 id='para3'라는 값을 주고 CSS를 다음과 같이 추가해보자.

#para3 {
    color:red;
    font-weight: bold;
}

id를 지정할때는 앞에 #을 붙여주면 된다.

다시 불러와보면 세 번째 문단 글자의 색과 굵기가 변했음을 확인할 수 있다.

5.9.1 priority

지금까지 본 것처럼 스타일링을 하는 방법은 여러가지가 있다.

그런데 복수의 방법으로 하나의 element를 스타일링할 경우, 그리고 스타일링의 내용들간의 충돌이 있을 경우,

어떤 스타일링의 내용을 우선시 할 것인지는 규칙이 있다.

우선 순위가 같을 경우 위에서 아래로 읽고 나중에 온 것이 먼저 온 것을 덮어쓰지만 우선 순위가 다를 경우,

먼저 온 것이 우선 순위가 높으면 먼저 온 것이 덮어씌워지지 않게 된다.

id selector는 class selector에 대해 우선순위를 가진다.

3번째 p element에 class='para3'를 주고 CSS에서 #para3 아래에 .para3에 대해 다음과 같이 추가해보자.

.para3 {
   color: blue;
}

만약 id 선택자와 class 선택자의 우선순위가 동일하다면 나중에 온 .para3에 의해 글자색이 파랗게 변해야 하지만

id selector의 우선 순위가 더 높아 글자 색은 그대로 red임을 알 수 있다.

5.9.2 문서 특정 위치로 이동

id선택자와 a의 href attribute를 사용하면 문서의 특정 위치로 사용자를 이동시켜주는 것도 가능하다.

다음과 같이 html을 수정해주자.

<a class="button" id="buttonOne" href="#buttonTwo">Button One</a>
<a class="button second" id='buttonTwo' href="#buttonOne">Button Two</a>

href에 id 선택자와 함께 아이디를 적어주고 클릭하면 해당하는 id를 가진 element로 바로 이동시켜줄 수 있다.

조금 더 차이를 눈에 띄게 보기 위해 css에 다음과 같이 추가하자.

#buttonOne {
    margin-bottom: 2000px;
}

이제 html을 불러와서 버튼을 클릭하면 버튼 서로가 서로의 위치로 보내주는 것을 확인할 수 있다.

'CSS' 카테고리의 다른 글

Ch 04. CSS Box Model (0)	2022.04.12
Ch 03. CSS (Cascading Style Sheets) (0)	2022.01.25
Ch 02. Links & Images (0)	2022.01.24
Ch 01. Introduction (0)	2022.01.16

현재글Ch 05. CSS 선택자

Torch for new way

docker, telethon, error, Ethereum, Go, Googling, 채굴, TypeScript, cryptozombie, oauth login, styled-components, remote-ssh, googlelogin, Design Pattern, solidity, ethersjs, hardhat, React, Blockchain, Abstract Factory,

Today :
Yesterday :

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Torch for new way