CSS 값 과 단위

번역이 완료되지 않았습니다. Please help translate this article from English

CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위를 살펴 보겠습니다.

전제조건: 기본 컴퓨터 활용 능력, 기본 소프트웨어 설치파일 작업 에 대한 기본 지식,  HTML 기본 사항 (HTML 소개 학습) 및 , CSS 작동 방식 이해 (CSS 첫 번째 단계 학습)
목적: CSS 속성에 사용되는 다양한 유형의 값과 단위에 대해 배우기.

CSS 값이란 무엇인가?

CSS 사양과 MDN 의 속성 페이지에서 <color> 또는 <length>. 와 같이 꺽쇠 괄호로 묶여 있는 값을 찾을 수 있습니다. <color> 값이 특정 속성에 유효한 것으로 표시되면, <color> 참조 페이지에 나열된대로 유효한 속성을 해당 속성의 값으로 사용할 수 있습니다.

참고: CSS 값을 데이터 유형 이라고 합니다. 용어는 기본적으로 상호 교환이 가능합니다 — CSS 에서 데이터 유형이라고 하는것을 볼 때, 실제로 가치를 말하는 멋진 방법입니다.

참고: 예, CSS 값은 CSS 속성과 구별하기 위해, 꺽쇠 괄호를 사용하여 표시되는 경향이 있습니다 (예: color 속성, <color> 데이터 형식). CSS 데이터 형식과 HTML 요소도 꺽쇠 괄호를 사용하므로 혼동될 수 있지만, 이는 매우 다른 상황에서 사용됩니다.

다음 예제에서는 키워드를 사용하여 머리글의 색상을 설정하고, rgb() 함수를 사용하여 배경을 설정했습니다:

h1 { 
  color: black; 
  background-color: rgb(197,93,161); 
} 

CSS 값은 허용가능한 하위값 모음을 정의하는 방법입니다. 즉, <color> 가 유효한 것으로 표시되면 — 키워드, 16진수 값, rgb() 함수 등 어떤 색상값을 사용할 수 있는지 궁금할 필요가 없습니다. 사용 가능한 <color> 값은 브라우저에서 지원한다고 가정합니다. 각 값에 대한 MDN 페이지는 브라우저 지원에 대한 정보를 제공합니다. 예를 들어 <color> 페이지를 보면 브라우저 호환성 섹션에 다양한 색상값 유형과 지원이 나열되어 있습니다.

여러가지 가능한 값을 시험해 볼 수 있도록 예를 들어 자주 접할 수 있는 몇 가지 유형의 값과 단위를 살펴보겠습니다.

숫자, 길이 및 백분율

CSS 에서 사용할 수 있는 다양한 숫자 데이터 형식이 있습니다. 다음은 모두 숫자로 분류됩니다:

데이터 형식 설명
<integer> <integer> 은 1024 또는-55 와 같은 정수입니다.
<number> <number> 는 10진수를 나타냅니다 — 소수점 이하의 소수 자릿수 (예: 0.255, 128 또는 -1.2) 가 있을 수도 있고 없을 수도 있습니다.
<dimension> <dimension> 은 예를 들어 45deg, 5s 또는 10px. 과 같은 단위가 붙어있는 <number> 입니다. <dimension> 은 <length>, <angle>, <time> 및 <resolution> 의 종류를 포함하는 카테고리입니다.
<percentage> <percentage> 는 다른 값의 일부, 예를 들어 50% 를 나타냅니다. 백분율 값은 항상 다른 수량을 기준으로 합니다. 예를 들어 요소의 길이는 부모 요소의 길이를 기준으로 합니다.

길이

가장 자주 사용되는 숫자 형식은 <length> 입니다. 예를 들면 10px (픽셀) 또는30em. CSS 에서 사용되는 길이는 — 상대 및 절대의 두 가지 유형이 있습니다. 얼마나 커질지 알기 위해서는 차이를 이해하는 것이 중요합니다.

절대 길이 단위

다음은 모두 절대 길이 단위이며 — 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다.

단위 이름 다음과 동일함
cm 센티미터 1cm = 96px/2.54
mm 밀리미터 1mm = 1/10th of 1cm
Q 4분의 1 밀리미터 1Q = 1/40th of 1cm
in 인치 1in = 2.54cm = 96px
pc Picas 1pc = 1/16th of 1in
pt 포인트 1pt = 1/72th of 1in
px 픽셀 1px = 1/96th of 1in

이러한 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. 예를 들어 일반적으로 화면에 cm (센티미터) 를 사용하지 않습니다. 보통 사용하는 유일한 값은 px (픽셀) 입니다.

