[ JavaScript ] CSS (Cascading Style Sheets), 선택자

람연 2021. 8. 1. 16:12

웹 페이지는 HTML, CSS, JS를 통해 구성되어있다. 그 중 CSS에 대해 정리한다.

CSS

CSS (Cascading Style Sheets)는 HTML을 어떻게 표현할 것인지에 대한 방법을 기술하는 언어이다. 특정 엘리먼트의 색을 바꾸고, 글씨 크기를 조절하는 등 화면에 실제 어떻게 렌더링되어 표현할 것인지를 정의하는 역할을 한다. 이러한 CSS는 많은 특징을 갖지만 그 중에서도 가장 중요한 두 가지의 특징이 있다.

계단식 상속
마지막에 정의된 CSS가 실제 랜더링 시 적용

아래는 CSS의 특징에 대해 구현한 예제 코드이다.

<html>
    <head>
        <title>My web title</title>
        <meta name="Author" content="람연">	
        <style>
        div {
            font-size:50px;
        }
        </style>
    </head>
    <body>
        <div>
            <p>CSS 상속</p>
        </div>
        <div>
            <p style="font-size:20px;">Inline style은 가장 마지막에 적용된다</p>
        </div>
    </body>
</html>

위 코드에서 CSS를 통해 div엘리먼트 font-size를 설정했다. 그런데 실제 화면에 랜더링 된 결과는 div엘리먼트의 자식 p엘리먼트의 font-size도 설정되었다. 이러한 현상이 바로 CSS가 상속되었기 때문에 발생한 것이다.

HTML은 CSS 상속을 개별적인 CSS와 같이 사용하기 위해, 랜더링 시 마지막으로 정의된 CSS가 기존의 값을 덮어쓴다. 즉, 두 번째 p엘리먼트의 font-size의 값이 최초 50px으로 설정되었다가 20px으로 덮어 씌워진것이다.

이와 같은 CSS는 사용하는 방식이 크게 세 가지로 나뉘며 상황에 맞게 사용해야한다.

Inline Style

HTML작성 시, 엘리먼트에 style을 직접 정의하는 방법이다. style을 적용할 모든 엘리먼트에 정의해줘야 하기 때문에 비효율적이며, 웹 속도 저하의 원인이 될 수 있다. 그렇기 때문에 주로 특정 엘리먼트만 style을 적용하고 싶을 때 사용한다.

<html>
<head>
    <title>CSS title</title>
    <meta name="Author" content="람연">
</head>
<body>
    <h1 style="color: #FC2428;">HTML 제목</h1>
    <h2 style="color: #0055FF;">Inline style</h2>
    <h2 style="color: #0055FF;">Inline style</h2>
    <h2 style="color: #0055FF;">Inline style</h2>
</body>
</html>

위 코드에서 엘리먼트 각각에 color CSS를 정의했다. 만일 h2엘리먼트의 color속성을 파란색으로 바꿔야 한다면, 총 세 번의 수정을 해야한다. h2엘리먼트가 100개가 있었다면 100번의 수정이 필요하다. 이는 유지보수 비용이 증가하며 웹 속도 저하의 원인이 될 수 있다. 따라서, 이러한 경우 Inline style방식은 적절하지 않다.

Internal Style Sheet

Inline style방식에서 속도와 유지보수 비용을 개선한 방식으로, HTML head영역에 style정보를 정의한다. 이때 적절한 CSS선택자를 통해 적용할 엘리먼트에 접근하게된다. 하지만 HTML별로 CSS를 관리해야하기 때문에 Inline style과 마찬가지로 단점이 존재한다.

