Wiki Home

4장

4.1 스타일 정의와 적용

기본적으로 속성과 값을 콜론으로 구분한 한 쌍. 세미콜론으로 각각의 선언을 구분한다.

background-color: grey; color: white;

인라인 스타일

각 엘리먼트에 글로벌 style 속성으로 스타일을 적용한다.

<a href="http://apress.com" style="background-color: grey; color: white">

내장 스타일 생성하기

style 엘리먼트를 사용하여 내장 스타일을 생성하고 css 선택자를 이용하여 브라우저가 적용할 스타일을 알려줄 수 있다. 아래 예제에선 a가 선택자이다. 문서 내에 모든 a 엘리먼트에 해당 스타일을 적용하도록 한다.

<head>
  <title>Example</title>
  <style type="text/css">
    a {
      background-color: grey;
      color: white;
    }
  </style>
</head>

외장 스타일 시트의 적용

/*styles.css*/
a {
  background-color: grey;
  color: white;
}
span {
  border: thin black solid;
  padding: 10px;
}
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css"></link>
  </head>

Style 엘리먼트는 스타일 시트를 불러오는 순서가 중요하다. 만약 같은 선택자에 두개의 스타일이 정의된다면 나중에 로드된 스타일이 적용된다.

다른 스타일 시트로부터 불러오기
/*combined.css*/
@import "styles.css"
span {
  border: medium black dashed;
  padding: 10px;
}

한개의 @import 구문을 사용하고 필요한 만큼 여러 개의 스타일 시트를 불러올 수 있다. @import 구문은 반드시 맨 위에 있어야 한다. styles.css을 먼저 적용하고 그다음 combined.css에 정의된 내용을 정의한다. @import는 널리 사용되진 않는데 잘 알려지지 않은 것도 있고, link 엘리먼트로 스타일 계층화를 하는 것보다 브라우저의 실행 속도가 느린 경향이 있기 때문이다.

스타일 시트에 사용된 문자 인코딩 정의하기
@charset "UTF-8";
@import "styles.css";

유일하게 @import 구문 전에 올 수 있는 것은 @charset으로 스타일 시트가 사용된 문자 인코딩을 정의한다. css에 정의되어 있지 않으면 브라우저는 해당 스타일 시트를 불러온 HTML 문서에 정의된 인코딩을 사용한다. HTML에도 정의되어 있지 않다면 UTF-8이 기본값으로 사용된다.

4.2 스타일의 계층화와 상속의 이해

계층화와 상속은 브라우저가 엘리먼트를 보여줄 때 속성들에 어떤 값이 적용되어야 하는지 결정하는 방법이다. 각각의 엘리먼트는 브라우저가 페이지를 나타낼 때 사용하는 여러개의 CSS 속성을 가지고 있다. 브라우저는 각각의 엘리먼트 속성들이 가지고 있는 모든 스타일의 소스를 탐색해야한다.

브라우저 스타일의 이해

브라우저 스타일이란 브라우저가 다른 스타일이 정의되지 않았을 때 엘리먼트에 적용시키는 기본값의 스타일을 의미한다. 브라우저마다 약간씩 다르지만 대개는 거의 비슷하다. 브라우저는 모든 HTML 엘리먼트에 대해 기본 스타일을 가지고 있진 않다.

사용자 스타일의 이해

대부분의 브라우저에서는 사용자가 직접 자신의 스타일 시트를 정의할 수 있고 이를 ‘사용자 스타일’이라고 부른다. 크롬의 경우 사용자 프로필 디렉토리 안에 위치한 Default\User StyleSheets\Custom.css 라는 파일을 생성한다. 정의된 스타일은 브라우저에서 제공하는 기본 스타일을 덮어쓴다.

스타일 계층화에 대한 이해

브라우저가 엘리먼트를 화면에 나타낼 때 속성의 값을 참조하는 순서는 다음과 같다.

  1. 인라인 스타일(글로벌 style 속성을 사용하여 엘리먼트에 정의된 스타일)
  2. 내장 스타일(style 엘리먼트 안에 정의된 스타일)
  3. 외부 스타일(link 엘리먼트를 사용하여 불러온 스타일)
  4. 사용자 스타일(사용자에 의해 정의된 스타일)
  5. 브라우저 스타일(브라우저가 가지고 있는 기본 스타일)

중요 스타일의 순서 바꾸기

<style type="text/css">
a {
  color: black !important;
}
</style>

<a style="color: red" href="http://apress.com">Visit the Apress website</a>
<>

각각의 선언에 !important를 추가하면 개별 값의 중요도를 설정할 수 있다. 해당 속성이 어디에서 정의됐는지와 상관없이 중요 스타일을 우선 적용하게 된다. 위의 예제에선 내장 스타일의 color 속성이 인라인 스타일을 덮어쓴다. 예외적으로 사용자 스타일 시트에 정의된 중요 속성이 다른 곳에 정의된 중요 속성들보다 우선권을 가진다.

동일한 우선 순위 사이에 스타일 순서 결정하기

