HTML&CSS 본문

CSS Grammar

CSS 선언 방식

In-line 방식

HTML tag에 직접 style 속성 값을 지정하는 방법을 말한다.

HTML
 <strong style="font-size:10px" >안녕하세요. </strong>
Internal 방식

head tag 안에 style tag로 선언하여 선택자에 따라 일괄적으로 선언하는 방법을 말한다.

head tag 안에 오는 것이 정석이나 상황에 따라 body 안에도 선언하여 사용 가능하다.

HTML
<head>
    <style type="text/css">
        .tit {font-size:20px}
        .desc {font-size:16px}
    </style>
</head>
External 방식

CSS style 내용을 CSS 파일로 따로 저장하여 페이지에 linking 시키는 방법을 말한다.

여러 개의 파일을 link 시킬 수 있기 때문에 공통/자주 사용되는 부분을 따로 저장하여 사용하는게 용이하다.

CSS 파일 내에 인코딩 선언을 해주는 것이 좋다.

HTML
<head>
    <link rel="stylesheet" href="common.css" type="text/css" />
</head>
CSS (common.css)
.tit {font-size:20px}
.desc {font-size:16px}
import 방식

External 방식으로 링크된 CSS 안에 또 다른 CSS를 불러오는 방식을 말한다.

페이지가 다 로딩되고 이미지가 로딩되는 이슈로 인하여 권장되는 방식은 아니다.

CSS (common.css)
@import url("layout.css");

단위

상대단위 (px, em, ex, %, rem)
  • px

    pixel을 기준으로 브라우저에는 고정적이지만 표시장치(기기의 해상도)에 따라서 상대적인 크기를 갖는다.

    1px = 1dot

  • em

    해당폰트의 대문자 M의 너비를 기준으로 값을 가진다.

  • ex

    x-height

    해당폰트의 소문자 x의 높이를 기준으로 값을 가진다.

  • %

    percent

    기본글꼴의 크기에 대해 상대적으로 값을 가진다.

  • rem

    root em

    최상위 요소의 크기에 대해 상대적으로 값을 가진다.

절대단위 (in, cm, mm, pt, pc)
  • in

    inch 단위로 계산

    1inch = 2.54cm

  • cm

    centimeter 단위로 계산

    1cm = 10mm

  • mm

    단위로 계산

    10mm = 1cm

  • pt

    point 단위로 계산

    1pt = 1/72inch

  • pc

    pica단위로 계산

    1pc = 12pt

CSS Font-Size Comparative Table
CSS Font-Size Comparative Table
Points Pixels Ems Percent Point (Photoshop) / Gulim Point (Photoshop) / Dotum
6pt 8px 0.5em 50% 8pt, 9pt 8pt
7pt 9px 0.55em 55% 10pt 9pt, 10pt
7.5pt 10px 0.625em 62.5% 11pt 11pt
8pt 11px 0.7em 70% 12pt, 13pt 12pt
9pt 12px 0.75em 75% 14pt x
10pt 13px 0.8em 80% 15pt 13pt
10.5pt 14px 0.875em 87.5% 16pt, 17pt 14pt, 15pt
11pt 15px 0.95em 95% 18pt 16pt
12pt 16px 1em 100% 19pt 17pt
13pt 17px 1.05em 105% 20pt, 21pt 18pt, 19pt
13.5pt 18px 1.125em 112.5% x 20pt
14pt 19px 1.2em 120% 22pt 21pt
14.5pt 20px 1.25em 125% 23pt 22pt
15pt 21px 1.3em 130% 24pt x
16pt 22px 1.4em 140% 25pt, 26pt 23pt, 24pt
17pt 23px 1.45em 145% 27pt x
18pt 24px 1.5em 150% 28pt 25pt

브라우저의 pt 단위와 포토샵의 pt 단위는 다르며, 포토샵에서 텍스트를 pt 단위로 사용 시 해당 폰트의 높이가 px 단위가 된다.

권장 단위

상대적인 단위인 em을 사용시 보다 유동적인 환경으로 접근성을 구현할 수 있지만, 브라우저 간의 디자인 요소(간격의 오차)를 고려하는 경우에는 제약이 많다. 이에 다른 단위보다는 PC에서는 브라우저 호환성을 위해 px 단위의 사용을 권장한다.
단, 모바일과 같이 유동적인 레이아웃을 구현하기 위해서는 상대단위(em,%)를 권장하고 있는데,
아이폰4(IOS 4)의 보이스오버 기능과 관련하여 다음과 같은 IR 기법 이슈가 있으니 주의 하여야 한다. (IOS 5 제외)

  • iOS 4에서는 IR(park method) 기법 사용 시 text-indent의 단위에 따라 보이스오버 기능과 관련된 퍼포먼스 이슈가 발생한다.
  • iOS 4에서 em 단위는 px 단위에 비해 6배~10배까지 성능이 하락하며, in 단위는 15배~24배까지 성능이 하락한다. (px 단위의 지연시간을 0.1이라고 설정했을 때)

CSS 선택자

HTML에 스타일을 적용할 부분을 선택하게끔 해주는 역할

선택자의 대표적인 종류
  • 타입 선택자
  • 하위 선택자
  • ID, CLASS 선택자
  • 유사클래스 선택자
  • 전체 선택자

이외에도 자식, 인접, 속성 선택자가 더 있으나 IE6에서 지원을 하지 않는 관계로 현재 사용되고 있지는 않음

