HTMLㆍCSS 기초 강좌/CSS

#1 CSS 개념, 스타일 선언 방식, 선택자, 캐스케이딩

jaiyah 2019. 1. 21. 08:47

CSS 개념

CSS(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML 과 XHTML 에 주로 쓰이며, XML에서도 사용할 수 있습니다.

다시 말해, HTML 문서를 스타일링 하는 언어( W3C 의 표준)로 HTML 문서에서 link 요소를 사용해 CSS 파일을 읽어들이면 HTML 문서의 구조를 CSS를 통해 스타일링 하게 됩니다.


 

HTML은 구조(모델)에 해당하고, CSS는 비주얼(표현)에 해당한다.

그리고 이러한 구조,비주얼은 분리되어야 합니다.

자바스립트까지 포함한다면 크게 구조,표현,제어가 분리되어 사용되어야 하는 것입니다.


CSS 를 사용해야 하는 이유

  1. 명확환 구조적 디자인과 표현적 디자인을 분리할 수 있습니다.
  2. 다양한 장치에서 접근이 좀 더 용이하게 할 수 있습니다.
  3. 웹 사이트의 많은 수정사항을 보다 빠르게 수정함에 있어서 용이하고(모든 페이지를 수정하는 것이 아니라 한개의 CSS 파일만 수정)
    물론 CSS 파일을 콘텐츠 성격에 나뉘어 작업하지만 다수의 페이지가 있더라도 공통된 스타일(디자인)이 있기 때문에 해당 CSS 파일만 수정하면 작업에 용이
  4. 또한 코드에 가독성, 성능 최적화, 그리고 사용자가 자신의 기호에 맞게 디자인을 커스텀하는데 좋습니다.
  5. 그리고 사이트를 운영하는 자에게는 유지보수 측면, 즉 관리의 용이성이 좋습니다.

프로젝트를 진행하다보면 유지 보수에 적합하지 못한 개발 환경에 직면하게 되는 경우는 꽤 비일비재합니다.
유지보수를 진행함에 네거티브한 상황에서 어쩔 수 없더라도 구축하는 단계에서는 반드시 구조(HTML), 표현(CSS), 제어(JS)를 분리해서 작성할 수 있도록 해야 합니다. 그리고 사실 테이블에 너비를 정의한 것은 CSS 에 표현을 한 것이 아니라 구조안에 비주얼(표현)을 했지만 실제적으로 구조에 해당하는 것입니다. 엄격하게 구분,정의할 수는 없지만 그러한 일부를 제외하고는 기본적으로 최소한 구조와 표현은 분리해야 된다라는 것은 선행되어야 할 전제 조건입니다.


Related Info

  1. Cascading Style Sheets home page(https://www.w3.org/Style/CSS/)
  2. CSS Current Work(https://www.w3.org/Style/CSS/current-work)
  3. CSS3 모듈화 과정(https://developer.mozilla.org/ko/docs/Web/CSS/CSS3)
  4. CSS 2.1 기술 표준 문서(https://www.w3.org/TR/CSS2/)
  5. CSS 스펙 사용여부 체크(https://caniuse.com/)


EXPLANATION OF COLORS & STATUS CODES

CSS 기술 문서에 대한 진행별 상태 코드

FPWD(First Public Working Draft)

첫번째 공식 초안 단계

WD(Working Draft)

초안

CR(Candidate Recommendation)

권고되는 표준 후보 스펙

PR(Proposed Recommendation)

표준에 제안된 상태

REC(Recommendation)

표준으로 채택된 상태

SPSD(Superseded Recommendation )

표준이 업데이트되면서 대체된 권고안(표준안)


스타일 문서 기본 작성법(Syntax of CSS)

CSS
h1 {
    color: blue;
    font-size: 16px;
}

위 CSS 코드와 같이 CSS 는 선택자, 선언구간의 시작, 끝(코드 블럭이라 불리는 중괄호) 그리고 속성, 값으로 구성되어 있는 구문이고, 속성, 값을 구분할 때는 :(콜론)을 사용하고 속성,값으로 이루어진 짝을 선언문이라 하며 선언문끼리 구분할 때는 ;(세미콜론)을 사용합니다.




CSS 스타일 선언 방식

CSS 를 사용해 HTML 문서를 스타일링하는 3가지 방법에 알아봅니다.

Internal Style

HTML
<html>
    <head>
        <style type="text/css">
            h1 {
                color: blue;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h1>Embed Style Sheet</h1>
    </body>
</html>

위와 같이 head 내부에 스타일시트를 작성하는 것을 내부 스타일이라고 합니다.
기본적으로 내부 스타일은 head 에서만 사용해야 하며, body 내부에서는 사용하지 말아야 합니다.

내부스타일은 대개 단발성 페이지의 CSS 분량이 적은 경우에 사용


Inline Style

HTML
<h1 style="color: blue; font-size: 16px;">
    Embed Style Sheet
</h1>

위와 같이 한 줄(라인)으로 요소 내부에 스타일 속성을 이용하여 CSS 코드를 작성하는 것을 인라인 스타일이라고 부릅니다.
속성,값이 동적으로 변경되어야 하는 경우에 사용


External Style

HTML
<html>
    <head>
        <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    <body>
        <h1>Embed Style Sheet</h1>
    </body>
</html>

가장 권장되고 일반적인 방법으로 CSS 파일을 별도로 관리하는 형태입니다.



맛보기 : CSS 속성 및 분류

CSS 에는 다음과 같은 속성이 있으며 레이아웃(배치)과 연관성이 많은 속성 순으로 선언하는 것이 좋습니다.

표시

display, visibility

넘침

overflow

흐름

float

플로팅 레이아웃(흐름)

float

포지셔닝 레이아웃(위치)

position

모던 레이아웃(위치)

Flexbox

크기

width & height

간격

margin & padding

배경

background

테두리

border

폰트

font

기타

list-style, cursor, line-height, text-indent, text-align 등...


CSS 작성시 속성 순서를 고려


CSS 에 속성을 선언하는데에는 암묵적·묵시적인 선언 순서가 있습니다.

다시 말해, 속성과 값을 선언하는데 정확한 순서는 없지만 일반적인 컨벤션이 있습니다.

컨벤션이라 함은 관례, 관습의 의미하는데 프로그래밍적으로는 암묵적·묵시적인 개발자 서로 간의 약속과 같은 것을 말합니다.

자바스크립트에 작성함에 있어서도 생성자 함수를 사용하는데 대문자로 사용한다거나 jQuery 작성함에 있어서도 코드의 가독성을 측면에서 코드 작성시 지킬 것을 권장하는 것들이 있습니다.

그리고 html 마크업을 함에 있어서도 부모와 자식,자손 간의 노드를 들여쓰기를 구분하는 것도 컨벤션의 일종입니다.

하지만 네이버는 마크업을 함에 있어서 본인 업무의 컨벤션이 있어서 들여쓰기를 하지 않습니다.

그곳 업무 영역만의 약속인 것입니다. 그리고 본인이 진행하는 프로젝트에서도 작업자들간에 협업을 위해 미팅 후에 컨벤션(Coding Guide)을 정해놓고 프로젝트를 시작하는 것이 좋습니다.

이런 식으로 사용되는 컨벤션은 각 언어마다 존재하며 이 관례·관습를 지켜주면 코드의 가독성은 물론이거니와 작업자 서로 간의 업무 효율 또한 향상시킬 수 있습니다.

가독성 측면에서 위의 속성들을 큰 흐림에서 작은 흐름으로 작성하실 권장하고 있습니다.

큰 흐름에는 여러가지가 있을 수 있지만 CSS 는 시각적인 표현에 해당하므로 가장 중요한 것이 보이게 하느냐 숨기느냐에 대한 것입니다.

그래서 선언해야될 속성중에 display가 있다면 처음에 display 속성을 먼저 정의하고 순차적으로 일반적으로 배치(레이아웃)에 필요한 속성 순으로 작성하게 됩니다.

그 다음 다자인의 세부적인 제어들을 위한 속성값(보통 레이아웃과 조금 거리가 먼 속성)들의 흐름으로 작성하는 것이 일반적입니다.

사실 위의 순서를 무조건 지키는 것은 아니고 약간의 순서가 바뀌어도 크게 상관은 없습니다.

다만 유지보수를 하는 작업자 입장은 물론 협업을 하는 작업자 간에도 위 속성들이 큰 틀 안에서 대략적으로 지켜진다면 빠르게 어느 곳에 어떤 CSS 속성값이 정의되어 있는지 예측할 수 있을 것입니다.

이러한 이유 때문에라도 속성의 순서를 지키게되면 코드의 가독성을 높일 수 있습니다.


Related Info

  1. NHN Coding Convention(http://nuli.navercorp.com/sharing/fe/coding)
  2. Web Standards Darum(http://darum.daum.net/convention/css/css_convention)



CSS Selector(선택자)

CSS 선택자는 문서의 요소(대상)을 선택하여 꾸밀 수 있도록 대상을 선택할 수 있는 선택자가 제공됩니다.

선택자가 없다면 스타일을 지정할 방법이 없으니 요소 하나하나마다 인라인 스타일과 같이 속성을 지정했어야 할 것입니다.

요소 전체, 혹은 특정한 그룹을 골라서 스타일을 지정할 수 있으므로 CSS 몇 줄만으로 많은 요소에 스타일을 지정할 수 있으며, CSS 뿐만 아니라 자바스크립트에서도 매우 유용하게 사용되기 때문에 충분한 학습이 필요합니다.


CSS 는 HTML 요소를 선택하는데 있어 다양한 선택자 옵션을 제공하는데 선택자에는 크게 세가지로 분류할 수 있습니다.

  • ID Selector : [#content, #footer] 구체성(0, 1, 0, 0)
  • Class Selector : [.aside, .section] 구체성(0, 0, 1, 0)
  • Type Selector : [h1, div, span, em] 구체성(0, 0, 0, 1)

ID Selector(아이디 선택자)는 해쉬, 샾인 우물 정자 모양을 사용합니다.

Class Selector(클래스 선택자)는 .(점)으로 구분하며 사용자가 정의한 이름 앞에 .(점)을 사용합니다.

Type Selector 는 요소(타입,태그) 선택자라고 불리고 요소 이름 그대로를 사용합니다.

css
#wrap { ... }
#wrap .header { ... }
.content div ul.noti li { ... }

위와 같이 크게 세 가지로 선택자를 분류하지만 그 밖에 다양한 선택자들이 존재합니다.
이 다양한 선택자들에 대해 알아보도록 하겠습니다.


그룹 선택자

여러 요소들을 ,(콤마)를 통해서 묶어주고 일괄적으로 스타일링 해줄 때 용이합니다.

HTML
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
a, img, p {border: none;}
h3 span, h4 span {position:absolute; left:200px;}

유니버셜(전체) 선택자

*(별표) 선택자는 전체 선택자라고 불리고 HTML 에 존재하는 모든 요소를 일괄적으로 스타일링을 주고자 할 때 사용할 수 있습니다.

HTML
* {margin:0; padding:0;}
html body {text-decoration:none;}
p.info {text-transform:capitalize;}

멀티클래스 선택자

멀티클래스는 의미대로 여러 개의 선택자가 붙어 있는 것을 말합니다.
멀티클래스를 사용시 주의할 점은 .(점)과 .(점) 사이가 공백이 있어선 안됩니다.

HTML
p.note.info {width:300px;}
.box.list {outline:1px solid #333;}
.noti-list { position:absolute;}

p 요소가 note 와 info 라는 클래스를 가진 경우에만 적용되는 것입니다.


자손(하위) 선택자

자손 선택자는 가계도를 생각해 보면 됩니다.

HTML
p strong {font-weight:normal;}
ul li a {text-decoration:none;}
h2 span {position:relative; left:-20px; z-index:2;}

p strong {font-weight:normal;} 이 코드는 p 내부에 있는 strong 요소를 찾아서 그 대상을 꾸며주세요란 뜻입니다.
자손(Descendant)이기 때문에 p, strong 사이에는 또 다른 요소가 얼마든지 있을 수 있습니다.


Related Info

  1. 반드시 기억해야 하는 CSS 선택자 30개


자식 선택자

자식 선택자(Child Selector)는 자손 선택자와는 다르게 > 기호를 사용합니다.

HTML

속성 선택자

속성 선택자는 각괄호(Square Bracket)을 사용하여 속성명을 사용하여 대상을 선택합니다.

HTML
/* <div id="anywayId"></div> */
div[id] { font-size:14px; color:#000; }

/* <p class="note"></p> */
p[class="note"] { position:absolute; left:100px; }
    
/* <img src="love.jpg" alt="love-you">
   |(파이프) 기호를 사용하면 -(대쉬)를 구분하여 대상을 찾음
*/
img[alt|="love"] { border:2px solid blue; }

/* <a href="http://naver.com"></a> */
a[href^="http://"] { background-color: yellow;}

/* <a href="../part/display.psd"></a> */
a[href$=".psd"] { float:left; }

/* <a href="#;" target="_blank" title="htmlcssjavascript"></a> */
a[title*="css"] { display:block; }

인접 형제 선택자와 일반 형제 콤비네이터

인접 형제 선택자(adjacent Sibling Combinator)는 요소의 바로 뒤에 오는 형제를 대상으로 합니다.

그리고 일반 형제 콤비네이터(general sibling combinator) 선택자는 인접 형제 콤비네이터와 유사하자만 인접 선택자가 오로지 해당 요소 바로 뒤에 오는 형제를 목표로 하는 인접 선택자와는 달리, 이 선택자는 해당 요소 뒤에 나오는 어떤 형제든지 이를 대상으로 할 수 있습니다.

See the Pen adjacent sibling combinator by jaeheekim (@jaehee) on CodePen.


인접 형제 선택자는 IE7+ 및 모던 브라우저 모두 지원하지만 일반 형제 선택자는 모던 브라우저와 IE9+ 만을 지원합니다.



Pseudo class, Element

지금까지는 존재하는 요소에 대해 대상을 선택했다면 다음의 선택자들은 존재하지 않는 즉, 가상의 클래스와 요소를 선택하는 방법에 대해 알아보겠습니다. CSS 에는 두 가지 가상 개념이 있는데 바로 가상 클래스, 가상 요소입니다.


Pseudo-class(가상 클래스)

가상클래스는 유사클래스,의사클래스, 슈도(Pseudo)클래스라고 불리는데 선택 대상 바로 뒤에 :(콜론)이 붙는 것이 특징입니다.

CSS 2.1에서 지원하는 가상 클래스는 다음과 같습니다.

  • :link - 방문하지 않았던 링크 즉, 기본적으로 가지고 있는 상태(히스토리가 없는 경우)를 링크라 함
  • :visited - 한번이라도 방문했던 링크, 즉 방문한 상태
  • :hover - 마우스가 올라간 상태
  • :active - 활성화된 요소(마우스로 링크를 클릭한 순간을 말함)
  • :focus - 요소에 포커스가 된 상태
  • :first-child 선택한 요소 중에 첫번째 자식인 요소
HTML
a:link, a:visited { color:#999;}
a:hover, a:active { color:#333; }
p:hover { color:blue; }
input:focus { background-color:darkred; }
        
/* 포커스가 된 상태에서 마우스가 올라가면.. */
input:focus:hover { background:#000; }

:hover, :active 는 anchor 요소 뿐만 아니라 모든 요소에 적용할 수 있습니다.

위와 같은 상태 디자인은 웹 접근성 측면에서도 매우 중요합니다.

KOREAN AIR(https://www.koreanair.com/global/en.html)

이 대한항공 사이트는 전 세계적으로 만들어져 있는데 특히 미국처럼 접근성에 대한 법률조항이 매우 엄격한 나라에서는 마우스를 올렸을 때 시각적으로 상태가 표시되는지를 처리해 주어야 합니다.


이 외의 구조적인 가상 클래스

  • :first-child : 첫 번째 자식을 선택함.
    즉, 실제 클래스(.first-child)를 주지 않아도 가상으로 처리 가능합니다.
  • :last-child : 마지막 자식을 가리킴.
  • :nth-child(n) : n 번째 대상을 선택함.
    숫자값을 사용할 수 있고 숫자에 해당되는 대상을 가리키며, 포뮬러(공식)를 적용할 수도 있습니다.
    즉, n 번째 자식 선택자는 첫번째나 마지막을 선택하는 것보다 더 융통성을 발휘하여 선택할 수 있게 도와줍니다.
    다섯 번째 또는 여덟 번째 자식을 선택하고 싶을 경우에 :nth-child(n) 를 사용하면 아주 쉽게 선택할 수 있습니다.
    (2n) 은 짝수, (2n-1) 은 홀수를 선택하게 됩니다. 2n, 2n-1 과 같이 짝수,홀수를 좀 더 편하게 사용할 수 있도록
    CSS 에서는 짝수를 even, 홀수를 odd 를 제공해 주고 있습니다.
  • :lang(ko) : HTML 요소에 lang 속성이 사용되었을 때 사용되는 언어에 따라 다른 디자인을 제공해 줄 수 있습니다.
    예를 들어, 국·영문 페이지가 있을 때 다른 글꼴을 적용해 줄 수 있습니다.
  • :empty : 자식이 없는 요소을 가리킴.
  • :not(x) : x 요소를 제외한 요소들을 가리킴.
  • :only-child : 형제가 없는 요소를 가리킴.
  • :only-of-type : 형제 가운데 고유한 타입을 갖는 요소를 선택함.
  • :nth-of-type(n) : n번째 타입의 요소를 선택함.
    가상 클래스 이름에도 나와 있듯이 type 을 가리킨다는 것에 주목해야 합니다.
    그리고 type 을 다른 말로 태그 선택자라고 하는데 type 이 태그를 의미하는 것을 숙지하지 못하고 사용한다면 혼동스러울 수 있습니다.
  • :nth-last-of-type(n) : 해당 타입의 뒤에서부터 계산된 n 번째 요소를 가리킴
  • :first-of-type : 특정 타입의 첫 번째 자식 요소를 가리킴.
  • :last-of-type : 특정 타입의 마지막 자식 요소를 가리킴.

n 은 수학시간에 사용했던 n 항과 같은 것을 말하며, 1st, 2nd, 3rd, 4th, 5th, 6th ... 처럼 th 가 붙기 때문에
nth- 가 되는 것입니다.


:last-child

여기서 기억해야 할 것은 자기 자신이 자식이어야 한다는 것입니다.

See the Pen :last-child 예제 by jaeheekim (@jaehee) on CodePen.


:nth-child 예제 코드

See the Pen pbBRgk by jaeheekim (@jaehee) on CodePen.


nth-of-type 예제 코드

See the Pen nth-of-type(n) 예제 by jaeheekim (@jaehee) on CodePen.

이 :nth-of-type(n) 은 :nth-child(n) 와 어떤 차이점이 있을까요?

가장 중요한 차이점은 :nth-child(n) 예제 코드와 다른 점이 있다면 타입(태그)만을 필터링한다는 것입니다.
즉, 타입(태그) 중에 n 번째를 선택한다는 의미입니다.


:first-of-type, :last-of-type 예제 코드

:first-of-type, :last-of-type 이 가상 선택자 역시 특정 타입 중에 첫 번째요소, 마지막 요소를 선택하는데 이용됩니다.

See the Pen :first-of-type, :last-of-type 예제 by jaeheekim (@jaehee) on CodePen.


:empty 와 :not(x)

:empty 는 콘텐츠나 자식이 없는 요소들을 선택하고 :not(x) 는 x 를 제외한 모든 요소들을 선택할 때 사용할 수 있는데 여기서 x 는 또 다른 선택자를 의미합니다.

See the Pen :empty, :not(x) 예제 by jaeheekim (@jaehee) on CodePen.



Pseudo Element(가상 요소)

가상 요소는 가상 클래스와 다릅니다.
가상 클래스는 문서에 사용자가 클래스를 추가하지 않았지만 클래스를 부여한 것처럼 동작하고, 가상 요소는 문서에 요소를 직접 마크업을 작성한 것과 같은 효과를 나타냅니다.

가상 클래스는 콜론(:)을 한 개 사용했다면 가상 요소는 콜론 2개(::)를 사용합니다.
CSS 2.1 까지는 콜론 1개를 사용했지만 CSS3 부터는 콜론 2개(::)가 표준입니다.
하지만 여전히 하위 호환성 때문에 콜론 1개를 허용하고 있습니다.

css
.demo01::before {
    content: "";
    display: block;
    height: 5px;
    border: 1px solid red;
}
ul li:first-child {
    color: blue;
}

다음으로 CSS2.1 가상 요소입니다.

  • ::first-letter : 글자 중에 첫 번째 글자를 찾아서 스타일을 꾸며 줄 수 있음.
  • ::first-line : 첫 번째 줄을 동적으로 스타일을 꾸며 줄 수 있음.
  • ::before : 이 가상 요소를 사용한 첫 번째 자식으로 Element(요소)가 생성됨.
  • ::after: 이 가상 요소를 사용한 마지막 자식으로 Element(요소)가 생성됨.



CSS 상속(Inheritance)

상속이란 부모 노드에 선언된 스타일이 자식 노드에 까지 영향을 미치는 것을 말합니다.

다시말해, h1 에 선언된 CSS 스타일은 자식 노드인 span 으로까지 상속되게 됩니다.

그리고 CSS 속성 중 일부는 상속이 되고, 일부는 그렇지 않은 속성도 있으며, 상속에 대한 개념과 상속이 되는 속성, 그렇지 않은 속성에 대해 알아보겠습니다.


상속되는 속성

요소의 상속되는 속성에 값이 지정되지 않은 경우, 요소는 부모 요소의 해당 속성의 계산 값을 얻습니다.
상속되는 속성의 대표적인 예는 color 속성입니다.

글자색, 글자 디자인에 관련된 것

  • color
  • font-size
  • font-family
  • letter-spacing

상속되지 않는 속성

상속되지 않는 속성의 대표적인 예는 border 속성입니다.

공간에 관련된 것

  • outline
  • margin
  • padding
  • border
html
<h1>CSS
    <span>Inheritance</span>
</h1>
css
h1 { /* type selector */
    color: red;
}

CSS 의 몇 가지 속성은 상속되지 않는 한계를 가지고 있습니다. 상식적으로 생각해 보면 보더(테두리)를 부모에 선언했더니 자식에도 테두리가 표현된다던지..

상식적으로 생각해 보면 보더(테두리)를 부모에 선언했더니 자식에도 테두리가 표현된다던지..

a 링크를 사용한 곳에서 부모의 폰트 컬러가 같게 상속되어 있다면 a 링크가 링크로써의 정보, 사용자에게 UI/UX 적 사용성이 떨어질 것입니다.

물론 같은 컬러로 상속되었다고 가정했을 경우 underline 이 있어서 이게 링크의 역할을 하는 텍스트구나 생각할 수도 있겠지만 CSS 를 설계했던 입장에서는 좀더 링크로써의 역할을 가시성있게 보이게 하기 위해 상속을 허용하지 않도록 디자인해 놓은 것입니다.

그리고 대표적으로 박스 모델 속성은 상속이 되지 않습니다.

margin, padding 등이 자식 요소로 상속되길 원하는 경우는 보통 없기 때문입니다.



CSS 의 우선권, 캐스케이딩(Cascading)

여러 개의 CSS 파일을 결합할 때, 충돌을 해결하는 프로세스가 Cascade 입니다.

CSS 에는 우선권이라는 것이 있는데 이는 먼저 적용될 권리를 말하는데 이것이 CSS 언어의 cascading 룰에 해당됩니다.
예를 들어, 다음과 같이 동일한 속성 선언이 중복될 경우 나중에 선언된 속성이 우선권이 높아서 그 선택자가 적용됩니다.

css
h1 {
    color:red;
}
h1 {
    color:blue;
}


우선권에 대한 구체성, 명시성, 세분화(specificity)

CSS 스타일은 W3C CSS 2.1 명세에서 정의한 무게의 구체성에 의하여 적용됩니다.

명시도는 선택자가 얼마나 명시적인가?를 숫자로 표현하는 것입니다

선택자의 명시도를 판단하는데는 세가지 기준이 들어갑니다.

위의 숫자와 쉼표로 구분한 것이 그 기준이 됩니다.

먼저 몇 가지 예를 보면서 살펴보겠습니다.(코드로~)

숫자 사이에 쉼표가 있는데 이는 각 세분화의 레벨이 서로 독립적입니다.

이 말은 클래스 설명자 하나 정의되어있는 것이 요소(타입) 선택자가 여러 개 있는 것보다 더 명시적일 수 있기 때문입니다.

그리고 쉼표로 구분하지 않고 0013 점수로 환산한다면 13점 정도로 이해할 수 있는 오해가 있기 때문에 주의를 요합니다.

만약에 구체성이 0,0,1,0 과 0,0,0,11 명시도를 10,11로 오해해서 명시도가 더 높다고 잘못 이해할 수 있습니다.

그리고 흔히 오해하는 것이 하나 더 있습니다

구조상 가깝게 있는 것이 명시도에 영향을 미친다고 생각하는 경우가 많습니다.

두 선택자 모두 요소 설명자 2개씩만 있습니다.

명시도는 똑갑습니다.(0,0,2,0) 이러한 경우 둘 중 나중에 쓴 규칙이 앞의 규칙을 덮어씁니다.

문서 구조상 보면 ul요소가 html 요소보다 li요소에 더 가까이 있지만, 이러한 위치 관계는 명시도와 아무런 상관이 없습니다.

명시도는 단지 숫자일 뿐이고 문서 구조를 절대 평가하지 않습니다.

명시도가 같을때에는 뒤에 쓴 규칙이 앞의 규칙을 덮어쓴다. 그래서 CSS를 cascading(폭포)이라고 합니다.

html
<h2>헤딩 요소
    <span>명시성 테스트 (0,0,0,2)</span>
</h2>

<h4 class="c_type">클래스 구체성은
    <span class="c_type2">0,0,2,2 입니다.</span>
</h4>
css
h2 {
    color: red; /* 0,0,0,1 */
}
h2 span {
    color: green; /* 0,0,0,2 */
}
h4.c_type { /* 0,0,1,1 */
    color: gray;
}
h4.c_type span.c_type2 { /* 0,0,2,2 */
    color: pink;
}
#content {
    color: black;
}

div ul ul li {
    /* 요소 설명자 0,0,0,4 */
}

div.aside ul li {
    /* 클래스 1개와 요소가 3개이므로 0,0,1,3 */
}

a:hover {
    /* 가상 클래스 1개와 요소 1개 0,0,1,2 */
}

div.nav a:hover {
    /* 가상 클래스1개와 클래스 1개 그리고 요소가 2개 0,0,2,2 */
}

#content em {
    /* 아이디 선택자 1개와 요소 선택자 1이므로 0,1,0,1 */
}
div#content em {
    /* 아이디 선택자가 1개와 요소가 2개 0,1,0,2 */
}

그리고 명시도에서 맨 앞에 0 은 인라인 스타일(Style Attribute)을 나타냅내다.


CSS는 캐스케이드(우선 적용 순위) 개념 이해가 중요한 언어입니다.

가장 기본적인 수준에서는 CSS 규칙의 순서가 중요하지만, 실상은 그보다 더 복잡합니다.
캐스케이드에서 어떤 선택자가 우선권을 가지는지는 3가지 요인에 달려 있습니다.

  • 중요성
  • 속성 (계산된 점수)
  • 소스 순서


무조건 : !important

지금까지 설명한 구체성보다도 우선권을 가지는 것이 있는데 그것은 !important 가 있습니다.

자바스크립트에서 !(연산자)가 부정을 뜻하는 연산자이기 때문에 중요하지 않다라고 이해할 수도 있지만 CSS 에서는 그렇지 않습니다.

html
<div id="demo">
    <p id="demo-child" style="color:tan">Lorem ipsum dolor sit.</p>
</div>
css
div#demo p#demo-child {
    color: red /*!important*/;  /* 0,2,0,2 */
}
div p {
    color: green !important; /* 1,0,0,2 */
}

기본적으로 중요 표시가 있는 선언은 중요 표시가 없는 선언을 모두 오버라이딩하게 됩니다.

아이디 선택자가 2개나 있어서 구체성이 높은 편이지만 우선권을 !important 에게 뺏겨버렸기 때문이고, 임포턴트는 카드의 조커와 같은 역할을 한다고 할 수 있습니다.

그런데 둘다 !important가 선언되어 있다면???

두 선언 모두 조커가 선언되어 있기 때문에 동등한 레벨이므로 일반적인 케이케이딩 규칙이 적용됩니다.

즉 명시도가 적용되는 것입니다.

따라서 !important 는 조심해서 써야 합니다. 이걸 남용하기 시작하면 거의 임포턴트 블랙홀에 빠지게 되어 유지보수나 실무자에게 작업의 어려움을 가져다 줄 것입니다.

가능하면 사용하지 않되 이 점을 유의하면서 사용하도록 하세요.



CSS Hack(핵)

브라우저마다 렌더링 방식이 조금씩 차이가 나고 버그가 존재하는 관계로 모든 CSS 스타일 속성이 똑같이 렌더링 되지 않는 경우가 발생합니다.(IE7,8에서만 디자인이 내가 원하는 대로 되지 않는 경우) 따라서 특정 브라우저를 제외하거나 특정 브라우저에서만 그리고 버전에 따라 CSS를 제각각 적용하는 테크닉을 CSS 핵(hack)이고 합니다

이 핵 사용은 문법적으로는 올바르지 않고 비표준인 경우가 많기 때문에 불가피한 경우가 아니면 사용을 자제해야 합니다.

브라우저 하위호환성 보장 및 브라우저간 렌더링 호환성을 보장하기 위한 CSS 기법인 핵의 일부는 CSS 표준 문법에 맞지 않는 경우가 대부분입니다. 브라우저 벤더별, 버전별 호환성을 유지하기 위한 불가피한 수단이지만, 무분별한 핵의 사용은 코드량 증가, 성능 저하, 유지보수의 증가와 코드의 복잡도를 높이는 결과를 초래할 수 있습니다.

위와 같은 이유로 가급적 핵을 사용하지 않고, 불가피한 경우에만 최소화 하여 사용할 것을 권장 하고 있습니다.



Jaehee's WebClub


저작자표시 변경금지