상대 길이 단위

상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있습니다. 웹 개발에 가장 유용한 단위가 아래 표에 나열되어 있습니다.

단위 관련 사항
em 요소의 글꼴 크기.
ex 요소 글꼴의 x-height.
ch 요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다.
rem 루트 요소의 글꼴 크기.
lh 요소의 라인 높이.
vw viewport 너비의 1%.
vh viewport 높이의 1%.
vmin viewport 의 작은 치수의 1%.
vmax viewport 의 큰 치수의 1%.

예제 살펴보기

아래 예에서 일부 상대 및 절대 길이 단위의 동작을 확인할 수 있습니다. 첫 번째 박스에는 width 픽셀 단위로 설정되어 있습니다. 절대 단위로서 이 너비는 다른 사항에 관계없이 동일하게 유지됩니다.

두 번째 박스의 너비는 vw (viewport 너비) 단위로 설정됩니다. 이 값은 viewport 너비를 기준으로 하므로, 10vw 는 viewport 너비의 10% 입니다. 브라우저 창의 너비를 변경하면, 박스의 크기가 변경되지만, 이 예제는 <iframe> 을 사용하여 페이지에 포함되므로 작동하지 않습니다. 이 기능을 실제로 보려면 브라우저 탭에서 예제를 연 후 에 시도 해야 합니다.

세 번째 박스는 em 단위를 사용합니다. 글꼴 크기에 상대적입니다. .wrapper class 를 포함하는 <div> 를 포함하여 글꼴 크기를 1em 으로 설정했습니다. 이 값을 1.5em 으로 변경하면 모든 요소의 글꼴 크기가 증가하지만, 너비가 해당 글꼴 크기에 비례하므로 마지막 항목만 넓어집니다.

위의 지침을 따른 후 다른 방법으로 값을 실습하여 얻은 것을 확인하십시오.

ems 및 rems

em 과 rem 은 박스에서 텍스트로 크기를 조정할 때 가장 자주 발생하는 두 개의 상대 길이입니다. 텍스트 스타일링 또는 CSS 레이아웃 과 같은 보다 복잡한 주제를 시작할 때, 이러한 작동 방식과 차이점을 이해하는 것이 좋습니다. 아래 예제는 데모를 제공합니다.

HTML 은 중첩된 목록의 집합니다 — 총 3개의 목록이 있으며 두 예제 모두 동일한 HTML 을 갖습니다. 유일한 차이점은 첫 번째는 ems class 이고 두 번째는 rems class 입니다.

먼저, <html> 요소에서 글꼴 크기로 16px 를 설정합니다.

다시 말해서, em 단위는 "부모 요소의 글꼴 크기" 를 의미합니다. ems class 가 있는 <ul> 내부의 <li> 요소는 부모로부터 크기를 가져옵니다. 따라서 각 중첩 부분은 글꼴 크기가 부모 글꼴 크기의 1.3em — 1.3 배로 설정되므로 점점 더 커집니다.

다시 말해서, rem 단위는 "루트 요소의 글꼴 크기" 를 의미합니다. ("root em" 의 rem 표준입니다.) rems class 가 있는 <ul> 내부의 <li> 요소는 루트 요소는 (<html>) 에서 크기를 가져옵니다. 이것은 각각의 연속적인 중첩 부분이 계속 커지는 것을 의미합니다.

그러나, CSS 에서 <html> font-size 를 변경하면 다른 모든 텍스트가 변경되는 것을 볼 수 있습니다 — rem- 및 em-크기 텍스트.

 

백분율

많은 경우 백분율은 길이와 같은 방식으로 처리됩니다. 백분율이 있는 것은 항상 다른 값에 상대적으로 설정된다는 것입니다. 예를 들어, 요소의 font-size 를 백분율로 설정하면요소 무보의 글꼴 크기에 대한 백분율이 됩니다. width 값에 백분율을 사용하면, 부모 너비의 백분율이 됩니다.

아래 예제에서 두 개의 백분율 크기 박스와 두 개의 픽셀 크기 박스는 동일한 class 이름을 갖습니다. 두 세트의 너비는 각각 200px 및 40% 입니다.

차이점은 두 박스의 두 번째 세트가 너비가 400 픽셀 안에 있다는 것입니다. 두 번째 200px 너비의 박스는 첫 번째 너비와 동일한 너비이지만, 두 번째 40% 박스는 이제 400px 의 40% 이므로 — 첫 번째 박스보다 훨씬 좁습니다!

