이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

숫자 값에서 색상, 복잡한 함수(배경 이미지, 요소 회전 등)까지, CSS 속성의 값에는 고려해야 할 수많은 값이 존재합니다. 일부는 정확한 값을 지정하려면 특정 단위도 사용해야 합니다. 상자의 너비가 30 픽셀인가요, 30 센티미터인가요, 아니면 30 em인가요? 이번 안내서에서는 길이, 색, 간단한 함수 등 많이 쓰이는 값부터 각도와 단위 없는 숫자 등 조금 덜 쓰이는 값도 살펴봅니다.

전제 조건: 기본적인 컴퓨터 능력, 기본적인 소프트웨어 설치파일 조작의 기본적인 지식, HTML 기본 (HTML 소개 학습), CSS의 작동 방식.
목표: 제일 흔히 쓰이는 CSS 속성 값의 유형과 연관된 단위를 배우는 것.

CSS의 수많은 값 유형에는 매우 흔한 것도, 거의 보기 힘든 것도 있습니다. 이 글에서 모두 꺼내진 않고, CSS 숙련자가 되는 길에 제일 도움이 될 만한 종류만 알아보겠습니다. 다음과 같은 CSS 값을 다루겠습니다.

  • 숫자: 요소 너비, 테두리 굵기, 글꼴 크기 등 길이 값을 정할 때나, 상대적인 줄 간격 높이, 애니메이션 재생 횟수 등 단위 없는 정수 값에 사용합니다.
  • 백분율: 부모 컨테이너의 너비나 높이에, 아니면 기본 글꼴 크기에 상대적으로 크기나 길이를 정할 수 있습니다.
  • 색: 배경과 글꼴 색 등을 지정할 때 사용합니다.
  • 좌표 위치: 화면을 기준으로 위와 왼쪽에서 상대적인 위치 등 요소 배치에 사용합니다.
  • 함수: 배경 이미지나 배경 그라데이션 등을 넣을 때 사용합니다.

이런 단위는 CSS 주제의 나머지 글은 물론 CSS를 다루는 다른 모든 곳에서 찾을 수 있습니다. 곧 익숙해지실 거예요.

참고: CSS 참고서에서 CSS 단위의 완전한 목록을 찾을 수 있습니다. 단위는 <color>처럼 꺾쇠가 둘러싼 항목입니다.

숫자 값

숫자는 CSS 단위의 여기저기에서 볼 수 있습니다. 이 단원에선 가장 흔히 쓰이는 숫자 값의 사용 예를 다룹니다.

길이와 크기

레이아웃과 타이포그래피 등 CSS에서 항상 쓰는 값이 길이/크기 단위(<length>를 참고하세요)입니다. 간단한 예시를 보도록 하겠습니다. 우선 HTML은,

<p>문단입니다.</p>
<p>문단입니다.</p>
<p>문단입니다.</p>

그리고 CSS는,

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

결과는 다음과 같습니다.

예제 코드에서 한 일을 나열해보면,

  • 모든 문단의 margin, paddingborder-width을 각각 5픽셀, 10픽셀, 2픽셀로 설정합니다. 마진/패딩에 하나의 값을 넣으면 네 방향의 값을 모두 동일하게 설정합니다. 테두리 너비는 border 단축 속성의 일부로 포함되어 있습니다.
  • 각 문단의 width를 점점 더 커지는 픽셀 값으로 설정합니다. 즉 아래로 갈 수록 문단 박스가 길어집니다.
  • 각 문단의 font-size를 점점 더 커지는 픽셀 값으로 설정합니다. 즉 아래로 갈 수록 글씨 크기가 커집니다. font-size는 각 문자의 높이를 의미합니다.

픽셀(px)은 환경에 영향을 받지 않고 언제나 같은 크기를 가지기 때문에 절대 단위라고 부릅니다. 다른 절대 단위는 다음과 같습니다.

  • q, mm, cm, in: 1/4 밀리미터, 밀리미터, 센티미터, 인치
  • pt, pc: 포인트(1/72 인치), 피카스 (12 포인트)

픽셀을 제외하면 사용할 일이 거의 없습니다.