<html>
<head>
    <title>CSS title</title>
    <meta name="Author" content="람연">
    <style>
    h1 { color: #FC2428; }
    h2 { color: #0055FF; }
    </style>
</head>
<body>
    <h1>HTML 제목</h1>
    <h2>Internal style</h2>
    <h2>Internal style</h2>
    <h2>Internal style</h2>
</body>
</html>

위 코드에서 h1, h2엘리먼트의 color속성을 설정하는 CSS를 정의했다. 만일 h2엘리먼트의 color속성을 파란색으로 바꿔야한다면, head영역에 정의된 style정보만 수정하면된다. 따라서, HTML별로 CSS관리가 되어야하는 경우에 적합하다. 하지만 웹 사이트의 모든 웹 페이지 h1엘리먼트의 CSS를 수정해야한다면 HTML별로 각각 수정해야한다. 따라서 넓은 범위로 보면 Inline style과 마찬가지의 문제점이 존재한다.

External Style Sheet

Internal style방식을 개선한 방식으로, CSS만을 관리하는 .css파일을 생성해 여러 HTML에서 참조하는 방식이다. Internal style방식과 마찬가지로 id, class, 엘리먼트 등을 이용해 적절한 CSS선택자를 통해 CSS를 적용할 엘리먼트에 접근한다.

h1 { color: #FC2428; }
h2 { color: #0055FF; }

<html>
<head>
    <title>CSS title</title>
    <meta name="Author" content="람연">
    <link rel="stylesheet" type="text/css" href="External style css.css">
</head>
<body>
    <h1>HTML 제목</h1>
    <h2>External style</h2>
    <h2>External style</h2>
    <h2>External style</h2>
</body>
</html>

위 코드를 보면 HTML문서 안쪽에 CSS를 정의한 부분이 없다. 외부에 작성된 .css파일을 link엘리먼트로 참조해 CSS를 적용한 것이다. 이제 웹 사이트의 모든 웹 페이지 h1엘리먼트의 CSS도 한방에 바꿀 수 있게 되었다. 따라서, HTML들이 공통으로 가져야하는 CSS를 관리해야하는 경우 적합하다. 하지만, 특정 웹 페이지만 h1엘리먼트의 CSS를 바꿔야 한다면..? 이런 경우 .css파일에 규칙을 계속 추가하는것 보다 Inline style이 효율적이다. 즉, 세 가지의 방식의 장.단점을 알고 상황에 맞게 적절하게 사용해야한다.

선택자

선택자(Selector)는 DOM의 특정 엘리먼트에 접근할 수 있게해준다. CSS를 적용할 때 선택자를 사용해 적절한 엘리먼트에 접근하여 CSS를 적용하는것이다. 이러한 CSS선택자는 여러가지 방법으로 사용할 수 있는데 크게 다섯 가지의 방식을 정리한다. 이 방식들을 적절하게 섞어 사용하거나, CSS선택자를 구성할 수 있는 여러 방법이 있으니 참고해 사용하면 된다. 아래 CSS선택자에 대해 정리된 공식 문서를 첨부하니 참고하면 많은 도움이 된다.

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors

CSS 선택자 - Web 개발 학습하기 | MDN

CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합

developer.mozilla.org

id를 통한 탐색

id는 HTML을 기준으로 단 하나만 존재한다는것을 의미한다. 따라서 접근하고자 하는 엘리먼트에 id속성을 할당하고 CSS를 적용할 수 있다. 사용방법은 아래와 같다.

<html>
<head>
    <title>CSS title</title>
    <meta name="Author" content="람연">
    <style>
    #unique { color: #FC2428; }
    </style>
</head>
<body>
    <h1 id="unique">HTML 제목</h1>
    <h2 class="nomal">Internal style</h2>
    <h2 class="nomal">Internal style</h2>
    <h2 class="nomal">Internal style</h2>
</body>
</html>

class를 통한 탐색

class는 HTML을 기준으로 하나 이상이 존재할 수 있다. 따라서 공통적으로 적용되어야하는 엘리먼트들에 class속성을 할당하고 CSS를 적용할 수 있다. 사용방법은 아래와 같다.

<html>
<head>
    <title>CSS title</title>
    <meta name="Author" content="람연">
    <style>
    .nomal { color: #0055FF; }
    </style>
</head>
<body>
    <h1 id="unique">HTML 제목</h1>
    <h2 class="nomal">Internal style</h2>
    <h2 class="nomal">Internal style</h2>
    <h2 class="nomal">Internal style</h2>
</body>
</html>

엘리먼트를 통한 탐색

엘리먼트 타입을 기준으로 선택하는 방식이다. 사용방법은 아래와 같다.

<html>
<head>
    <title>CSS title</title>
    <meta name="Author" content="람연">
    <style>
    h1 { color: #FC2428; }
    h2 { color: #0055FF; }
    </style>
</head>
<body>
    <h1>HTML 제목</h1>
    <h2>Internal style</h2>
    <h2>Internal style</h2>
    <h2>Internal style</h2>
</body>
</html>

부모 자식 관계 탐색

DOM기준 엘리먼트의 부모 자식 관계를 통해 선택할 수 있다. '>' 문구를 통해 class라는것을 명시함으로 사용할 수 있다. 또한 선택자끼리 섞어 더 정교한 선택자를 만들어 낼 수 있다.

<html>
<head>
    <title>CSS title</title>
    <meta name="Author" content="람연">
    <style>
    div#div1 > h1#h1 { color: #FC2428; }
    div#div2 > h2.h3 { color: #0055FF; }
    </style>
</head>
<body>
    <div id="div1">
        <h1 id="h1">HTML 제목</h1>
        <h1 id="h2">HTML 제목</h1>
    </div>
    <div id="div2">
        <h2>Internal style</h2>
        <h2 class="h3">Internal style</h2>
        <h2 class="h3">Internal style</h2>
    </div>
</body>
</html>

하위 엘리먼트 전체 탐색

DOM기준 엘리먼트의 부모 자식 관계를 통해 선택할 수 있다. ' ' 문구를 통해 class라는것을 명시함으로 사용할 수 있다.

<html>
<head>
    <title>CSS title</title>
    <meta name="Author" content="람연">
    <style>
    body div { color: #FC2428; }
    </style>
</head>
<body>
    <div id="div1">
        <h1 id="h1">HTML 제목</h1>
        <h1 id="h2">HTML 제목</h1>
    </div>
    <div id="div2">
        <h2>Internal style</h2>
        <h2 class="h3">Internal style</h2>
        <h2 class="h3">Internal style</h2>
    </div>
</body>
</html>

'JS' 카테고리의 다른 글

[ JavaScript ] Promise (0)	2021.08.05
[ JavaScript ] CRP (Critical Rendering Path) (0)	2021.08.05
[ JavaScript ] 하이퍼텍스트, HTML (0)	2021.07.18
[ JavaScript ] BOM, window , DOM (0)	2021.06.18
[ JavaScript ] 웹 동작방식 (0)	2021.06.07

현재글[ JavaScript ] CSS (Cascading Style Sheets), 선택자

상상코딩