본문으로 바로가기

Cascading Style Sheet

category StyleSheet/CSS 2016. 9. 16. 10:14

CSS 란?

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

W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높습니다.

.

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

그리고 이러한 구조,표현은 분리되어야 합니다.

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


CSS 를 사용해야 하는 이유

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


CSS 속성 및 분류

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

표시

display, visibility

넘침

overflow

흐름

float

위치

position

크기

width & height

간격

margin & padding

테두리

border

배경

background

폰트

font

기타

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



CSS 속성 순서


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

즉, 속성과 값을 선언하는데 정확한 순서는 없지만 대략적인 컨벤션이 있습니다.

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

자바스크립트에 작성함에 있어서도 생성자 함수를 사용하는데 대문자로 사용한다거나 jQuery 작성함에 있어서도 코드의 가독성을 측면에서 코드 작성할 때 지키면 좋은 약속 같은 것이 있습니다.

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

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

그곳 업무영역만의 약속인 것입니다.

그리고 본인이 진행하는 프로젝트에서도 작업자들간에 협업을 위해 미팅후에 컨벤션을 정해놓을 수도 있습니다.

일반적,암묵적으로 크게 사용되는 컨벤션이 각 언어마다 존재하며 이 관례를 지켜주면 코드의 가독성이 높일 수 있습니다.

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

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

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

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

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

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

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



상속(Inheritance)

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

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


코드로 확인해 보도록 하겠습니다.

html
<h1>CSS
    <span>Inheritance</span>
</h1> 
css
h1 { /* type selector */
    color: red;
}

CSS 의 몇 가지 속성은 상속되지 않는 한계를 가지고 있습니다.

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

그리고 a 링크를 사용한 곳에서 부모의 폰트 컬러가 같게 상속되어 있다면 a 링크가 링크로써의 정보, 사용자에게 UI/UX 적으로 미비할 것입니다.

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

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

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





캐스케이드(Cascade)

동일한 속성 선언이 중복될 경우 나중에 선언된 속성이 적용됩니다.

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


selector(선택자)

선택자는 CSS의 핵심입니다.

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

요소 전체, 혹은 특정한 그룹을 골라서 스타일을 지정할 수 있으므로 CSS 몇 줄만으로 많은 요소에 스타일을 지정할 수 있습니다.


선택자에는 크게 세가지로 분류할 수 있습니다.

  • Type Selector : [h1, div, span, em] 구체성(0, 0, 0, 1)
  • Class Selector : [.aside, .section] 구체성(0, 0, 1, 0)
  • ID Selector : [#content, #footer] 구체성(0, 1, 0, 0)
css
#wrap { ... }
#wrap .header { ... }
.content div ul.noti li { ... }

이 밖에도 여러 종류의 가상 선택자들이 있습니다.



구체성,명시성,세분화(specificity)

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

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

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

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

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

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

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

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


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은 인라인 스타일을 나타냅내다.



무조건 : !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 는 조심해서 써야 합니다. 이걸 남용하기 시작하면 거의 임포턴트 블랙홀에 빠지게 되어 유지보수나 뒤 작업자들에게 엄청난 욕을 듣게 될 것입니다

주의해서 사용하도록 하세요.



Pseudo class, Element

CSS 에는 두 가지 가상 개념이 있습니다.

바로 가상 클래스, 가상 요소입니다.


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

  • :link - 방문하지 않았던 링크
  • :visited - 방문했던 링크
  • :hover - 포커스를 받은 요소
  • :active - 활성화된 요소(링크를 클릭하고 있는 순간의 바로 그 링크)
  • :first-child 선택한 요소 중에 첫번째 자식인 요소

이 외에도 가상클래스가 다수 존재하지만 위 항목들이 주로 이용되는 것 들입니다.



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

  • ::first-letter
  • ::before
  • ::after

그렇다면 가상 클래스와 가상 요소의 차이점은?

이는 문서에 끼치는 영향이 다릅니다.

가상 클래스는 문세에 클래스를 추가한 처럼 동작하고, 가상 요소는 문서에 요소를 추가한 것과 같은 효과를 나타냅니다.

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

그저 실제인 것 마냥 요소가 추가되었기 때문에 가상요소라고 합니다.

비슷하게, 가상 클래스는 문서 안의 요소에 클래스를 추가한 처럼 동작합니다.


CSS3 에는 다음과 같은 가상클래스가 추가됐지만 아직 지원률이 높지 않습니다.

  • :target
  • :root
  • :nth-of-type()
  • :nth-child()
  • :first-of-type
  • :last-of-type
  • :last-child
  • :empty, :not()


CSS 스타일 선언 방식

CSS 를 선언하는 방식, 즉 작성하는 방법에는 세 가지가 있습니다.

외부(External) 스타일, 내부(Internal) 스타일, 인라인(Inline) 스타일입니다.


  • 가장 권장되고 일반적인 방법으로 CSS 파일을 별도로 관리하는 형태입니다.
html
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head> 

  • 내부스타일로 단발성 페이지의 CSS 분량이 적은 경우에 사용
html
<head>
    <style type=“text/css”>
        #demo { border:1px solid red; }
    </style>
</head> 

  • 속성값이 동적으로 변경되어야 하는 경우에 사용
html
<div style=“display:block”>블라블라..</div> 


CSS Hack(핵)

브라우저마다 렌더링 방식이 조금씩 차이가 나고 버그가 존재하는 관계로 모든 CSS 스타일 속성이 똑같이 렌더링 되지 않는 경우가 발생합니다.(IE7,8에서만 디자인에 내가 원하는 대로 되지 않는 경우)

따라서 특정 브라우저를 제외하거나 특정 브라우저에서만 그리고 버전에 따라 CSS를 제각각 적용하는 테크닉을 CSS 핵(hack)이고 합니다

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

브라우저 하위호환성 보장 및 브라우저간 렌더링 호환성을 보장하기 위한 CSS 기법인 핵의 일부는 CSS 표준 문법에 맞지 않는 경우가 대부분입니다.

브라우저 벤더별, 버전별 호환성을 유지하기 위한 불가피한 수단이지만, 무분별한 핵의 사용은 코드량 증가, 성능 저하, 유지보수의 증가와 코드의 복잡도를 높이는 결과를 초래할 수 있다.

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



시멘티 마크업

브라우저의 상호 호환성 유지를 위해서는 시멘틱 마크업이 전재가 된다.

유효한 문법과 의미에 맞는 HTML 코드 작성이 전제되어야 CSS Formatting 을 올 바르게 할 수 있다.




Jaehee's WebClub


'StyleSheet > CSS' 카테고리의 다른 글

조건 주석문 처리방식  (0) 2016.09.29
CSS Dimension & 박스 모델, display vs visibility  (0) 2016.09.17
CSS Selector  (0) 2016.09.06
Responsive Web Design  (0) 2016.09.06
Mobile Web(모바일 웹) #2 - CSS, tech for Mobile Web  (2) 2016.09.06