너비 또는 백분율 값을 변경하여 작동 방식을 확인합니다.

 

다음 예제에서는 글꼴 크기가 백분율로 설정되어 있습니다. 각 <li> 의 font-size 는 80% 이므로, 중첩된 목록 항목은 부모로부터 크기를 상속함에 따라 점차 작아집니다.

 

많은 값이 길이 또는 백분율을 허용하지만, 길이만 허용하는 값도 있습니다. MDN 속성 참조 페이지에서 어떤 값이 허용되는지 확인할 수 있습니다. 허용된 값에 <length-percentage> 가 포함된 경우 길이 또는 백분율을 사용할 수 있습니다. 허용된 값에 <length> 만 포함된 경우, 백분율을 사용할 수 없습니다.

숫자

일부 값은 단위를 추가하지 않고 숫자를 허용합니다. 단위가 없는 숫자를 허용하는 속성의 예는 요소의 불투명도 (투명한 정도) 를 제어하는 opacity 속성입니다. 이 속성은 0 (완전 투명) 과 1 (완전 불투명) 사이의 숫자를 허용합니다.

아래 예제에서, opacity 값을 0 과 1 사이의 다양한 10진수 값으로 변경하고 박스와 그 내용이 어떻게 붙투명하게 되는지 확인하십시오.

 

참고: CSS 에서 숫자를 값으로 사용하는 경우 따옴표로 묶지 않아야합니다.

색상

CSS 에서 색상을 지정하는 방법은 여러가지가 있으며, 그 중 일부는 다른것 보다 최근에 구현되었습니다. 텍스트 색상, 배경 색상 등을 지정하든 상관없이 CSS 의 모든 위치에서 동일한 색상 값을 사용할 수 있습니다.

최신 컴퓨터에서 사용할 수 있는 표준 색상 시스템은 24bit 이며, 채널당 256개의 서로 다른 값 (256 x 256 x 256 = 16,777,216.) 을 갖는 서로 다른 빨강, 녹색 및 파랑 채널의 조합을 통해 약 1670만개의  고유한 색상을 표시할 수 있습니다. CSS 에서 색상을 지정할 수 있는 몇 가지 방법을 살펴보겠습니다.

참고: 이 자습서에서는 브라우저 지원 기능이 우수한 색상을 지정하는 일반적인 방법을 살펴봅니다. 다른 것도 있지만, 지원 기능이 뛰어나지 않고 덜 일반적입니다.

색상 키워드

여기의 학습 섹션이나 MDN 의 다른 예에서 색상 키워드를 지정하는 간단하고 이해하기 쉬운 방법인 색상 키워드를 볼 수 있습니다. 이 키워드에는 여러가지가 있으며 그중 일부는 상당히 재미있는 이름을 가지고 있습니다! <color> 값에 대한 전체 목록을 페이지에서 볼 수 있습니다.

아래의 라이브 예제에서 다른 색상 값을 사용하여 작동하는 방법에 대한 아이디어를 얻으십시오.

16진수 RGB 값