동일한 속성을 갖는 선택자 간 ,(콤마) 로 구분하여 선언 가능

h1, h2 {color:blue}
.link, .txt_desc {font-size:11px}
#wrap, .list_cont {overflow:hidden}
타입 선택자

HTML Tag 를 지정하여 선언

/* 타입 선택자 */
h1 {font-size:20px}
ul {overflow:hidden}
a {color:red}
p {text-decoration:underline}
하위 선택자

특정 엘리먼트 하위의 엘리먼트를 지정할 때 사용

공백(space)으로 구분함

타입, ID, CLASS 선택자와도 함께 사용 가능

/* 하위 선택자 */
ul li {height:30px}
ul li a {color:red}
table tr td {text-align:left}
ID, CLASS 선택자

엘리먼트에 직접 id, class 선택자 명을 지정

id는 #으로 구분, class는 .(점)으로 구분

/* ID, CLASS 선택자 */
#bodyContent {width:100%}
.clr {clear:both}
.datetime {font-size:10px}
#divNews .tab1 {width:50px;height:50px}
#divNews ul {background-color:red}
유사클래스 선택자

해당 엘리먼트의 상태에 따라 구분짓는 선택자

HTML 문서 상에는 없으나 CSS에서는 존재하는 것처럼 작성

IE6에선 a태그에만 지정이 가능하고 그 외 브라우저는 지원여부가 조금씩 다름

/* 유사클래스 선택자 */
a:link {color:blue;text-decoration:none} /* 방문하지 않은 링크 */
a:visited {color:red;text-decoration:none} /* 방문했던 링크 */
a:hover, a:active {color:black;text-decoration:underline} /* 마우스 오버시와 클릭시 */
전체 선택자

모든 태그에 대한 속성을 지정 할 수 있으나, 사용빈도가 매우 낮음

선언은 *(별표) 로 선언

/* 전체 선택자 */
* {color:red}
div * {font-size:10px}
자식 선택자
/* 자식 선택자 */
div > a {font-size:20px}
인접 선택자
/* 인접 선택자 */
h1 + div {background-color:blue}
속성 선택자
/* 속성 선택자 */
[class='box'] {background-color:red}

CSS Cascading

두개 이상의 규칙이 동일한 엘리먼트에 적용될 때 각 규칙의 우선순위에 따라 동작을 부여하는 방식으로
각 선택자에 따른 환산값은 아래 표와 같으며 높은 환산 값을 가진 규칙이 적용된다.

CSS Cascading
선택자 10진수 환산값
inline style 1000 style="margin-left:10px"
id 100 #Header {width:100%}
class 10 .info {width:100%}
element 1 ul {margin:0}
참고

속성 선언뒤 !important 를 선언하면 우선순위에 상관없이 우선 적용된다.

.info {width:100% !important}

CSS 선택자 사용 방식

보다 빠른 웹페이지 성능개선을 위해 많은 개발자들이 노력하고 있는데,
CSS의 선택자 사용방식을 통해 성능을 개선시킬 수 있는 다양한 방식이 연구되고 있으며, 그 중 알려진 몇 가지 방식을 소개하고자 한다.

OOCSS(권장)

공통 클래스를 불러다 놓고 각 엘리먼트에 세부적인 클래스를 추가하는 방식

CSS
.bg_comm {float:left;height:15px;background:url(comm.png) no-repeat;text-indent:-9999px}
.link1 {width:50px;background-position:0 0}
.link2 {width:25px;background-position:0 -25px}
HTML
<a href="#" class="bg_comm link1">링크1</a>
<a href="#" class="bg_comm link2">링크2</a>
Sass @extend

공통 클래스를 따로 만들지 않고 각 엘리먼트의 여러 클래스를 콤마로 구분하여 공통 스타일을 정의 한 후, 아래에서 세부적인 스타일을 추가하는 방식

CSS
.link1, .link2, .link3 {float:left;height:15px;background:url(comm.png) no-repeat;text-indent:-9999px}
.link1 {width:50px;background-position:0 0}
.link2 {width:25px;background-position:0 -25px}
.link3 {width:20px;background-position:0 -50px}
HTML
<a href="#" class="link1">링크1</a>
<a href="#" class="link2">링크2</a>
<a href="#" class="link3">링크3</a>
Long / Bloated

클래스에 각각의 스타일을 정의하는 방식

CSS
.link1 {float:left;width:50px;height:15px;background:url(comm.png) no-repeat 0 0;text-indent:-9999px}
.link2 {float:left;width:25px;height:15px;background:url(comm.png) no-repeat 0 -25px;text-indent:-9999px}
.link3 {float:left;width:20px;height:15px;background:url(comm.png) no-repeat 0 -50px;text-indent:-9999px}
HTML
<a href="#" class="link1">링크1</a>
<a href="#" class="link2">링크2</a>
<a href="#" class="link3">링크3</a>
CSS 선택자 사용 방식과 성능과의 관계

CSS 선택자 사용 방식에 따라 그에 따른 성능이 브라우저별로 다르게 나타나며, 도식화하면 아래 그림과 같다.
아래 그림에서 보듯이 막대그래프가 높을수록 그만큼 렌더링 되는 시간이 오래 걸리며 막대그래프가 낮을수록 해당 CSS 선택자 사용 방식의 효율성이 더 좋음을 알 수 있다.


CSS 선택자 사용 방식과 성능과의 관계 그래프를 통해 OOCSS 방식이 가장 효율적임을 알 수 있다
출처 [ screwlewse.com ]