From ee778d6eea54935fd05022e0ba8c49456003381a Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:24 +0100 Subject: unslug ko: move --- files/ko/web/css/css_values_and_units/index.html | 497 +++++++++++++++++++++++ 1 file changed, 497 insertions(+) create mode 100644 files/ko/web/css/css_values_and_units/index.html (limited to 'files/ko/web/css/css_values_and_units') diff --git a/files/ko/web/css/css_values_and_units/index.html b/files/ko/web/css/css_values_and_units/index.html new file mode 100644 index 0000000000..94d8ceabd6 --- /dev/null +++ b/files/ko/web/css/css_values_and_units/index.html @@ -0,0 +1,497 @@ +--- +title: CSS 단위와 값 +slug: Web/CSS/CSS_단위와_값 +tags: + - CSS + - 값과 단위 + - 안내서 + - 참조 +translation_of: Web/CSS/CSS_Values_and_Units +--- +
{{CSSRef}}
+ +

모든 CSS 선언은 속성 / 값 쌍을 포함합니다. 속성에 따라 값은 하나의 정수 또는 키워드, 여러 개의 키워드, 단위가 있거나 없는 값의 나열이 될 수 있습니다. CSS 속성에 허용되는 공통적인 자료형(단위와 값)의 집합이 있습니다. 아래는 이들 자료형 대부분에 대한 개요입니다. 더 자세한 정보를 보려면 각 자료형의 페이지를 참고하세요.

+ +

텍스트 자료형

+ + + +

텍스트 자료형은 <string>이거나, 연속된 문자를 따옴표로 감싼 것, 또는 따옴표로 감싸지 않은 "CSS 식별자"인 <ident>가 될 수 있습니다. <string>은 작은따옴표 또는 큰따옴표로 감싸져야 합니다. 사양에서 <ident> 또는 <custom-ident>의 목록에 포함되어 있는 CSS 식별자는 따옴표로 감싸서는 안 됩니다.

+ +

CSS 사양에서는 웹 개발자가 정의할 수 있는 값들, 가령 키프레임 애니메이션이나 서체 가족의 이름, 그리드 영역 같은 것들을 {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}}, 또는 둘 다로서 목록에 표시합니다.

+ +

사용자가 정의한 텍스트 값을 따옴표로 감싸는 것과 감싸지 않는 것 모두가 허용되는 경우, 사양에서는 <custom-ident> | <string>로서 이를 목록에 표시하며, 이는 따옴표가 선택 사항임을 의미합니다. 애니메이션 이름이 바로 그런 경우입니다:

+ +
@keyframe validIdent {
+  /* keyframes go here */
+}
+@keyframe 'validString' {
+  /* keyframes go here */
+}
+ +

몇몇 텍스트 값은 따옴표로 감싸지 않는 경우 유효하지 않습니다. 예를 들어, {{cssxref("grid-area")}}의 값은 <custom-ident>일 수 있으므로, 만약 content라는 이름의 그리드 영역이 있을 때 아래처럼 이를 따옴표 없이 사용할 수 있습니다:

+ +
.item {
+  grid-area: content;
+}
+
+ +

반면, {{cssxref("<string>")}}인 자료형의 경우, 예를 들어 {{cssxref("content")}} 속성의 문자열 값은 따옴표로 감싸져야 합니다:

+ +
.item::after {
+    content: "This is my content.";
+}
+
+ +

일반적으로 이모지를 포함해 여러분이 원하는 아무 이름이나 만들 수 있지만, none, unset, initial, inherit, 숫자 또는 2개의 대시로 시작하는 이름은 식별자가 될 수 없으며, 대부분의 경우 미리 정의된 다른 CSS 키워드와 동일한 이름을 사용하고 싶지는 않을 것입니다. 더 자세한 내용을 보려면 {{cssxref("<custom-ident>")}}와 {{cssxref("<string>")}}의 참조 페이지를 확인하세요.

+ +

미리 정의된 키워드 값

+ +

미리 정의된 키워드 값은 특정 속성의 사양에 정의된 텍스트 값입니다. 이 키워드들은 CSS 식별자이기도 해서 따옴표 없이 사용됩니다.