현재 요소의 font-size뷰포트의 영향을 받는 상대 단위도 있습니다.

  • em: 1em은 현재 요소의 font-size와 같습니다(더 정확히 말하면, 영문 대문자 M의 너비와 같습니다). 웹페이지의 CSS 적용 전 기본 font-size는 16픽셀이므로 1 em도 기본값은 16픽셀과 같습니다. 그러나, 글씨 크기는 상속하는 속성이므로 현재 요소의 부모 글씨 크기가 16픽셀이 아니라면 현재 요소의 em 값도 다른 값이 되어 점점 복잡해질 수 있습니다. 지금은 그렇게 신경쓰지 마세요. 상속과 글씨 크기에 대해선 나중에 더 다룰 기회가 있을테니까요. 앞으로 가장 많이 사용할 상대 속성이 em일겁니다.
  • ex, ch: 각각 영문 소문자 x의 높이, 숫자 0의 너비를 뜻합니다. em만큼 많이 쓰이지 않고 브라우저 호환성도 낮습니다.
  • rem: rem(root em)은 em과 똑같습니다. 언제나 기본 font-size 값을 사용한다는 점 빼구요. 따라서 글씨 크기 상속의 영향을 받지 않습니다. em보다 훨씬 좋은 선택지처럼 보이지만, 오래 된 Internet Explorer에선 사용할 수 없습니다. CSS 디버깅에서 크로스 브라우저 지원을 더 알아볼 수 있습니다.
  • vw, vh: 각각 뷰포트 너비의 1/100, 뷰포트 높이의 1/100입니다. rem보다 호환성이 좋지 않습니다.

상대 단위는 꽤 유용합니다. HTML 요소의 크기를 글씨 크기나 뷰포트에 크기에 상대적으로 맞춰줄 수 있어서 시력이 좋지 않은 사용자가 글씨 크기를 두 배로 설정해도 레이아웃이 깨지지 않으니까요.

단위 없는 값

어떨 때는 CSS에서 단위 없는 숫자 값을 만날 때도 있습니다. 항상 오타인건 아니고, 사실 어떤 상황에서는 완벽하게 유효합니다. 예컨대 margin이나 padding을 요소에서 제거하려면 단위 없이 그냥 0을 사용하세요. 단위에 상관 없이 0은 0이니까요!

margin: 0;

단위 없는 줄 높이

다른 예시는 line-height로, 글 한 줄의 높이(줄 간격)를 설정하는 속성입니다. 단위를 붙여서 정확한 값을 설정할 수도 있지만 숫자만 사용하는게 보통 쉽습니다. 단위가 없으면 계수로 작용합니다. 예를 들어보겠습니다.

<p>국가는 농지에 관하여 경자유전의 원칙이 달성될 수 있도록 노력하여야 하며, 농지의 소작제도는 금지된다.
국가는 재해를 예방하고 그 위험으로부터 국민을 보호하기 위하여 노력하여야 한다. 대통령은 국무회의의 의장이
되고, 국무총리는 부의장이 된다. 군인은 현역을 면한 후가 아니면 국무위원으로 임명될 수 없다. 타인의 범죄행위로
인하여 생명·신체에 대한 피해를 받은 국민은 법률이 정하는 바에 의하여 국가로부터 구조를 받을 수 있다.</p>

다음은 CSS입니다.

p {
  line-height: 1.5;
}

결과는 다음과 같습니다.

font-size가 16픽셀이므로 줄 높이는 1.5배인 24픽셀입니다.

애니메이션 횟수

CSS 애니메이션은 페이지의 HTML 요소를 움직이게 할 수 있습니다. 마우스를 올리면 문단이 회전하는 간단한 예시를 보겠습니다. HTML은 간단합니다.

<p>Hello</p>

CSS는 약간 복잡합니다.

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

이 글에서 직접 다루지 않는 여러 단위(<angle>, <time>, <timing-function>, <string> 등)를 보실 수 있지만, 관심을 가져야 하는 부분은 animation-iteration-count: 5;입니다. 이 속성은 애니메이션이 시작한 후(여기서는 문단에 마우스를 올렸을 때) 애니메이션을 재생할 횟수를 설정하고, 단위 없는 온전한 수(정수)를 받습니다.

예시의 결과는 다음과 같습니다.

백분율

특정 숫자 값을 받는 많은 속성은 백분율 값도 받을 수 있습니다. 백분율을 사용하는 예시 중 하나로 언제나 부모 컨테이너 너비의 일정 비율을 차지하는 요소를 만들 수 있습니다. 반면 고정 단위 값(pxem 등)은 부모 컨테이너의 너비가 변하더라도 언제나 주어진 값, 즉 처음 설정한 너비를 유지합니다.

예시를 살펴보겠습니다.

우선 HTML에선 비슷하게 생긴 상자를 준비합니다.

<div>
  <div class="boxes">픽셀을 사용한 고정 너비</div>
  <div class="boxes">백분율을 사용한 유동 너비</div>