하나의 엘리먼트에 동일한 레벨에서 적용된 두 개의 스타일이 있고 두 개 전부 브라우저가 찾고 있는 값을 포함하고 있을 때 우선 순위는 동률이다. 아래 세 가지의 다른 특징을 계산해서 구체성을 평가하고 더 구체적인 스타일을 브라우저가 선택한다.

  1. 선택자가 가지고 있는 id 값의 개수
  2. 선택자가 가지고 있는 다른 속성 및 가상 클래스의 개수
  3. 선택자가 가지고 있는 엘리먼트 및 가상 엘리먼트의 개수
<style type="text/css">
      a {
        color: black;
      }
      a.myclass {
        color: white;
        background: grey;
      }
</style>

a.myclass의 구체성은 0-1-0이다. 첫 번째 0은 id 값의 개수, 1은 다른 속성값의 개수(클래스 속성), 0은 엘리먼트의 이름의 개수이다. 반면 a의 구체성은 0-0-0이다. 따라서 브라우저가 myclass라는 클래스에 할당된 엘리먼트를 표시할 때엔 color 속성 값을 a.myclass에서 찾는다.

<style type="text/css">
      a.myclass1 {
        color: black;
      }
      a.myclass2 {
        color: white;
        background: grey;
      }
</style>

위와 같이 구체성이 동등한 경우는 브라우저가 값이 정의된 순서에 따라 선택하므로 마지막에 정의된 값을 사용하게 된다. 즉, color 속성값으로 white를 선택할 것이다. 구체성의 정도와 정의된 순서에 따라 값을 선택하는 개념은 속성별로 독립적이다.

상속에 대한 이해

브라우저는 사용된 스타일들 안에서 어떤 속성의 값을 찾지 못할 때는 상속을 사용한다. 상속이란 속성의 값을 상위 엘리먼트에서 정의된 값을 가져오는 것을 말한다.

<style type="text/css">
  p {
    color: white;
    background: grey;
    border: medium solid black;
  }
</style>

...

<body>
<p>I like <span>apples</span> and oranges.</p>

위의 예제에서 span 엘리먼트에 적용된 color의 속성값은 문서 어디에도 정의되어 있지 않지만 브라우저는 p로부터 상속된 white 값을 사용한다. 물론 모든 CSS 속성이 상속되는 것은 아니다. 엘리먼트의 외형과 관련된 속성들(문자 색이나 폰트의 디테일 등)은 상속되며 페이지의 레이아웃에 관련된 속성들은 상속되지 않는다는 것이다. 스타일 안에 inherit 값을 넣으면 강제로 브라우저가 해당 속성의 상위 엘리먼트의 속성값을 상속시킨다.

<style type="text/css">
  p {
    color: white;
    background: grey;
    border: medium solid black;
  }
  span {
    border: inherit;
  }
</style>

4.3 CSS 컬러 사용하기

CSS에서는 매우 다양한 방식으로 컬러를 정의할 수 있다. 간단한 방법으로는 지정된 컬러의 이름을 사용하거나 독립적인 red, green, blue의 값을 십진수 또는 16진수로 정의하는 방법 중 하나를 사용할 수 있다. 16진수는 #FFFFFF와 같이 #를 붙여서 표현한다.

다양한 방법으로 컬러 정의하기

컬러의 이름과 16진수로 정의하는 방법 외에도 컬러를 선택할 수 있는 몇 가지 함수가 있다.

rgb(r, g, b) - RGB 모델
rgba(r, g, b, a) - RGB 모델 + 투명도
hsl(h, s, l) - HSL 모델
hsla(h, s, l, a) - HSL 모델 + 투명도

4.4 CSS에서 길이 이해하기

길이를 정의할 때는 단위와 숫자 사이에 빈 공간이나 다른 문자가 없이 그 둘을 붙여주어야 한다. CSS에는 길이를 정의하는 두 가지 방법이 있다. 절대 길이와 다른 속성에 대해 상대적인 상대 길이가 있다.

절대 길이 사용하기

CSS는 5종류의 절대단위를 지원한다. In, Cm, Mm, Pt, pc이다. 스타일 안에서 여러가지 단위를 사용할 수 있고 또한 절대단위와 상대단위도 섞어서 사용할 수 있다. 절대단위는 출력물을 디자인할 때와 같이 컨텐츠가 어떤 방식으로 보여질지 알고 있을 때 유용하다. 절대 단위를 잘 쓰진 않는데 실제 세계의 측정 단위에 상응해야 하는 컨텐츠를 만드는 일도 없고 상대 단위가 유지 보수하기에 더 쉽고 유연성이 있기 때문이다.

상대 길이 사용하기

상대 단위는 다른 단위에 의해서 측정되는 단위이다. |단위 표시|설명| |-----|-----| |em|엘리먼트의 폰트 크기에 상대적| |ex|엘리먼트의 x-높이에 상대적| |rem|root 엘리먼트의 폰트크기에 상대적| |px|CSS 픽셀의 개수(96dpi 디스플레이 기준)| |%|다른 속성 값에 대한 비율|

폰트 크기에 상대적으로 작업하기

상대 단위를 사용할 때는 다른 단위에 대하여 크기를 명확하게 지정해 주어야 한다.

<style type="text/css">
  p {
    background: grey;
    color: white;
    font-size: 15pt;
    height: 2em;
  }

위의 예제에서 높이 속성의 값은 2em으로 정의됐다. p 엘리먼트의 높이 속성이 화면에 표시될 때 폰트 크기의 2배가 되게 한다.

<style type="text/css">
  html {
    font-size: 0.2in;
  }
  p {
    background: grey;
    color: white;
    font-size: 2rem;
    height: 2em;
  }

rem은 HTML 엘리먼트(root 엘리먼트라고도 한다)의 폰트 크기에 상대적인 단위이다. 위의 예제에서는 style 엘리먼트에서 html 선택자로 폰트 크기를 절대값 0.2 인치로 정의했다. 인라인 스타일을 이용해서 html 엘리먼트의 style 속성을 직접 정의할 수도 있다. 위의 예에서 p 엘리먼트는 0.4인치 높이의 폰트를 사용할 것이다.

폰트 크기에 상대적인 세 번째 단위는 ex이다. 현재 사용하는 폰트의 x-height를 의미한다. 정확한 길이는 폰트의 베이스 라인으로부터 미들 라인까지의 거리이다. 일반적으로 이것은 소문자 x의 높이 정도이다. 1ex는 대략 0.5em이라는 것을 기억하면 좋다.

픽셀로 작업하기

픽셀이란 일반적으로 화면상에서 나타낼 수 있는 가장 작은 단위를 말한다. 그러나 CSS는 다소 다르게 픽셀을 정의한다.

러퍼런스 픽셀이란 보통 시선의 각도로 독자의 팔길이 정도 거리로부터 96pdi의 픽셀 밀도를 가진 장치에서 한 개의 픽셀을 보는 것을 말한다. 팔 길이를 기준으로 하는 규격이라 정의가 불명확하다. 다행스럽게도 주류 브라우저들은 CSS가 정의하는 픽셀과 화면의 픽셀 간의 차이를 무시하고 1픽셀을 1/96 인치로 다룬다.(이것은 윈도우의 표준 픽셀 밀도이다. 다른 픽셀 밀도를 가진 플랫폼의 브라우저들은 대략 1픽셀이 1/96인치 정도가 되도록 변환한다.)

결국 CSS 픽셀이 상대 단위로 의도됐지만 브라우저들은 절대 단위로 다루고 있다는 것이다. em 단위는 폰트 크기만 변경해도 나머지 스타일이 원활하게 변경되는 반면 CSS 픽셀은 실제 작업에서는 절대 단위로 사용된다. 따라서 결과적으로 유연성이 떨어질 수 있는 점을 기억해야 한다.

비율(%)로 작업하기
<style type="text/css">
  p {
    background: grey;
    color: white;
    font-size: 200%;
    height: 50%;
  }

비율을 단위로 사용할 땐 두 가지 어려움이 있다. 첫 번째는 모든 속성을 이 방식으로 표현할 수 없다는 점이다. 두 번째는 비율로 정의할 수 있는 속성들이 비율로 정의되는 다른 속성을 정의할 수 있다는 점이다. 예를 들어, font-size 속성은 상속된 폰트 크기의 값을 사용하고 속성이 포함된 블럭의 가로 길이를 참조하는 width 속성을 사용한다.

4.5 CSS 단위의 계산

<style type="text/css">
  p {
    background: grey;
    color: white;
    font-size: 20pt;
    width: calc(80% - 20px);
  }

calc 키워드와 괄호를 사용하여 계산식을 둘러싸는 방식을 사용한다. 다른 단위들이나 기본 산술도 수행할 수 있다.

16장

16.1 CSS 표준화의 이해

W3C는 하나의 거대한 표준을 만들기보다는 CSS3S를 모듈들로 쪼개어 각각의 모듈이 각각의 일정을 따르도록 했다. 이건 아주 좋은 방법이며 전체 표준을 한꺼번에 정하는 접근보다 분명히 좋은 점이 있다. 그러나 바꿔 말하면 CSS3 준수에 대한 전반적인 표준이 없다는 것이다. 대신에 각각의 모듈들이 사용하기에 충분히 넓은 지원을 받고 있는지 알아보고 결정해야 한다.

16.2 박스 모델 이해하기

CSS의 가장 중요한 컨셉 중 하나는 박스 모델이다. 하나의 엘리먼트에서 컨텐츠와 테두리(border), 두 가지가 보일 수 있다. 패딩이란 컨텐츠와 테두리 사이의 공간을 말한다. 마진은 테두리와 페이지 상에 있는 다른 엘리먼트 사이의 공간을 말한다. 엘리먼트는 다른 엘리먼트를 포함할 수 있다. 예제에서 상위 엘리먼트의 컨텍스트 박스는 하위 엘리먼트의 컨테이너 블럭으로 혹은 그냥 컨테이너로 알려져 있다.

box-sizing

content-box: 기본값

border-box: