2022-02-15 16:28 작성

CSS 구조화 방식

Table of contents
  1. CSS 구조화 방식
    1. HTML에 CSS 적용하기
      1. External stylesheet
      2. Internal stylesheet
      3. Inline styles
    2. Selectors
      1. Specificity
    3. Properties와 values
      1. Functions
        1. calc() function
        2. Transform functions
    4. @rules
    5. Shorthands
    6. Comments
    7. White space
    8. 저작권

HTML에 CSS 적용하기

먼저, CSS를 document에 적용하는 세가지 방법을 검토해보자: external stylesheet, internal stylesheet, 그리고 inline(즉시 처리하는) styles.

External stylesheet

External stylesheet은 .css 확장자로 구분된 file 안에서 CSS를 포함하고 있다. 이 방법은 CSS를 document에 가져오는 방법 중 가장 일반적이고 유용한 방법이다. 이 방법으로 하나의 CSS file을 통해 다수의 web pages에 CSS를 적용할 수 있다.

HTML <link> element를 사용해 external CSS stylesheet를 참조할 수 있다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My CSS experiment</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Hellow World!</h1>
        <p>This is my first CSS example</p>
    </body>
</html>

CSS stylesheet은 아마 다음과 같을 것이다.

h1 {
    color: blue;
    background-color: yellow;
    border: 1px solid black;
}

p {
    color: red;
}

<link> element의 href 속성은 file system에서 하나의 file을 참조하는데 필요하다. 위의 예시에서는 HTML document와 같은 folder에 있는 CSS file이 선택 되었다. 그러나 CSS file을 다른 곳에 저장해두어도 되고 이때 path만 조정하면 된다.

<!-- Inside a subdirectory called styles inside the current directory -->
<link rel="stylesheet" href="styles/style.css">

<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
<link rel="stylesheet" href="styles/general/style.css">

<!-- Go up one directory level, then inside a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css">

Internal stylesheet

Internal stylesheet은 HTML document 안에 있다. Internal stylesheet을 생성하기 위해, HTML <head> 내부에 <style> element를 넣고 그리고 그 안에 CSS를 작성한다.

HTML에서 internal stylesheet이 적용된 모습은 다음과 같다:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My CSS experiment</title>
        <style>
            h1 {
                color: blue;
                background-color: yellow;
                border: 1px solid black;
            }

            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>This is my first CSS example</p>
    </body>
</html>

몇몇 상황에서 internal stylesheets가 유용할 수 있다. 예를 들어, external CSS files를 수정하는 것이 막힌 형태의 content management system으로 작업하는 경우가 있을 것이다.

하지만 하나 이상의 page를 가진 sites에서 internal stylesheet은 작업에 있어 비효율적인 측면이 많다. Internal stylesheets를 사용해 복수의 pages에 균일한 CSS styling을 적용하기 위해 모든 web page에 styling을 적용할 수 있는 각각의 internal stylesheet이 삽입 되어야 한다. 이것은 site 유지에 있어서도 효율성을 떨어뜨린다. Internal stylesheets를 이용한 CSS를 적용하면, 작은 styling 변화에도 다수의 web pages를 수정해야 하는 위험성이 생기게 된다.

Inline styles

Inline styles는 하나의 HTML element에 영향을 미치는 CSS 선언구로 style 속성에 포함된다. HTML document에서 inline style의 실행은 다음과 같다:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My CSS experiment</title>
    </head>
    <body>
        <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
        <p style="color:red;">This is my first CSS example</p>
    </body>
</html>

가능하면 이런 식으로 CSS를 사용하는 것을 지양하라. 이런 식의 inline styles는 가장 좋은 예시의 반대 지점에 있다. 첫째, 이 방법은 유지를 위한 CSS 실행 중 가장 비효율적인 방법이다. 한 web page에서 styling 변경을 하나만 하더라도 여러 번 변경을 해야 할 수도 있다. 둘째, inline CSS는 HTML 그리고 content와 섞여 code의 가시성을 떨어뜨려 이해하기 힘들게 한다. Code와 content를 나누는 것이 유지를 더 쉽게 하고 website 작업자들의 수고를 덜어준다.

Inline styles가 더 흔한 몇 가지 상황이 있기는 하다. 만약 작업 환경이 매우 제한적이라면 inline styles를 사용해 재분류 해야 할 수도 있다. 예를 들어, CMS가 HTML body만 수정할 수 있게 허용했다던지와 같이. 이미 HTML email에서 수많은 inline styles를 보았을 수도 있겠다. 이는 수많은 email 고객들과 가능한 한 많은 호환성을 얻기 위한 것이다.

Selectors

하나의 selector는 content에 styles를 적용하기 위해 HTML을 목표로 한다. 만약 CSS가 content에 예상한 대로 적용되지 않으면, selector가 예측하는 것과 달라서 오적용 되는 것일 수 있다.