+ +

CSS 사양 또는 MDN의 속성 페이지에서 CSS 속성의 값에 대한 문법을 보면, 허용되는 키워드가 아래와 같은 형태로 나열됩니다. 아래는 {{cssxref("float")}}에 허용되는 미리 정의된 키워드 값입니다.

+ +
left | right | none | inline-start | inline-end
+ +

이런 값들은 따옴표 없이 사용됩니다:

+ +
.box {
+    float: left;
+}
+
+ +

CSS 전체에 공유되는 값

+ +

한 속성의 사양의 일부로서 존재하는 미리 정의된 키워드와 더불어, 모든 CSS 속성은 CSS 전체에 걸쳐 공유되는 값인 {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}을 받아들일 수 있으며, 이들은 기본 동작을 명시적으로 지정합니다.

+ +

initial 키워드는 속성의 초기 값으로 지정된 값을 표현합니다. inherit 키워드는 해당 요소의 부모에 적용된 동일 속성의 계산값을 표현하며, 해당 속성이 상속된다고 가정합니다.

+ +

unset 키워드는 inherit 또는 initial처럼 동작하는데, 해당 속성이 상속되는 경우 전자, 아닌 경우 후자로 동작합니다.

+ +

네번째 값으로 {{cssxref("revert")}}가 Cascade Level 4 사양에 추가되었지만, 지금은 브라우저 지원 상태가 좋지 않습니다.

+ +

URL

+ +

{{cssxref("<url>")}} 자료형은 함수 표기법을 사용하며, 함수가 URL에 해당하는 <string>을 받는 형태입니다. 이것은 절대 URL 또는 상대 URL일 수 있습니다. 예를 들어, 배경 이미지를 넣고 싶을 때 다음 중 아무거나 사용할 수 있습니다.

+ +
.box {
+  background-image: url("images/my-background.png");
+}
+
+.box {
+  background-image: url("https://www.exammple.com/images/my-background.png");
+}
+
+ +

url() 의 매개변수는 따옴표로 감싸거나 감싸지 않을 수 있습니다. 감싸지 않는 경우, 이는 <url-token>으로 해석되어 특정 문자를 이스케이프하는 등의 추가적인 할 일이 생깁니다. 더 자세한 내용을 보려면 {{cssxref("<url>")}}를 확인하세요.

+ +

숫자 자료형

+ + + +

정수

+ +

정수는 1개 이상의 10진수 숫자(0부터 9)로, 예를 들어 1024나 -55가 이에 속합니다. 정수 앞에는 + 또는 - 기호를 덧붙일 수 있는데, 기호와 정수 사이에 공백이 없어야 합니다.

+ +

숫자

+ +

{{cssxref("<number>")}}는 실수를 나타내며, 소수점과 소수부분을 포함할 수도 있고 포함하지 않을 수도 있습니다. 예를 들어 0.255, 128, -1.2가 이에 속합니다. 숫자 앞에도 +나 - 기호를 덧붙일 수 있습니다.

+ +

치수

+ +

{{cssxref("<dimension>")}}은 <number>에 단위를 붙인 것으로, 예를 들면 45deg, 100ms, 10px가 이에 속합니다. 덧붙인 단위 식별자는 대소문자를 구별하지 않습니다. 숫자와 단위 식별자 사이에는 공백 또는 다른 문자가 들어갈 수 없습니다: 즉, 1 cm는 유효하지 않습니다.

+ +

CSS는 치수를 사용해 아래와 같은 것들을 표시합니다:

+ + + +

다음 절에서 이것들을 다룹니다.

+ +

거리 단위

+ +

거리 단위, 또는 길이가 값으로 허용되는 속성은 {{cssxref("<length>")}} 자료형으로 표시됩니다. CSS에는 2가지 종류의 길이가 있습니다: 상대적 길이와 절대적 길이입니다.

+ +

상대적 길이 단위는 다른 무언가와 비교해 상대적인 길이를 나타냅니다. 예를 들어, em은 해당 요소의 폰트 크기에 상대적이며 vh는 뷰포트의 높이에 상대적입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