</div>

두 상자에 CSS를 입힙니다.

div .boxes {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

.boxes:nth-child(1) {
  background-color: red;
  width: 650px;
}

.boxes:nth-child(2) {
  background-color: blue;
  width: 75%;
}

결과는 다음과 같습니다.

위 예제는 두 상자(<div>) 모두에 margin, height, font-size, border, color 속성을 설정합니다. 다음으로는 서로 구별하기 쉽게 첫 번째와 두 번째 상자에 서로 다른 background-color를 입힙니다. 또 첫 번째 상자는 width를 650px로, 두 번째의 너비를 75%로 지정합니다. 이로 인해 첫 번째 상자는 뷰포트 크기가 달라져도 같은 너비를 유지하다가 화면이 일정 너비보다 좁아지면 화면 밖으로 나가 잘리기도 합니다. 반면 두 번째 상자는 언제나 부모 너비의 75%를 유지합니다. 여기서 상자의 부모는 <body> 요소이고, 기본 너비는 뷰포트의 100%입니다.

참고: 브라우저 창 크기를 바꾸면서 실시간으로 확인할 수 있습니다. Github에 올라가있는 예제만으로도 시험해보세요.

font-size 역시 백분율 값인 200%로 설정했습니다. 글씨 크기는 너비를 사용하지 않고, 마치 em처럼 부모의 글씨 크기에 상대적인 크기를 갖게 됩니다. 이번 경우, 부모는 기본값인 16픽셀을 갖고 있으므로 계산한 값은 그 200%인 32픽셀이 됩니다. 사실 em과 매우 유사합니다. 200%2em과 같아요.

예제에서 살펴본 박스 레이아웃을 각각 고정 너비 레이아웃(브라우저 뷰포트에 상관 없이 같은 형태)와 유동 레이아웃(뷰포트에 따라 변화함)이라고 부르며 각자 맞는 용도가 있습니다.

  • 유동 레이아웃을 사용해 기본적인 문서가 화면에 언제나 맞도록 하여 다양한 모바일 장치에서 적당히 괜찮아 보이도록 할 수 있습니다.
  • 고정 레이아웃을 사용해 온라인 지도를 같은 너비로 고정할 수 있습니다. 사용자는 브라우저 뷰포트를 사용해 지도를 스크롤하며 한 번에 지도 일부분만 보게 됩니다. 볼 수 있는 크기는 뷰포트 크기에 따라 달라집니다.

실습: 길이와 함께

For this active learning, there are no right answers. We'd simply like you to have a go at playing with the width/height of the .inner and .outer divs to see what effects the different values have. Try a percentage value for the .inner div, and see how it adjusts as the .outer div's width changes. Try some fixed values as well, such as pixels and ems.

If you make a mistake, you can always reset it using the Reset button.

There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.

The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel  (256 x 256 x 256 = 16,777,216.)

Let's run through the different available types of color value.

참고: 아래에 등장할 많은 색상계끼리 변환하려면 적절한 변환기가 필요합니다. 온라인에서 이렇게 생긴 무료 변환기를 많이 찾을 수 있습니다.

키워드

The simplest, oldest color types in CSS are the color keywords. These are specific strings representing particular color values. For example, the following code:

<p>이 문단은 빨간 배경을 가지고 있습니다.</p>
p {
  background-color: red;
}

Gives this result:

This is easy to understand, although it only really allows us to specify obvious color primitives. There are around 165 different keywords available for use in modern web browsers — see the full color keyword list.

You'll probably use pure colors like red, black and white regularly in your work, but beyond that you'll want to use another color system.

16진수 값

The next ubiquitous color system is hexadecimal colors, or hex codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take a value between 0 and f (which represents 15) — so 0123456789abcdef. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)  

So, for example, this code:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: #ff0000;
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: #0000ff;
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: #e0b0ff;
}

Gives the following result:

These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.

RGB

The third scheme we'll talk about here is RGB. An RGB value is a function — rgb() — which is given three parameters that represent the red, green and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255.

Let's rewrite our last example to use RGB colors:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

This gives the following result:

The RGB system is nearly as well supported as hex values — you probably won't come across any browsers that don't support them in your work. The RGB values are arguably a bit more intuitive and easy to understand than hex values too.

참고: 왜 1에서 256이 아니라 0에서 255일까요? 컴퓨터 시스템에서 숫자를 셀 뗀 보통 1이 아니라 0부터 시작합니다. 그래서 256개의 값을 넣기 위해 RGB 색의 범위는 0부터 255가 됐습니다.