각각의 CSS 규칙은 browser에 어떤 element 혹은 elements에 그 규칙들이 적용 되어야 하는지 말해주기 위해 하나 혹은 list 단위의 selector와 함께 시작한다. 아래의 모든 예시는 유효한 selectors 혹은 selectors의 lists다.

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2,  .intro

위의 selectors를 사용하는 CSS 규칙을 생성해보자. 또, 상기의 selectors에 의해 style을 지정하는 HTML을 추가해보자. 그리고 만약 위의 syntax 중 친숙하지 않은 것이 있다면 MDN에서 검색해보도록 하자.

Specificity

CSS를 적용하다 보면, 두 개의 selectors가 같은 HTML element를 가리키는 상황을 마주칠 수 있다. 다음의 stylesheet을 고려해보자, p selector는 paragraph의 text를 blue로 설정한다. 또 다른 한 class는 선택된 elements의 text 색깔을 red로 설정한다.

.special {
    color: red;
}

p {
    color: blue;
}

HTML document에서 special이라는 class를 가진 paragraph가 있다고 가정해보자. 두 개의 규칙이 모두 적용된다. 이 때, 어떤 selector가 이길까? blue 혹은 red paragraph text 중 어느 것이 될 것 같은가?

<p class="special">What color am I?</p>

CSS 언어는 충돌이 발생하는 상황에서 어떤 selector가 더 강할지 통제하는 규칙들을 가지고 있다. 이러한 규칙들은 cascade 그리고 specificity라고 불린다. 아래의 code block에서 우리는 두 개의 규칙을 p selector에 정의한다. 이 때 paragraph text는 blue가 될 것이다. 이것은 paragraph text를 blue로 설정하는 선언구가 stylesheet의 나중에 나타나기 때문이다. 이후에 styles는 stylesheet에서 더 먼저 나타나는 styles와 충돌했을 때, 더 먼저 나타난 것을 교체한다. 이것이 cascade 규칙이다.

p {
    color: red;
}

p {
    color: blue;
}

그러나 앞선 예와 같이 class selector와 element selector 간 충돌이 있는 경우, class가 승리하게 되고 paragraph text는 red로 변한다. 충돌하는 style이 stylesheet에서 나중에 나타나는데 어떻게 이것이 가능할까? 한 class는 좀 더 구체적으로 순위가 매겨지고, element selector보다 더 specificity(특수함)을 가지게 된다. 그래서 다른 충돌하는 style 선언구를 무효화할 수 있게 되는 것이다.

처음에는 specificity와 cascade 규칙이 복잡해 보일 수도 있다. 이러한 규칙들은 CSS와 친숙해지면 더 쉽게 이해될 것이다. Cascade와 inheritance에서는 specificty를 계산하는 방법을 포함해 이 부분에 대해 보다 더 자세하게 다룰 것이다.

Properties와 values

가장 기초적인 수준에서 CSS는 두 가지 components로 구성되어 있다:

  • Properties: 어떤 stylistic features를 수정하고자 하는지 가리키는 사람이 읽을 수 있는 식별자들을 말한다. 예를 들어, font-size, width, background-color 등이 있다.

  • Values: 각각의 property에는 하나의 value가 할당 된다. 이 value는 특정 property를 어떤 식으로 styling 할 지 가리킨다.

h1 {                            /* h1: a selector, {}: a CSS Declaration Block */
    color: blue;                /* color: a property, blue: a value */ 
    background-color: yellow;
}

한 property가 한 value와 짝 지어지면, 이 짝 지어짐을 CSS declaration(CSS 선언) 이라고 부른다. CSS declarations는 CSS Declaration Blocks 에서 찾을 수 있다.

마지막으로 CSS declaration blocks는 CSS rulesets(또는 CSS rules)를 생산하기 위한 selectors 와 함께 짝 지어진다.

CSS properties에 특정 values를 설정하는 것은 document의 layout을 정의하고 styling하는 가정 첫번째 방법이다. CSS engine은 이러한 declarations를 계산해 한 page의 모든 지정 element에 적용한다.

CSS properties는 대소문자를 따지지 않는다. Property와 value는 colon(:)으로 구분한다.

Functions

대부분의 values는 상대적으로 간단한 keywords 혹은 숫자형 values다. 어떤 values의 경우 function 형태의 value를 가지기도 한다.

calc() function

calc() function을 이용해 CSS에서 간단한 수학 계산을 할 수 있다:

<div class="outer">
    <div class="box">
        The inner box is 90% - 30px.
    </div>
</div>

.outer {
    border: 5px solid black;
}

.box {
    padding: 10px;
    width: calc(90% - 30px);
    background-color: rebeccapurple;
    color: white;
}