다음 형식의 색상 값은 16진수 코드입니다. 각 16진수 값은 hash/pound 기호 (#) 와 6개의 16진수로 구성되며, 각 16진수는 0 과 f (15를 나타냄) 사이의 16개 값 중 하나를 사용할 수 있으므로 — 0123456789abcdef 입니다. 각 값 쌍은 채널 중 하나 — 빨강, 녹색 및 파랑 — 을 나타내며 각각에 대해 256개의 사용 가능한 값 (16 x 16 = 256) 을 지정할 수 있습니다.

이 값은 좀 더 복잡하고 이해하기 쉽지 않지만 기워드보다 훨씬 더 다양합니다 — 16진수 값을 사용하여 색상표에 사용하려는 색상을 나타낼 수 있습니다.

 

다시 한 번, 값을 변경하여 색상이 어떻게 다른지 확인하십시오. 

RGB 및 RGBA 값

여기서 이야기 할 세 번째 방식은 RGB 입니다. RGB 값은 — rgb() 함수입니다 — 이 값은 16진수 값과 거의 같은 방식으로 색상의 빨강, 녹색 및 파랑 채널 값을 나타내는 세 개의 매개 변수가 제공됩니다. RGB 와의 차이점은 각 채널이 2개의 16진수가 아니라 0 과 255 사이의 10진수로 표현되어 — 다소 이해하기 쉽다는 것입니다.

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

 

RGBA 색상을 사용할 수도 있습니다 — 이 색상은 RGB 색상과 정확히 같은 방식으로 작동하므로 RGB 값을 사용할 수 있지만, 색상의 알파 채널을 나타내는 네 번째 값이 있어 불투명도 (opacity) 를 제어합니다. 이 값을 0 으로 설정하면 색상이 완전히 투명해지는 반면, 1 이면 완전히 불투명하게 됩니다. 그 사이의 값은 다른 수준의 투명성을 제공합니다.

참고: 색상에 알파 채널을 설정하면 앞에서 살펴본 opacity 속성을 사용하는 것과 한 가지 중요한 차이점이 있습니다. 불투명도를 사용하면 요소와 그 안에 있는 모든 것을 불투명하게 만드는 반면, RGBA 색상을 사용하면 불투명하게 지정한 색상만 만들어집니다.

아래 예제에서 나는 색상 박스가 포함된 블록에 배경 이미지를 추가했습니다. 그런 다음 박스에 다른 불투명도 값을 갖도록 설정했습니다 — 알파 채널 값이 작을 때 배경이 더 잘 나타나는지 확인하십시오.

이 예에서는, 알파 채널 값을 변경하여 색상 출력에 어떤 영향을 미치는지 확인하십시오.

참고: 어떤 시점에서 최신 브라우저는 rgba() 와 rgb() 및 hsl() 과 hsla() (아래 참조) 가 서로의 순수 별칭이 되어 정확히 동일한 동작을 시작하도록 업데이트 되었습니다. 예를 들어rgba() 및 rgb() 는 모두 알파 채널 값이 있거나 없는 색상을 허용합니다. 위 예제의 rgba() 함수를 rgb() 로 변경하고 색상이 여전히 작동하는지 확인하십시오! 어떤 스타일을 사용하느냐에 따라 다르지만, 다른 기능을 사용하기 위해 불투명과 투명한 색상 정의를 분리하면 브라우저 지원이 약간 향상되고 코드에서 투명 색상이 정의되는 위치를 시각적으로 표시할 수 있습니다.

HSL 및 HSLA 값

RGB 보다 약간 덜 지원되는 HSL 색상은 (이전 버전의 IE 에서는 지원되지 않음) 디자이너의 관심을 끈 후에 구현되었습니다. hsl() 함수는 빨강, 녹색 및 파랑 값 대신 색조 (hue), 채도 (saturation) 및 명도(lightness) 값을 받아들입니다. 이 값은 1670만 가지 색상을 구별하는 데 사용되지만 다른 방식으로 사용됩니다.

  • 색조 (Hue): 색상의 기본 음영입니다. 0 에서 360 사이의 값을 사용합니다.
  • 채도 (Saturation): 색상이 얼마나 포함되어 있습니까? 0–100% 사이의 값을 취합니다. 여기서 0은 색상이 없고 (회색 음영으로 표시됨), 100% 는 전체 색상 채도입니다.
  • 명도 (Lightness): 색상이 얼마나 밝습니까? 0–100% 의 값을 받습니다. 여기서 0은 빛이 없고 (완전히 검은색으로 표시됨), 100% 는 완전한 빛 (완전히 흰색으로 표시됨) 입니다.

다음과 같이 HSL 색상을 사용하도록 RGB 예제를 업데이트 할 수 있습니다:

 

RGB 에 RGBA 가 있는 것처럼, HSL 에는 HSLA 에 상응하는 것이 있으므로, 알파 채널을 지정할 수 있는 동일한 기능을 제공합니다. HSLA 색상을 사용하도록 RGBA 예제를 변경하여 아래에서 이것을 시연했습니다.

 

여러분의 프로젝트에서 이러한 색상 값을 사용할 수 있습니다. 대부분의 프로젝트에서 색상 팔레트를 결정한 다음 전체 프로젝트에서 해당 색상 — 선택한 색상 지정 방법 — 을 사용합니다. 색상 모델을 혼합하고 일치시킬 수 있지만, 일관성을 유지하려면 전체 프로젝트에서 동일한 모델을 사용하는 것이 가장 좋습니다!

이미지

<image> 데이터 형식은 이미지가 유효한 값인 경우 사용됩니다. 이것은 url() 함수 또는 gradient 를 통해 가리키는 실제 이미지 파일일 수 있습니다.

아래 예제에서 CSS background-image 속성의 값으로 사용되는 이미지와 gradient 를 보여주었습니다.

 

참고: <image> 에 대해 가능한 다른 값이 있지만 이 값은 최신이며 최신 브라우저 지원이 좋지 않습니다. <image> 데이터 형식을 읽으려면 MDN 페이지에서 <image> 데이터 형식을 확인하십시오.

위치 (Position)

<position> 데이터 형식은 배경 이미지 (background-position 를 통해) 와 같은 항목을 배치하는 데 사용되는 2D 좌표를 나타냅니다. top, left, bottom, right 및 center 와 같은 키워드를 사용하여 항목을 2D 박스의 특정 범위에 맞춰 길이와 함께 박스의 위쪽 및 왼쪽 가장자리에서 offset 을 나타냅니다.

일반적인 position 값은 두 가지 값으로 구성됩니다 — 첫 번째는 위치를 가로로 설정하고, 두 번째는 세로로 설정합니다. 한 축의 값만 지정하면 다른 축은 center 으로 설정됩니다.

다음 예제에서는 키워드를 사용하여 container 의 위쪽과 오른쪽에서 40px 의 배경 이미지를 배치했습니다.

 

이 값을 가지고 놀면서 이미지를 어떻게 밀어낼 수 있는지 확인하십시오.

문자열 및 식별자 (identifiers)

위의 예에서, 키워드가 값으로 (예: red, black, rebeccapurple 및 goldenrod, 와 같은 <color> 키워드) 사용되는 위치를 확인했습니다. 이러한 키워드는 CSS 가 이해하는 특수한 값인 식별자 (identifiers) 로, 보다 정확하게 설명됩니다. 따라서 인용되지 않으며 — 문자열로 취급되지 않습니다.

CSS 에서 문자열을 사용하는 장소가 있습니다. 예를 들면, 생성된 콘텐츠를 지정할 때. 이 경우 값은 문자열임을 보여주기 위해 인용됩니다. 아래 예제에서는 인용되지 않은 색상 키워드와 인용된 생성된 콘텐츠 문자열을 사용합니다.

 

함수 (Functions)

우리가 살펴볼 마지막 값의 형식은 함수로 알려진 값의 그룹입니다. 프로그래밍에서 함수는 개발자와 컴퓨터 모두에서 최소한의 노력으로 반복적인 작업을 완료하기 위해 여러번 실행할 수 있는 재사용 가능한 코드 섹션입니다. 함수는 일반적으로 JavaScript, Python 또는 C++ 과 같은 언어와 관련이 있지만, 속성 값으로 CSS 에도 존재합니다 — rgb(), hsl() 등의 색상 섹션에서 작동하는 함수를 이미 보았습니다. 파일에서 이미지를 반환하는 데 사용되는 값인 — url() — 도 함수입니다.

전통적인 프로그래밍 언어에서 찾아볼 수 있는 것과 비슷한 값은 calc() CSS 함수입니다. 이 함수를 사요하면 CSS 내에서 간단한 계산을 수행할 수 있습니다. 프로젝트의 CSS 를 작성할 때 정의할 수 없는 값을 계산하고 런타임에 브라우저가 작동해야하는 경우 특히 유용합니다.

예를 들어, 아래에서는 calc() 를 사용하여 박스를 20% + 100px 너비로 만듭니다. 20% 는 부모 container .wrapper 의 너비에서 계산되므로 너비가 변경되면 변경됩니다. 우리는 부모 요소의 20% 가 무엇인지 알지 못하기 때문에, 이 계산을 미리 수행할 수 없으므로 calc() 를 사용하여 브라우저에 지시합니다.

요약

이것은 가장 일반적인 형식의 값과 단위를 빠르게 살펴 보았습니다. CSS 값 및 단위 참조 페이지에서 다양한 유형을 모두 볼 수 있습니다. 이 수업을 진행하면서 사용중인 많은 것들을 보게 될 것입니다.

기억해야 할 중요한 점은 각 속성에 정의된 값 목록이 있고 각 값에는 하위 값이 무엇인지 설명하는 정의가 있다는 것입니다. 그런 다음 MDN 에서 세부 사항을 찾을 수 있습니다.

예를 들어, <image> 를 사용하면 색상 gradient 를 만들 수 있다는 점을 이해하면 유용하지만 명백하지 않은 지식이 있을 수 있습니다!

이번 강의에서는

  1. 계단식 및 상속
  2. CSS 선택자
  3. 박스 모델
  4. 배경 및 테두리
  5. 다른 텍스트 방향 처리
  6. 콘텐츠 overflow
  7. 값 과 단위
  8. CSS 에서 항목 크기 조정
  9. 이미지, 미디어 및 양식 요소
  10. 표 스타일링
  11. CSS 디버깅
  12. CSS 정리