상대적 길이 단위들

+
단위비교의 대상
em해당 요소의 폰트 크기
ex해당 요소의 폰트의 x높이
cap해당 요소의 폰트의 대문자 높이(대문자의 공칭 높이)
ch해당 요소의 폰트의 좁은 문자가 평균적으로 나아가는 길이, “0” (ZERO, U+0030) 문자로 대표됨.
ic해당 요소의 폰트의 전각 문자가 평균적으로 나아가는 길이, “水” (CJK 물 표의 문자, U+6C34) 문자로 대표됨.
rem루트 요소의 폰트 크기
lh해당 요소의 줄 높이
rlh루트 요소의 줄 높이
vw뷰포트 너비의 1%
vh뷰포트 높이의 1%
vi루트 요소의 인라인 축 방향으로 뷰포트 길이의 1%
vb루트 요소의 블록 축 방향으로 뷰포트 길이의 1%
vmin뷰포트의 길이 중 더 짧은 것의 1%
vmax뷰포트의 길이 중 더 긴 것의 1%
+ +

절대적 길이 단위는 인치 또는 센티미터의 물리적 길이로 고정적입니다. 그래서 이 단위들의 다수는 인쇄물과 같은 고정된 크기의 매체로 출력되는 경우에 유용합니다. 예를 들어, mm는 물리적인 밀리미터, 즉 센티미터의 1/10입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

절대적 길이 단위

+
단위이름다음과 동일함
cm센티미터1cm = 96px/2.54
mm밀리미터1mm = 1cm의 1/10
Q쿼터-밀리미터1Q = 1cm의 1/40
in인치1in = 2.54cm = 96px
pc피카1pc = 1in의 1/16
pt포인트1pt = 1in의 1/72
px픽셀1px = 1in의 1/96
+ +

길이 값을 포함할 때 길이가 0이면, 단위 식별자가 필요하지 않습니다. 그 외의 경우 단위 식별자가 필요합니다. 단위 식별자는 대소문자를 구별하지 않으며, 값의 숫자 부분 이후에 공백 없이 바로 나와야 합니다.

+ +

각도 단위

+ +

각도 값은 {{cssxref("<angle>")}} 자료형으로 표시되며 다음의 값이 허용됩니다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
단위이름설명
deg도360도가 완전한 원을 이룹니다.
grad그라디안400 그라디안이 완전한 원을 이룹니다.
rad라디안2π 라디안이 완전한 원을 이룹니다.
turn턴1턴이 완전한 원을 이룹니다.
+ +

시간 단위

+ +

시간 단위는 {{cssxref("<time>")}} 자료형으로 표시됩니다. 시간 단위를 포함할 때는 단위 식별자인 s 또는 ms가 반드시 필요합니다. 아래의 값이 허용됩니다.

+ + + + + + + + + + + + + + + + + + + + + +
단위이름설명
s초
ms밀리초1,000 밀리초는 1초와 같습니다.
+ +

진동수 단위

+ +

진동수 단위는 {{cssxref("<frequency>")}} 자료형으로 표시됩니다. 아래 값이 허용됩니다.

+ + + + + + + + + + + + + + + + + + + + + +
단위이름설명
Hz헤르츠1초당 발생한 횟수를 나타냅니다.
kHz킬로헤르츠1 킬로헤르츠는 1000 헤르츠와 같습니다.
+ +

1Hz, 또는 1hz, 1HZ는 초당 진동수입니다.

+ +

해상도 단위

+ +

해상도 단위는 {{cssxref("<resolution>")}}로 표시됩니다. 이것들은 스크린과 같은 그래픽 표시에서 CSS 인치당, 센티미터당, 픽셀당 몇 개의 점을 포함할 수 있는지를 나타냄으로써 점 1개의 크기를 표현합니다. 다음의 값이 허용됩니다:

+ + + + + + + + + + + + + + + + + + + + + + +
단위설명
dpi인치당 점의 수.
dpcm센티미터당 점의 수.
dppx, x픽셀당 점의 수.
+ +

퍼센트

+ +