하나의 function은 function 이름, 그리고 function의 values를 닫을 수 있는 괄호로 구성된다. 위의 calc() 예시의 경우, box의 width는 block width의 90%, 빼기 30 pixels로 정의 되었다. 계산 결과는 미리 계산되는 것은 아니고, static value로 들어가게 된다.

Transform functions

또 다른 예시로 transform은 rotate()와 같은 다양한 values를 가진다.

<div class="box"></div>

.box {
    margin: 30px;
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    transform: rotate(0.8turn);
}

@rules

CSS @rules(“at-rules”로 발음)는 CSS가 무엇을 수행해야하고 어떻게 행동해야 하는지에 대한 지시를 제공한다. 몇 가지 @rules는 하나의 keyword와 하나의 value만 가지면 될 정도로 간단하다. 예를 들어 @import는 한 stylesheet을 다른 CSS stylesheet으로 import 한다.

@import `styles2.css`;

흔하게 마주칠 법한 @rule은 @media다. 이 @media는 media queries를 생성하는데 사용된다. Media queries는 CSS styling을 적용하는데 있어 조건 logic을 사용한다.

아래의 예시에서 stylesheet은 <body> element의 기본 background가 pink가 되도록 설정한다. 그러나 뒤따라오는 media query는 browser의 viewport가 30em 보다 클 경우, background를 blue로 정의한다.

body {
    background-color: pink;
}

@media (min-width: 30em) {
    body {
        background-color: blue;
    }
}

Shorthands

font, background, padding, border, 그리고 margin과 같은 어떤 properties는 shorthand properties라고 불린다. 그 이유는 shorthand properties는 한 줄에 여러 개의 values를 설정할 수 있기 때문이다.

예를 들어, 다음과 같은 한 줄 code가 있다:

/* In 4-value shorthands like padding and margin, the values are applied
   in the order top, right, bottom, left (clockwise from the top). There are also other
   shorthand types, for example 2-value shorthands, which set padding/margin
   for top/bottom, then left/right */
   
a {
    padding: 10px 15px 15px 5px;
}

위의 code는 아래의 code와 같다:

a {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
}

아래의 한 줄은:

body {
    background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
}

다음과 같다:

body {
    background-color: red;
    background-image: url(bg-graphic.png);
    background-position: 10px 10px;
    background-repeat: repeat-x;
    background-attachment: fixed;
}

Comments

다른 coding 작업들과 마찬가지로 CSS에 덧붙여 comments를 작성하는 습관을 기르는 것이 좋다. Comments를 달아 놓는 것은 나중에 수정을 하거나 개선을 하는 등의 작업을 할 때 도움을 줄 뿐만 아니라 code의 이해에도 도움을 준다.

CSS comments는 /*로 시작하여 */로 끝난다. 아래의 예시에서 comments는 code의 뚜렷한 sections의 시작점을 표시한다.

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  /* Increase the global font size on larger screens or windows
     for better readability */
  body {
    font-size: 130%;
  }
}

h1 {font-size: 1.5em;}

/* Handle specific elements nested in the DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

“Commenting out” code는 testing용도로 특정 sections를 일시적으로 무효화하는데 유용하게 사용될 수 있다. 예를 들어, .special에 적용된 규칙들은 code를 “commenting out” 하는 방법으로 무효화 되었다.

/*.special {
  color: red;
}*/

p {
  color: blue;
}

White space

White space는 tabs 그리고 새로운 lines와 같은 실제적 공간을 의미한다. Browsers가 HTML에서 white space를 무시하는 것처럼 browsers는 CSS 안의 white space도 무시한다. White space의 가치는 가독성을 개선시키는데 있다.

아래의 예시에서 각각의 선언(규칙의 시작/끝)은 각각의 line을 가지고 있다. 이것은 분명 CSS을 작성하는 좋은 방법이다. White space가 있다면 CSS를 유지하기 쉽고, CSS를 이해하기 쉽다.

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

다음의 예시는 동일한 CSS지만 조금 더 압축된 형태다. 두 예시는 똑같은 code를 가졌음에도 아래의 예시가 더 읽기 어렵다.

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; border-radius: 3px;}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

스스로 만드는 projects는 개인적 선호에 따라 format을 지정하면 된다. Team projects의 경우 team 혹은 project 단위의 style guide를 따라야 할 수 있다.

Warning: White space가 CSS declarations에서 values를 나누더라도, property 이름은 절대 white space를 가져서는 안 된다.

예를 들어 다음과 같은 선언구는 CSS에서 유효하다:

.hello {
    margin: 0 auto;
    padding-left: 10px;
}

아래의 선언구는 유효하지 않다:

.world {
    margin: 0auto;
    padding- left: 10px;
}

저작권

Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다.

크리에이티브 커먼즈 라이선스
이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.