HSL

Slightly less well supported than RGB is the HSL model (not on old versions of IE), which was implemented after much interest from designers — instead of red, green and blue values, the hsl() function accepts 색조, 채도, and 명도 values, which are used to distinguish between the 16.7 million colors, but in a different way:

  1. 색조(Hue): the base shade of the color. This takes a value between 0 and 360, presenting the angles round a color wheel.
  2. 채도(Saturation): how saturated is the color? This takes a value from 0-100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation
  3. 명도(Lightness): how light or bright is the color? This takes a value from 0-100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)

참고: HSL 원기둥을 보면 HSL 색 모델이 어떻게 이뤄졌는지 쉽게 알 수 있습니다. 위키백과의 항목을 참고하세요.

Now we'll rewrite our example to use HSL colors:

<p>이 문단은 빨간 배경을 가지고 있습니다.</p>
<p>이 문단은 파란 배경을 가지고 있습니다.</p>
<p>이 문단은 분홍빛 라일락 느낌의 배경을 가지고 있습니다.</p>
/* red 키워드와 동일 */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}

/* blue 키워드와 동일 */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}

/* 동일한 키워드 없음 */
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

Gives the following result:

The HSL color model is intuitive to designers that are used to working with such color models. It is useful for, for example, finding a set of shades to go together in a monochrome color scheme:

/* 빨강의 세 가지 그림자 */
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA와 HSLA

RGB and HSL both have corresponding modes — RGBA and HSLA — that allow you to set not only what color you want to display, but also what transparency you want that color to have. Their corresponding functions take the same parameters, plus a fourth value in the range 0–1 — which sets the transparency, or alpha channel. 0 is completely transparent, and 1 is completely opaque.

Let's show another quick example — first the HTML:

<p>이 문단은 반투명 빨간 배경을 가지고 있습니다.</p>
<p>이 문단은 반투명 파란 배경을 가지고 있습니다.</p>

Now the CSS — here we are moving the first paragraph downwards with some positioning, to show the effect of the paragraphs overlapping (you'll learn more about positioning later on):

p {
  height: 50px;
  width: 350px;
}

/* Transparent red */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
  position: relative;
  top: 30px;
  left: 50px;
}

/* Transparent blue */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

This is the result:

Transparent colors are very useful for richer visual effects — blending of backgrounds, semi-transparent UI elements, etc.

참고: CSS에서의 위치는 다른 과정에서 다룹니다.

투명도

There is another way to specify transparency via CSS — the opacity property. Instead of setting the transparency of a particular color, this sets the transparency of all selected elements and their children. Again, let's study an example so we can see the difference.

<p>이 문단은 투명도로 RGBA를 사용합니다.</p>
<p>이 문단은 투명도로 opacity 속성을 사용합니다.</p>

Now the CSS:

/* Red with RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}

/* Red with opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

This is the result:

Note the difference — the first box that uses the RGBA color only has a semi-transparent background, whereas everything in the second box is transparent, including the text. You'll want to think carefully about when to use each — for example RGBA is useful when you want to create an overlaid image caption where the image shows through the caption box but the text is still readable. Opacity, on the other hand, is useful when you want to create an animation effect where a whole UI element goes from completely visible to hidden.

실습: 색과 함께

This active learning session also has no right answers — we'd just like you to alter the background color values of the three boxes below that are slightly overlaid on top of one another. Try keywords, hex, RGB/HSL/RGBA/HSLA, and the opacity property. See how much fun you can have.

If you make a mistake, you can always reset it using the Reset button.

함수

In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section, with rgb(), hsl(), etc.:

background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

These functions calculate what color to use.

But you'll see functions in other places too — anytime you see a name with parenthesis after it, containing one or more values separated by commas, you are dealing with a function. For example:

/* 45도 회전한 후의 위치를 계산 */
transform: rotate(45deg);
/* 옆으로 50픽셀, 아래로 60픽셀 이동한 후의 위치를 계산 */
transform: translate(50px, 60px);
/* 현재 너비의 90%에서 15픽셀을 뺀 값을 계산 */
width: calc(90% - 15px);
/* 배경으로 사용할 이미지를 네트워크에서 가져옴 */
background-image: url('myimage.png');

There are many exciting bits of functionality to use within CSS, which you'll learn about in due course!

정리

We hope you enjoyed learning about CSS values and units — don't worry if this doesn't all make complete sense right now; you'll get more and more practice with this fundamental part of CSS syntax as you move forward!

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656
최종 변경자: urty5656,