{{cssxref("<percentage>")}}는 다른 값의 일부분을 표현하는 자료형입니다.

+ +

퍼센트 값은 언제나 다른 양, 예컨대 길이와 같은 것에 상대적입니다. 퍼센트를 허용하는 속성은 그 퍼센트가 참조하는 양 또한 정의합니다. 이 양은 같은 요소가 갖는 다른 속성의 값이거나, 조상 요소가 갖는 속성의 값이거나, 이 요소를 포함하는 블록의 치수 등이 될 수 있습니다.

+ +

예를 들면, 어떤 박스의 {{cssxref("width")}}를 퍼센트로 지정한 경우, 그 박스의 부모의 계산된 너비의 퍼센트를 참조합니다:

+ +
.box {
+  width: 50%;
+}
+ +

퍼센트와 치수 함께 사용하기

+ +

일부 속성은 두 자료형 중 하나를 선택해서, 예를 들면 <length> 또는 <percentage>를 골라서 치수를 지정할 수 있습니다. 이 경우 사양에는 허용되는 값이 {{cssxref("<length-percentage>")}}처럼 조합된 단위로 기술됩니다. 다음은 가능한 다른 조합입니다:

+ + + +

특별한 자료형 (다른 사양에서 정의된 것들)

+ + + +

색깔

+ +

{{cssxref("<color>")}} 값은 요소의 외관 색깔(예: 배경색)을 지정하며, CSS Color Module에 정의되어 있습니다.

+ +

이미지

+ +

{{cssxref("<image>")}} 값은 CSS에서 사용될 수 있는 다양한 종류의 이미지를 지정하며, CSS Image Values and Replaced Content Module에 정의되어 있습니다.

+ +

위치

+ +

{{cssxref("<position>")}} 자료형은 배치 영역 안에서 객체의 2D 위치를, 예컨대 컨테이너 안에서 배경 이미지의 위치 같은 것을 정의합니다. 이 자료형은 {{cssxref("background-position")}}으로 해석되므로 CSS Backgrounds and Borders specification에 명시되어 있습니다.

+ +

함수 표기법

+ + + +

함수 표기법은 더 복잡한 자료형을 표현하거나 CSS가 특별한 처리를 하도록 지시하는 자료형의 값입니다. 이 문법은 함수의 이름으로 시작해서 바로 왼쪽 괄호 (가 뒤따르고, 함수의 인자를 나열한 다음, 오른쪽 괄호 )로 끝납니다. 함수는 여러 개의 인자를 받을 수 있으며, CSS 속성 값과 비슷한 형식을 가집니다.

+ +

공백 문자는 허용되지만, 괄호 안에서는 선택 사항입니다. (단 min(), max(), clamp() 함수 페이지의 주의 사항에서 공백 문자에 대한 내용을 확인하세요.)

+ +

rgba()와 같은 몇몇 레거시 함수 표기법이 콤마를 사용하지만, 일반적으로 콤마는 목록에서 아이템을 구분하기 위해 사용됩니다. 콤마가 인자를 구분하기 위해 사용된 경우, 콤마 전후의 공백 문자는 선택 사항입니다.

+ +

사양

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
사양상태비고
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}vi, vb, ic, cap, lh, rlh 단위 추가.
+ min(), max(), clamp() 함수 표기법 추가
+ toggle() 추가
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}calc(), ch, rem, vw, vw, vmin, vmax, Q 추가
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}rgb(), rgba(), hsl(), hsla() 함수에 콤마 없는 문법 추가. rgb()와 hsl()에 알파 값 허용하며 rgba()와 hsla()를 그것들의 (지원이 중단된) 별칭으로 전환.
+ 색깔 키워드 rebeccapurple 추가. 4자리와 8자리의 16진수 색깔 값 추가, 마지막 숫자(들)이 알파 값을 의미함.
+ hwb(), device-cmyk(), color() 함수 추가.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}system-colors를 지원 중단으로 표시. SVG 색깔 추가. rgba(), hsl(), hsla() 함수 추가.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} +

element(), image(), image-set(), conic-gradient() 추가

+
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}이미지를 처음으로 정의함.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}첫번째 정의.
+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf