CSS documentation index

Found 208 pages:

# Page Tags and summary
1 CSS CSS, Design, Landing, Layout, Reference, l10n:priority
Cascading Style Sheets(CSS)는 HTML이나 XML(SVG나 XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. CSS는 요소가 화면, 종이, 스피치나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다.
2 -moz-image-region CSS, CSS Reference, Non-standard
XUL 요소와 가상요소들에 대하여 list-style-image  속성을 사용할때 이 속성은 전체이미지에서 사용되는 부분의 령역을 지정합니다.  이것은 요소들이 성능을 향상시키기 위해 같은 이미지의 서로다른 부분을 사용할수 있게 합니다.
3 -webkit-overflow-scrolling
-webkit-overflow-scrolling 은 주어진 요소에서 터치 기기가 가속도 기반momentum-based​ 스크롤을 사용할지를 제어한다.
4 ::after (:after)
CSS ::after 가상 요소(pseudo-element)는 선택된 요소(element)의 가상의 자녀 요소를 가리킵니다. 이는 주로 본문에 추가적인 내용을 덧붙이는 경우에 많이 쓰이는 content CSS 프로퍼티(property) 입니다. 이 요소는 인라인(inline)이 기본값입니다.
5 :active CSS, Layout, Pseudo-class, Reference, Web
:active CSS 의사 클래스는 사용자가 활성화한 버튼 등의 요소를 나타냅니다.
6 :first
:first @page CSS pseudo-class 는 문서를 인쇄할 때, 첫번째 페이지의 스타일링을 표현합니다.
7 :first-child
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
8 :focus-within CSS, Layout, Pseudo-class, Reference, Web
:focus-within CSS pseudo-class 는 focus 를 받거나, focus 를 받은 element 를 포함하는 element 를 나타냅니다. 즉, :focus pseudo-class 에 의해 자체적으로 일치하거나 :focus 에 의해 일치되는 자손을 가지는 element 를 나타냅니다. (이것은 shadow trees 내부의 자손을 포함합니다.)
9 :not() CSS, CSS Pseudo-class, Reference
부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 기능 표기법입니다. 인수로 표시되지 않은 요소와 일치합니다. X는 다른 부정 선택자를 포함해서는 안 됩니다.
10 :nth-child CSS 의사 클래스, 레이아웃, 웹, 참고
CSS 의사 클래스 :nth-child(an+b)은 0 이상의 n에 대해서 도큐먼트 트리에서 자기 앞에 an+b-1 개의 형제가 있는 엘리먼트와 일치한다. 더 간단히 말하면 이 셀렉터는 일련의 형제들 중 순서가 an+b 패턴과 일치하는 몇 개의 자식 엘리먼트와 일치한다. 레벨 3 구현에서는 일치하는 엘리먼트의 부모가 있어야 하지만 레벨 4에서는 없어도 된다.
11 <angle> CSS, CSS Data Type, Layout, Reference, Web
<angle> CSS 자료형은 각도의 값을 도, 그레이드, 라디안 또는 턴으로 표현합니다. <gradient>나 일부 transform 함수에서 사용합니다..
12 &lt;color&gt; CSS, CSS Date Type, Layout, Reference, Web
<color> CSS 자료형은 sRGB 색 공간의 한 색을 표현하며, 추가로 알파 채널 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 어떻게 합성되어야 하는지 지정할 수 있습니다.
13 &lt;gradient&gt; CSS, CSS Data Type, CSS Images, Graphics, Layout, Reference
<gradient> CSS 자료형은 <image>의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.
14 &lt;integer&gt; CSS, CSS Data Type, Reference, Web
<integer> CSS 자료형은 <number>의 종류 중 하나로 소수점이 없는 완전한 수, 즉 정수를 표현합니다. 정수는 column-count, counter-increment, grid-column, grid-row, z-index 등 다양한 속성에서 사용할 수 있습니다.
15 &lt;length&gt; CSS, CSS Data Type, Layout, Reference, Web
<length> CSS 자료형은 거리 값을 나타냅니다. width, height, margin, padding, border-width, font-size, text-shadow 등 다양한 속성에 사용할 수 있습니다.
16 &lt;number&gt; CSS, CSS Data Type, Layout, Reference, Web
<number> CSS 자료형은 숫자, 즉 정수 또는 실수를 표현합니다.
17 &lt;percentage&gt; CSS, CSS Data Type, Layout, Reference, Web
<percentage> CSS 자료형은 백분율 값을 나타냅니다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용합니다. width, height, margin, padding, font-size 처럼 다양한 속성에서 백분율을 쓸 수 있습니다.
18 &lt;transform-function&gt; CSS, CSS Data Type, CSS Transforms, Layout, Reference
The <transform-function> CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform property.
19 matrix()
matrix() CSS 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 <transform-function> 데이터 타입입니다.
20 translate3d() translate3d
translate3d() CSS 함수는 3D공간에 요소의 위치를 이동시킵니다. 이 변환은 3차원 벡터에 의해 특성 지어지고,  그 좌표는 각 방향으로 얼마나 움직이는지를 정의합니다.
21 &lt;url&gt; CSS, CSS Data Type, Layout, Reference
<url> CSS 자료형은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 background-image, cursor, list-style 등 다양한 속성에서 사용할 수 있습니다.
22 @charset At-rule, CSS, Layout, Reference, Web
@charset CSS at-규칙은 스타일 시트에 쓰이는 문자 인코딩을 지정합니다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 합니다; 중첩된 문이 아니기에, 조건부 그룹 at-규칙 내에 사용될 수 없습니다. 여러 @charset at-규칙이 정의된 경우, 첫 번째 것만 사용되고 HTML 요소의 style attribute 또는 HTML 페이지의 문자 집합과 관련 있는 <style> 요소 내에서 사용될 수 없습니다.
23 @font-face
CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. @font-face at-rule 은 CSS의 top-level에서 뿐 아니라, CSS conditional-group at-rule 안에서도 사용될 수도 있다.
24 @import At-rule, CSS, Reference
@import CSS at-규칙은 다른 스타일 시트에서 스타일 규칙을 import하는데 쓰입니다. 이 규칙은 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다; 중첩된 문이 아니기에, @import는 조건부 그룹 at-규칙 내에 사용될 수 없습니다.
25 @keyframes
@keyframes at-rule 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
26 @media At-rule, CSS, Reference
@media CSS at-규칙은 중괄호로 구분된 CSS 블록 내 중첩문 집합을 미디어 질의에 정의된 조건과 연결합니다. @media at-규칙은 최상단 레벨 CSS뿐만 아니라, 어떤 CSS 조건부 그룹 at-규칙 내에서도 사용될 수 있습니다.
27 @namespace At-rule, CSS, Layout, Reference, Web
@namespace는 CSS 스타일 시트에서 사용되는 XML 네임스페이스를 정의하는 at-규칙입니다. 정의된 네임스페이스는 오직 그 네임스페이스 내의 요소를 선택만 하기 위해 universal, type 및 attribute 선택자를 제한하는 데 사용될 수 있습니다. @namespace 규칙은 보통 여러 네임스페이스(인라인 SVG 또는 MathML 있는 HTML5 또는 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용합니다.
28 @page At-rule, CSS, Layout, Reference, Web
@page CSS at-규칙은 문서를 인쇄할 때 일부 CSS 속성(property)을 수정하는 데 쓰입니다. @page로 모든 CSS 속성을 바꿀 수는 없습니다. 문서의 margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break만 바꿀 수 있습니다. 다른 CSS 속성을 바꾸려는 시도는 무시됩니다.
29 @supports
The @supports CSS at-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a supports condition.
30 @viewport Adaptation, At-rule, CSS, Device, NeedsContent, NeedsTranslation, Reference, TopicStub
The @viewport CSS at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.
31 height @viewport, CSS, CSS Descriptor, Reference
height CSS 설명자(descriptor)는 뷰포트의 min-height 및 max-height 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이(length) 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.
32 zoom CSS, CSS Descriptor, Graphics, Layout, NeedsExample, Reference
zoom CSS 설명자(descriptor)는 @viewport에 의해 정의된 문서의 초기 줌 배율(factor)을 설정합니다.
33 Alternative style sheets
Firefox는 대체 스타일시트 를 지원합니다. 대체 스타일시트를 제공하는 페이지에서는 보기>페이지 스타일 메뉴를 이용하여 페이지에 적용될 스타일을 선택할 수 있습니다. 따라서 사용자는 자신이 원하는 다양한 종류의 페이지를 볼 수 있게 됩니다.
34 CSS Animations CSS, CSS Animations, Experimental, NeedsTranslation, Overview, Reference, TopicStub
CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.
35 CSS 애니메이션 사용하기 Advanced, CSS, CSS Animations, Example, Experimental, Guide
CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.
36 CSS Background and Borders CSS, CSS Backgrounds and Borders, CSS Reference, Overview, TopicStub
CSS 배경 및 테두리(Background and Borders)는 요소의 배경 및 테두리 속성에 대해 정의한 CSS 모듈입니다. 단순한 선은 물론 이미지도 테두리로 쓸 수 있으며, 한번에 여러개의 배경을 박스 모델 요소에 적용이 가능합니다. 둥근 모서리와 그림자 역시 박스에 적용할 수 있습니다.
37 Border-image 생성기 CSS, Generator, Tools, border-image, 생성기
CSS3 border-image 속성값을 생성하기 위한 툴입니다.
38 Border-radius 생성기 CSS, Generator, Tools, border-radius, 생성기
CSS3 border-radius 속성값을 생성하기 위한 툴입니다.
39 여러개의 배경 지정하기 CSS, CSS Background, Example, Guide, Intermediate
CSS3를 사용하면 엘리먼트에 여러개의 배경을 지정할 수 있다. 첫 번째로 지정한 배경이 가장 앞에 보이고 나중에 지정한 배경이 뒤에 보인다. 배경 색상(color)는 맨 마지막에만 지정할 수 있다.
40 CSS Backgrounds and Borders CSS, CSS Backgrounds and Borders, NeedsTranslation, Overview, Reference, TopicStub
CSS Backgrounds and Borders is a module of CSS that lets you style elements' backgrounds and borders. Backgrounds can be filled with a color or image, clipped or resized, and otherwise modified. Borders can be decorated with lines or images, and made square or rounded. Additionally, element boxes can be decorated with a shadow.
41 Using multiple backgrounds css 백그라운드, 백그라운드 이미지, 예제
You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back.
42 배경 이미지 크기 조정하기
background-size CSS 속성에 배경 이미지의 가로, 세로 크기를 지정할 수 있습니다. 값을 직접 지정하면 바둑판식으로 배열되는 기본 행동(behavior)를 무시합니다.
43 CSS Charsets CSS, CSS Charsets, Overview, Reference
CSS Charsets은 스타일시트에서 사용되는 문자 집합을 정의할 수 있는 CSS 모듈입니다.
44 CSS Color
CSS Color
45 CSS Colors CSS, CSS Colors, Overview, Reference
CSS Colors는 색상, 색상 유형 및 투명도(transparency)를 다루는 CSS 모듈입니다.
46 Color picker tool
이 도구를 사용하면 웹용 사용자 정의 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다. 또한 HEXA 색상, RGB (빨강 / 녹색 / 파랑) 및 HSL (색조 / 채도 / 밝기)를 비롯하여 CSS 에서 지원하는 다양한 색상 형식 간에 쉽게 변환 할 수 있습니다 . RGB (rgba) 및 HSL (hsla) 형식에서도 알파 채널을 제어 할 수 있습니다.
47 CSS Columns CSS, CSS Reference, Overview
CSS Columns는 다단(multi-column) 레이아웃을 정의하는 CSS 모듈입니다, 콘텐츠가 단 사이를 흐르는 방법 및 틈(gap)과 괘선(rule)이 처리되는 법을 표현할 수 있는.
48 CSS Compositing and Blending CSS, CSS Compositing and Blending, CSS Reference, Overview
CSS Compositing and Blending은 서로 다른 요소의 모양이 한 이미지로 결합되는 법을 정의하는 CSS 모듈입니다.
49 CSS Conditional Rules CSS, CSS Conditional Rules, CSS Reference, Overview
CSS Conditional Rules는 프로세서 또는 스타일 시트에 적용되는 문서의 기능에만 기반을 두는 규칙 집합을 정의할 수 있는 CSS 모듈입니다.
50 CSS Device Adaptation CSS, CSS Device Adaptation, Overview, Reference
CSS Device Adapation은 뷰포트의 크기, 줌 배율(factor) 및 방향을 정의할 수 있는 CSS 모듈입니다.
51 CSS Flexible Box Layout CSS, CSS Flexible Boxes, CSS Reference, Overview
CSS Flexible Box Layout은 축을 따라 항목들을 배치하는 방식에 대한 CSS 모듈이며 사용자 인터페이스 디자인에 최적화된 CSS 박스 모델을 정의하고 있습니다. flex 레이아웃 모델에서, flex 컨테이너의 자식들은 어느 방향으로든 배치될 수 있고 크기를 "flex"할 수 있습니다. 이는 여유 공간을 채우기 위해 늘어나거나, 부모 공간을 흘러 넘치지 않기 위해 줄어드는 것 모두를 말합니다. 자식들의 수평 및 수직 정렬 모두 쉽게 조작될 수 있습니다.
52 Aligning Items in a Flex Container
flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스는 flex 컨테이너를 의미합니다)  내부를 중앙 정렬 할 수 있게 되었습니다. 이 가이드에서 우리는 flexbox의 정렬 및 끝 마추기 기능에 대해 자세히 살펴볼 것입니다.
53 Using CSS Flexible Boxes
CSS3 Flexible Box 또는 flexbox는 다양한 화면 크기와 다양한 디스플레이 장치를 수용하기위한 레이아웃 모드입니다.
54 flexbox의 기본 개념
일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능에 대한 개요를 다룹니다. 더 자세한 내용은 가이드의 다른 글에서 탐구하게 될 것입니다.
55 CSS Fonts CSS, CSS Fonts, Overview, Reference
CSS Fonts는 글꼴(font) 관련 속성 및 글꼴 자원이 로드되는 법을 정의하는 CSS 모듈입니다. 이는 글꼴의 스타일을 정의할 수 있습니다, 글꼴 패밀리, 크기 또는 굵기 및 한 문자에 여러 자체(glyph)가 있는 글꼴에 사용되는 이형(variant) 자체와 같은. 줄높이도 정의할 수 있습니다.
56 CSS Generated Content CSS, CSS Generated Content, CSS Reference, Overview
CSS Generated Content는 요소에 콘텐츠를 추가하는 법을 정의하는 CSS 모듈입니다.
57 CSS Images CSS, CSS Images, CSS Reference, Overview
CSS Images는 사용될 수 있는 이미지 유형(<image> 유형, 포함하는 URL, 그러데이션 및 다른 유형의 이미지), 크기 조정 방법 및 이미지와 다른 대체 콘텐츠가 서로 다른 레이아웃 모델과 상호작용하는 법을 정의하는 CSS 모듈입니다.
58 Implementing image sprites in CSS Advanced, CSS, CSS Image, CSS 이미지, Graphics, Guide, NeedsContent, Sprites, Web, 고급과정, 스프라이트, 이미지
이미지 스프라이트는 여러 개의 이미지들이 필요한 아주 많은 웹앱에서 사용됩니다. 이미지 각각을 별도의 파일로 포함시키는 대신, 이미지들을 하나의 파일로 만들어서 포함시키면 HTTP 리퀘스트 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다.
59 CSS Lists and Counters CSS, CSS Lists and Counters, CSS Reference, Overview
CSS Lists and Counters는 리스트 배치 방법, 리스트 마커를 스타일 할 수 있는 법 및 새로운 카운터를 만들 수 있는 방법을 정의하는 CSS 모듈입니다.
60 CSS 카운터 사용하기 CSS, CSS Counter Styles, Guide, Layout, Reference, Web, 번호, 카운터
CSS counters를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.
61 CSS Logical Properties CSS, CSS Logical Properties, Overview, Reference
CSS Logical Properties는 레이아웃을 제어하는 물리 속성에 논리 맵핑을 정의하는 CSS 모듈입니다.
62 CSS Masks CSS, CSS Masks, CSS Reference, Overview
CSS Masks는 마스킹 및 클리핑 포함 시각 요소의 부분 또는 전체를 숨기기 위한 수단을 정의하는 CSS 모듈입니다.
63 CSS Miscellaneous CSS, Overview, Reference
이 페이지는 한참 실험 중이거나 다른 어떤 부류와도 맞지 않은 CSS 속성을 포함합니다.
64 CSS Namespaces CSS, CSS Namespaces, Overview, Reference
CSS Namespaces는 CSS에서 XML 네임스페이스를 지정할 수 있는 CSS 모듈입니다.
65 CSS Pages CSS, CSS Pages, CSS Reference, Overview
CSS Pages는 orphan 및 widow(앞단에서 넘어온 짧은 행)뿐만 아니라 페이지 전환이 처리되는 법을 정의하는 CSS 모듈입니다.
66 CSS Positioning CSS, CSS Positioning, CSS Reference, Overview
CSS Positioning은 페이지에 상대 또는 절대 위치지정하는 법을 정의하는 CSS 모듈입니다.
67 CSS Ruby CSS, CSS Ruby, Overview, Reference
CSS Ruby는 행간 주석의 형태로 기본 텍스트와 함께 작게 실행되는 텍스트인 ruby 주석 표시와 관련된 렌더링 모델 및 서식 컨트롤을 제공하는 CSS 모듈입니다.
68 CSS Scroll Snap Points CSS, CSS Scroll Snap Points, Overview, Reference
CSS Scroll Snap Points는 물리보다는 논리상 방향과 차원 맵핑을 통해 레이아웃을 제어하는 능력을 제공하는 속성 및 값을 정의하는 CSS 모듈입니다.
69 CSS Shapes CSS, CSS Reference, CSS Shapes, Overview
CSS Shapes은 CSS 값으로 사용하기 위한 기하학 도형을 정의하는 CSS 모듈입니다.
70 CSS Table CSS, CSS Reference, CSS Table, Overview
CSS Table은 표 데이터 배치법을 정의하는 CSS 모듈입니다.
71 CSS Text CSS, CSS Text, Overview
CSS Text는 줄 바꿈, 정돈 및 정렬, 공백 처리 및 텍스트 변환 같은 텍스트 조작을 수행하는 법을 정의하는 CSS 모듈입니다.
72 CSS Text Decoration CSS, CSS Reference, CSS Text Decoration, Overview
CSS Text Decoration은 밑줄, 텍스트 그림자 및 강조 표시 등 텍스트 장식에 관련된 기능을 정의하는 CSS 모듈입니다.
73 CSS Transforms
CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.
74 CSS transform 사용하기 3D, Advanced, CSS, CSS Transforms, Graphics, Guide, Rotate, Scale, Skew, transform, 변형, 변환
CSS 변형(transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 본 가이드는 변형 사용법의 기초를 제시합니다.
75 CSS Transitions CSS, CSS Transitions, Experimental, NeedsTranslation, Overview, Reference, TopicStub
CSS Transitions is a module of CSS that defines how to create smooth transitions between values of a given CSS properties. It allows to create them, but also to define their evolution, using timing functions..
76 CSS 트랜지션 사용하기
CSS3 스펙 꾸러미의 일부인 CSS 트랜지션(transitions)은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. 
77 CSS User Interface CSS, CSS Basic User Interface, Overview, Reference
CSS User Interface는 사용자 인터페이스 관련 기능의 렌더링 및 기능을 정의할 수 있는 CSS 모듈입니다.
78 CSS Writing Modes CSS, CSS Reference, CSS Writing Modes, Overview
CSS Writing Modes는 다양한 국제 쓰기 모드를 정의하는 CSS 모듈입니다, 좌에서 우(가령 Latin 및 Indic 스크립트에 사용됨), 우에서 좌(가령 Hebrew 또는 Arabic 스크립티에 사용됨), 양방향(좌에서 우 및 우에서 좌 스크립트를 섞을 때 사용됨) 및 세로(가령 일부 Asian 스크립트에 사용됨) 등.
79 CSS animated properties CSS
일부 CSS 속성은 애니메이션될 수 있습니다, 즉 그 값을 바꿀 때 CSS animation 또는 CSS transition이 사용된 경우 부드러운 방식으로 바꿀 수 있습니다.
80 CSS documentation index CSS, Index, MDN Meta
{{Index("/ko/docs/Web/CSS")}}
81 CSS z-index 이해하기
우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다.
82 floating 엘리먼트의 쌓임
floating 엘리먼트들의 쌓임 순서는 약간 다르다. floating 엘리먼트들은 position이 지정된 블록과 지정되지 않은 블록 사이에 쌓인다.
83 z-index 적용
처음 예제에서(z-index가 없는 경우의 쌓임) 엘리먼트들이 기본적으로 어떻게 쌓이는지 설명했다. 만약 다른 쌓임 순서를 적용하고 싶다면 먼저 엘리먼트에 position 속성을 지정하고 z-index 속성을 지정해야한다.
84 z-index가 없는 경우의 쌓임
만약 모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다음 순서로 아래에서부터 위로 쌓인다.
85 쌓임 맥락 Advanced, CSS, Guide, Reference
쌓임 맥락(stacking context) is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.
86 쌓임 맥락 예제1
기본 예제부터 시작하자. 쌓임 맥락의 뿌리에는 두개의 DIV #1과 DIV #3가 있다. 두 DIV는 모두 position 속성 값이 relative로 지정되었지만 z-index 속성 값은 지정되지 않았다. DIV #1 안에는 position 속성 값이 absolute로 지정된 DIV #2가 있고 DIV #3 안에도 position 속성 값이 absolute가 지정된 DIV #4가 있다. DIV #2와ㅏ DIV #4 모두 z-index 속성 값은 지정되지 않았다.
87 쌓임 맥락 예제2
굉장히 간단하지만 쌓임 맥락을 이해하는데 도움이 되는 예제를 하나 소개하려 한다. 이전 예제에서 본 4개의 DIV가 있다. 이번에는 두 레벨의 DIV 모두 z-index 속성 값을 지정했다.
88 쌓임 맥락 예제3
마지막 예제는 멀티 레벨 HTML 계층 구조에서 z-index 속성 값을 지정할때 생기는 문제에 대해 다룰 것이다.
89 CSS 그리드 레이아웃 CSS, Grid Layout, Grids, 개요, 그리드, 그리드 레이아웃, 레이아웃, 참고
CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.
90 Basic concepts of grid layout CSS, CSS 그리드, 가이드, 레이아웃
CSS 그리드 레이아웃(Grid Layout)은 CSS에 2차원의 그리드 시스템을 도입했습니다. 그리드는 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있습니다. 이 문서에서는 CSS 그리드 레이아웃 및 CSS 그리드 레이아웃 레벨 1 명세서에 포함된 새로운 기술 용어를 소개합니다. 이번 개요에 소개된 기능은 나머지 안내 문서에서 자세히 설명합니다.
91 Grid template areas CSS, CSS Grids, Guide
이전 가이드에서 우리는 그리드 라인에 대해서 살펴보았으며, 이 라인을 기준으로 어떻게 아이템들을 배치하는지 알아보았습니다. CSS 그리드 레이아웃으로 작업할 땐 거기엔 항상 라인이 있을 것이고, 이것은 아이템들을 그리드에 배치할 때 사용할 수 있는 아주 직관적인 방법이 될 수 있습니다. 그렇지만, 아이템을 그리드에 배치할 때 사용할 수 있는 또 다른 방법이 있는데, 이것은 독자적으로 혹은 라인 기준 배치 방법과 함께 혼용해서 사용할 수 있습니다. 이 방법은 이름이 지명된 템플릿 영역을 사용하여 아이템을 배치하는 작업과 연관돼 있으며, 이 방법이 정확히 어떻게 작동하는지 알아보겠습니다. 이것이 때때로 왜 그리드 레이아웃의 ascii-art 방식이라고 일컬어지는지 쉽게 눈치채실 수 있을 겁니다!
92 Layout using named grid lines CSS, CSS Grids, Guide
이전 가이드에선 그리드 트랙을 정의하면 생성되는 라인을 사용해서 아이템을 배치하는 법을 살펴보았으며, 또한 이름이 명명된 템플릿 영역을 가지고 어떻게 아이템들을 배치하는지도 알아보았습니다. 이번 가이드에선 이름이 주어진 라인을 쓰는 상황에서 이 두 가지 방법이 서로 어떻게 작용하는지 알아보겠습니다. 라인에 이름을 지어 주는 것이 매우 유용할 때도 있지만, 이름과 트랙 크기가 혼합돼서 사용되는 그리드 용법을 보고 있으면 매우 헷갈릴 수도 있습니다. 하지만 몇 가지 예제를 가지고 작업해 보시면 점점 명확해지면서 나중엔 작업하기도 훨씬 수월해지실 겁니다.
93 Line-based placement with CSS Grid CSS, CSS Grids, Guide
그리드 레이아웃의 기본 개념을 다룬 문서에서 라인 번호를 사용하여 그리드에 아이템을 배치하는 방법을 잠깐 살펴본 적이 있습니다. 이번 문서에서는 이 기본적 기능이 어떻게 작동하는지를 자세히 살펴보겠습니다.
94 Relationship of grid layout to other layout methods CSS, CSS Grids, Guide
CSS 그리드 레이아웃은 레이아웃 작업을 위한 전체 시스템 중의 일부로서, 다른 CSS 기술과 함께 어우러져 작동하도록 설계되었습니다. 이번 가이드에서는 이미 사용하고 계신 다른 기술과 그리드가 어떻게 잘 어울리는지 설명해 드리겠습니다.
95 CSS 기본 자료형 CSS, CSS Data Type, Overview, Reference
CSS 기본 자료형은 CSS 속성과 함수가 받아들이는, 키워드와 단위를 포함한 일반적인 값을 정의합니다. Component value type의 특별한 종류입니다.
96 CSS 박스 모델 CSS, CSS Box Model, CSS Reference, Overview
CSS Box Model은 요소를 위해 생성되고 비주얼 서식 모델을 따라 배치되는 사각형 박스(패딩 및 마진 포함)를 정의하는 CSS 모듈입니다.
97 CSS 박스 모델 입문 CSS, CSS Box Model
CSS에서, 이 사각형 박스 각각은 표준 박스 모델을 사용하여 기술됩니다. 이 모델은 요소에 의해 차지되는 공간의 내용(content)을 설명합니다. 각 박스는 네 경계(edge)가 있습니다: margin 경계, border 경계, padding 경계 및 content 경계.
98 마진 상쇄 정복 CSS, CSS Box Model
블록의 top 및 bottom 마진은 때로는 (결합되는 마진 중 크기가) 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))됩니다, 마진 상쇄(margin collapsing)로 알려진 행동.
99 CSS 선택자
선택자는 CSS 규칙조합이 어떤 요소들에 적용될지 정의한다.
100 CSS 참고서 CSS, Overview, Reference, l10n:priority
CSS 참고서를 사용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, 자료형과 @-규칙을 탐색하세요. 또한 유형별로 정리한 모든 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다. 추가로 간단한 DOM-CSS / CSSOM 참조도 포함하고 있습니다.
101 CSS3
CSS3는 Cascading Style Sheets(CSS) 언어의 가장 최신 버전이고 CSS2.1을 상속하는 것을 목표로  합니다.  CSS3는 개발자들이 오랫동안 기다려온 새로운 기능들을 지원하게 되었습니다. 다중열(
102 Computed value CSS, Guide, Web
CSS 속성(property)의 계산값(computed value) 은 아래 방식으로 지정값(specified value)에서 계산됩니다.
103 Paged Media CSS, CSS3, Page Breaks
인쇄 미디어(paged media) 속성은 인쇄 콘텐츠의 프레젠테이션 또는 콘텐츠를 개별 페이지로 나누는 다른 미디어를 제어합니다. 페이지 나누기 설정, 인쇄 가능 영역 제어, 서로 다른 좌우 페이지 스타일 및 요소 내부 나누기 제어를 할 수 있습니다. 널리 지원되는 속성은 포함합니다
104 Property Template CSS, CSS Reference
요약.
105 Replaced element CSS, CSS Reference
CSS에서, 대체 요소(replaced element)는 그 표현(representation)에 대해 CSS의 관리대상 밖인 요소입니다. 이는 그 표현이 CSS와 독립되어 처리되는 외부 오브젝트입니다. 대표적인 대체 요소는 다음과 같습니다.
106 Resolved value CSS
CSS 속성(property)의 결정값(resolved value) 은 getComputedStyle()에 의해 반환되는 값입니다. 속성 대부분은, 그 값이 계산값(computed value)이지만 기존 속성 약간은(width 및 height 포함), 오히려 사용값(used value)입니다. 속성 별 더 자세한 사항은 아래 링크 건 스펙을 참조하세요.
107 Type selectors
CSS 타입 선택자는 노드 이름으로 요소를 찾습니다. 그러므로 (혼자 쓰였을 경우) 문서 내에서 해당 노드 이름을 가진 모든 요소를 선택하게 됩니다.
108 actual value CSS, Guide, Web
CSS 속성(property)의 실제값(actual value) 은 모든 근사치(approximation)가 적용된 뒤의 사용값(used value)입니다. 예를 들어, 사용자 에이전트는 오직 정수 픽셀값으로 테두리(border)를 렌더링할 수도 있고 테두리의 계산된 폭(width)에 근접하도록 강제할 지도 모릅니다.
109 align-content CSS, CSS Box Alignment, CSS Property, Reference
CSS align-content property는 flex container에서 browser가 간격과 아이템들을 xy좌표축에서의 공간을 할당하는 방법을 정의합니다.
110 align-items CSS, CSS Flexible Boxes, CSS Property, Reference
CSS align-items property는 바로 접하고 있는 flex items에 align-self 를 일괄적용한다. align-self property는 해당 item이 차지하는 공간의 중앙인지 시작인지 끝인지에 정렬한다.
111 align-self CSS, CSS Box Alignment, CSS Flexible Boxes, CSS Property, Reference
align-self CSS property는 해당 flex item의 align-items 값을 덮어씁니다. 만약 어떤 flex item의 cross-axis margin 값이 auto로 설정되어 있으면 align-self 값은 무시 됩니다.
112 animation CSS, CSS Animations, CSS Property, Reference
CSS의 animation 속성은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 값들을 지정가능한 축약된 속성(shorthand property)이다.
113 animation-delay CSS 애니메이션
animation-delay CSS 속성은 애니메이션이 시작되어야 하는 시기를 지정하는 것 입니다. 당신은 미래의 시점, 시작부터 즉시, 또는 애니메이션 주기 도중의 시점에서 애니메이션을 시작할 수 있습니다.
114 animation-direction CSS 속성, CSS 애니메이션
animation-direction CSS 속성은 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.
115 animation-duration CSS 애니메이션
animation-duration CSS 속성은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다.
116 animation-fill-mode CSS 속성, CSS 애니메이션
animation-fill-mode CSS 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.
117 at-규칙 CSS, CSS Reference
at-규칙은 식별자(identifier)가 뒤따르는 at 기호('@' (U+0040 COMMERCIAL AT))로 시작하는 CSS 문이며 다음 세미콜론(';' (U+003B SEMICOLON)) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함합니다.
118 background CSS, CSS Background, CSS Property, Reference
background CSS 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 선언할 때 사용합니다.
119 background-color
background-color CSS 속성은 요소의 배경 색을 지정합니다.
120 background-image
background-image CSS 속성은 엘리먼트의 배경 이미지를 지정한다. 배경 이미지가 여러개 지정되었다면 먼저 지정된 것 부터 차례로 쌓인다. 처음 지정된 이미지가 가장 먼저 그려지고  마지막으로 지정된 이미지가 가장 나중에 그려진다(마지막에 지정한 이미지가 사용자가 보는 화면과 가장 가깝게 그려진다). borders 속성은 이미지 위에 그려지며 background-color 속성은 이미지 아래에 그려진다.
121 border CSS, Layout, Reference
border CSS 속성은 요소의 테두리를 설정합니다. border-width, border-style, border-color의 단축 속성입니다.
122 border-collapse CSS, CSS Borders, CSS Property, CSS Tables
border-collapse CSS 속성(property)은 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있습니다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유합니다.
123 border-color CSS, Reference
border-color CSS 단축 속성은 모든 면의 테두리 색상을 설정합니다.
124 border-radius CSS, CSS Property, Reference
border-radius CSS 속성은 요소의 테두리를 둥글게 만듭니다. 하나의 값을 사용해 원형 모서리를, 두 개의 값을 사용해 타원형 모서리를 적용할 수 있습니다.
125 border-spacing CSS, CSS Property, CSS Tables
border-spacing CSS 속성(property)은 인접한 표 셀의 테두리 간 간격을 지정합니다 (분리 테두리 모델만을 위한). 이는 프리젠테이션 HTML에서 cellspacing attribute에 해당하지만 선택 사항인 두 번째 값은 서로 다른 가로 및 세로 간격을 설정하는데 사용될 수 있습니다.
126 border-style
border-style CSS 프로퍼티는 요소의 4면 경계 줄 스타일을 설정하는 단축 속성 이다.
127 box-shadow CSS, CSS Property, CSS Styles, Reference
box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이루어집니다.
128 box-sizing
box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 데에 사용되는 기본적인 CSS box model 대체하기 위해 사용된다.
129 calc CSS, CSS_함수, 레이아웃, 문서, 웹
calc() CSS 함수는 <length>, <frequency>, <angle>, <time>, <number>, 또는 <integer>가 필요한 어떤 곳에든지 사용될 수 있습니다. 당신은 CSS 속성 값을 정할 때에 calc()로 계산할 수 있습니다.
130 clear CSS, CSS Positioning, CSS Property
clear CSS 속성(property)은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다.
131 color CSS, CSS Colors, CSS Property, CSS Text, Layout, Reference, Web
color CSS 속성은 요소의 텍스트 및 텍스트 꾸밈의 전경 색상 값을 설정합니다. 또한 currentcolor를 바꿔 다른 속성도 간접적으로 설정할 수 있습니다. 이는 border-color와 같은 일부 속성의 기본값입니다..
132 cursor CSS, CSS Property, NeedsTranslation, Reference, Web
The cursor CSS property specifies which mouse cursor to display when the mouse pointer is over an element.
133 cursor 속성값에 URL 사용 CSS, CSS_2.1, Cross-browser_Development, Web Development
Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)은 URL 값을 CSS2 커서 속성값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.
134 flex CSS, CSS Flexible Boxes, CSS Property, Reference
flex는 CSS flex 컨테이너의 공간상에서 item이 차지하는 공간을 알맞게 키우거나 줄이게 하는 Property 입니다.  이 Property는 flex-grow, flex-shrink, and flex-basis의 값을 한번에 설정하는 shorthand property 입니다.
135 flex-basis CSS, CSS Flexible Boxes, CSS Property, Reference
flex-basis CSS 속성은 flex item이 렌더링 될 때 엘리먼트의 기본 크기를 결정합니다. 만약 box-sizing 속성을 수정하지 않는다면, 기본값인 content-box 속성을 기반하여 엘리먼트의 크기를 결정합니다.
136 flex-direction CSS, CSS Flexible Boxes, CSS Property, Reference
flex-direction CSS property는 flex container 내부에 flex-item 요소들을 어떻게 배열할 것인지를 설정합니다. flex-item 요소들의 배치를 x축(row)으로 할 것인지, y축(column)으로 할 것인지 결정합니다.
137 flex-flow CSS, CSS Flexible Boxes, CSS Property, Reference
flex-flow CSS property는 flex-direction/flex-wrap 각각의 속성값을 설정하는 단축 속성입니다.
138 flex-grow CSS, CSS Flexible Boxes, CSS Property, NeedsContent, Reference
flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받습니다. 하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.
139 flex-shrink CSS, CSS Flexible Boxes, CSS Property, NeedsContent, Reference
flex-shrink CSS property는 flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소됩니다.
140 flex-wrap CSS, CSS Flexible Boxes, CSS Property, Reference
CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.
141 float CSS, CSS Positioning, CSS Property, Reference
CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
142 font-family CSS, CSS 속성, CSS 폰트, 레퍼런스, 참조
CSS  font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을  지정할 수 있게 해줍니다.  값은 콤마로 구분하여 대체가 될 수 있음을 나타냅니다. 브라우저는 폰트 목록에서 컴퓨터에 설치되어 있거나 @font-face 규칙을 이용하여 다운로드 받을 수 있는 폰트 중 가장 첫번째 폰트를 선택할 것입니다.
143 font-size
font-size CSS 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 em 과 ex <length> 단위로 계산된 다른 항목들의 크기를 바꿉니다.
144 font-weight
font-weight CSS 속성은 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 normal 나 bold 일 때만 가능하다.
145 grid CSS, CSS Grid, CSS Property, Reference
grid CSS 속성은 shorthand property 입니다. 외재적인 속성인 (grid-template-rows, grid-template-columns, grid-template-areas), 값과 내재적인 속성인 (grid-auto-rows, grid-auto-columns, grid-auto-flow), 값을 한번에 설정합니다.
146 grid-area CSS, CSS Grid, CSS Property, Reference
grid-area 속성은 grid-row-start, grid-column-start, grid-row-end and grid-column-end 값을 한번에 설정하는 shorthand property 입니다. 해당 속성값은 grid item의 크기와 위치를 결정합니다., specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
147 height CSS, CSS Property, Reference
height CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, box-sizing이 border-box라면 테두리 영역의 높이를 설정합니다.
148 image-rendering
image-rendering CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.
149 inherit CSS, CSS Cascade, Layout, Reference, Web
inherit CSS 값은 요소가 부모 요소로부터 속성(property)의 계산값(computed value)을 갖도록 지정되게 합니다. 모든 CSS 속성에 허용됩니다.
150 inheritance CSS, Guide, Web
MDN 내 각 CSS 속성(property) 정의 페이지의 요약절은 그 속성이 기본(default)으로 상속되는지("Inherited: Yes") 혹은 상속되지 않는지("Inherited: no") 쓰여 있습니다. 이 상속 여부는 요소의 속성에 어떤 값이 지정되지 않을 때 일어나는 일을 제어합니다.
151 initial CSS, CSS Cascade, Layout, Reference, Web
initial CSS 키워드는 속성(property)의 초기값(initial value)을 요소(element)에 적용합니다. 모든 CSS 속성에 허용되고 요소가 속성의 초기값을 사용하도록 합니다.
152 initial value CSS, Guide, Web
각 CSS 속성(property) 정의 페이지의 요약절에 주어진 초기값(initial value)은 상속과 비상속 속성에 따라 의미가 다릅니다.
153 linear-gradient CSS, CSS 이미지, CSS 함수, 그래픽, 레이아웃, 웹, 편람
CSS의 linear-gradient() 함수는 선형 컬러 그레디언트를 나타내는 <image>를 만들어낸다. 이 함수의 결과 값은 CSS <gradient> 데이터 형의 객체다. 다른 그레디언트처럼 CSS 선형 그레디언트도 CSS <color>가 아니며 본래의 크기가 없는(no intrinsic dimensions) 이미지다. 즉, 미리 정해진 또는 우선시되는 크기나 비율은 없다. 실제적인 크기는 그레디언트가 적용되는 요소에 맞추어진다.
154 margin CSS, CSS Property, Reference
margin CSS 속성은 요소의 네 방향 여백을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다.
155 margin-top
CSS margin-top 속성은 요소의 상단에 margin 영역을 만든다. 0보다 작은 값도 허용된다.<tt>나 <span>과 같은 non-replaced inline 요소에는 영향을 미치지 않는다.
156 mask CSS, CSS 마스크
CSS에서 mask 속성은 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다.
157 max-width
max-width CSS 속성은 요소의 최대 너비를 설정합니다. 이는 width 속성에 사용된 값이 min-width에 지정된 값보다 넓어지는 것을 방지합니다.
158 min-width
min-width CSS 속성은 요소의 최소 너비를 설정합니다. 이는 width 속성에 사용된 값이 min-width에 지정된 값보다 작아지는 것을 방지합니다.
159 mix-blend-mode mix-blend-mode
mix-blend-mode CSS 속성은, element 의 content 가 어떻게 그 element 의 직속 부모 content 와 element 의 background 에 blend (혼합)되어야 하는지 서술한다.
160 opacity CSS, CSS Property, Reference
opacity CSS 속성은 요소의 투명도를 설정합니다.
161 order CSS, CSS Flexible Boxes, CSS Property, Reference
order CSS 속성은 flex-container/grid-container 요소 내부에 존재하는 flex-item/grid-item 요소의 배치 순서를 결정하는 속성입니다. 형제 요소로 렌더링 된 -item 요소들은 기본적으로 order 값을 기준으로하여 오름차순으로 배치됩니다. 만약, order 속성의 값이 동일한 -item 요소일 경우, 소스코드를 기준으로 순서가 정해집니다.
162 overflow
overflow CSS 속성(property)은 그것의 블록 레벨 컨테이너(block-level container)보다 내용(content)이 너무 클 때(즉, 내용을 감싸고 있는 영역보다 커졌을 때), 내용을 잘라낼 지, 스크롤 바를 보여줄 지, 혹은 범위를 넘어가게 보여줄 지를 기술합니다.
163 overflow-wrap CSS, CSS Property, CSS Text, Reference
overflow-wrap CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.
164 position CSS 포지셔닝, 고정위치, 상대위치, 절대위치, 포지셔닝
position 속성은 도큐먼트(document) 상에 요소를 배치하는 방법을 지정한다. top, right, bottom,  left 속성들은 요소가 최종적으로 배치될 위치를 지정한다.
165 specified value CSS, CSS Reference
CSS 속성(property)의 지정값(specified value)은 세 가지 방법 중 하나로 설정됩니다.
166 tab-size
tab-size CSS 속성은 탭 문자(U+0009)의 너비를 조절하는데 사용됩니다.
167 table-layout
table-layout CSS 속성은 테이블 셀, 행, 컬럼등의 레이아웃을 구성하기 위해 사용되는 알고리즘을 정의합니다.
168 text-shadow
CSS의 text-shadow 는 텍스트에 그림자(shadow)를 표현하기 위한 속성이다. 콤마(,)로 구분된 그림자 설정정보 리스트가 텍스트와 엘리먼트(element) text-decorations 속성에 적용될 수 있다.
169 transform
CSS의 transform 속성을 사용함으로써, CSS의 시각적 서식 모델(visual formatting model)의 좌표 공간을 변형시킬 수 있다. 해당 속성에 지정된 값에 따라 엘리먼트(element)에 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다.
170 transition
transition CSS 속성은 transition-property, transition-duration, transition-timing-function 과 transition-delay를 위한 단축 속성입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있습니다. 엘리먼트의 각 상태는 가상 클래스 를 사용해 정의된 :hover 이나 :active 또는 자바스크립트를 사용해 동적으로 만들어진 것들입니다.
171 transition-delay
transition-delay CSS 속성은 transition될 속성이 transition 요청을 받은 이후 실제로 transition하기까지 기다려야하는 시간의 양을 지정합니다.
172 unset CSS, CSS Cascade, Keyword, Layout, Reference, Web
unset CSS 키워드는 initial 및 inherit 키워드의 조합(combination)입니다. 이 다른 CSS 키워드 둘처럼, CSS 단축(shorthand) 속성 all 포함 모든 CSS 속성에 적용될 수 있습니다. 이 키워드는 속성을 부모로부터 상속받은 경우 그 상속값으로 아니면 초기값으로 재설정(reset)합니다. 다시 말해서, 첫 번째는 inherit 키워드처럼 두 번째는 initial 키워드처럼 행동합니다.
173 used value CSS, Guide, Web
모든 CSS 속성(property)의 사용값(used value)은 모든 계산이 수행된 뒤 그 속성의 최종값입니다. 일부 속성의 경우, 사용값은 window.getComputedStyle을 호출하여 검색될 수 있습니다. 크기(가령, width, line-height)는 모두 픽셀이고, 단축(shorthand) 속성(예, background)은 그 컴포넌트 속성(가령, background-color, display)과 일치하고 position 및 float과 일치하며 모든 CSS 속성은 값이 있습니다.
174 vertical-align CSS, CSS Property, Reference
vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.
175 white-space
white-space 속성은 어떤 요소(element) 안의 공백(whitespace)이 어떻게 처리될지를 나타내는데 사용됩니다.
176 width CSS, CSS Property, Reference
width CSS 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, box-sizing이 border-box라면 테두리 영역의 너비를 설정합니다.
177 will-change
will-change CSS 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공케 한다.  그래서 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화할 수 있다. 이러한 종류의 최적화는 잠재적으로 성능 비용이 큰 작업을 그것이 실제로 요구되기 전에 미리 실행함으로써 페이지의 반응성을 증가시킬 수 있다.
178 z-index
z-index CSS 속성은 엘리먼트와 그 엘리먼트의 자손 엘리먼트들의 z축 순서를 지정한다. 엘리먼트들이 겹쳐졌을 때 z축 순서에 따라 어떤 엘리먼트가 위에 올지 결정된다. z-index가 높은 엘리먼트는 낮은 엘리먼트를 덮는다.
179 가상 요소 Beginner, CSS, CSS Reference, Selectors
가상 클래스(pseudo-classes)처럼, 가상 요소(pseudo-element)는 선택자(selector)에 추가되지만 특별한 상태를 기술하는 대신, 문서의 특정 부분을 스타일할 수 있습니다. 예를 들어, ::first-line 가상 요소는 선택자에 의해 지정된 요소의 첫 줄만을 대상으로 합니다.
180 가상 클래스 CSS, CSS Reference, Intermediate, Selectors
CSS pseudo-class 는 선택될 요소(element)의 특별한 상태를 지정하는 선택자(selector)에 추가된 키워드입니다. 예를 들어 :hover는 사용자가 선택자에 의해 지정된 요소 위를 맴돌(hover) 때 스타일을 적용합니다.
181 공통된 CSS 질문들
Browsers use the DOCTYPE declaration to choose whether to show the document using a mode that is more compatible  with Web standards or with old browser bugs. Using a correct and modern DOCTYPE declaration at the start of your HTML will improve browser standards compliance.
182 구문 Beginner, CSS, Guide, Web
폭포수형(캐스케이딩) 스타일 시트(CSS) 언어의 기본 목표는 브라우저 엔진이 색상, 위치 지정 또는 장식과 같은 특정 기능을 사용하여 페이지에 요소를 그릴 수 있도록 하는 것입니다. 이러한 목표 달성을 위해 만들어진 CSS 구문을 이루고 있는 기본 구성 요소는 다음과 같습니다.
183 단축 속성 CSS, Guide, Reference, Web
단축 속성(shorthand)은 동시에 여러 다른 CSS 속성값을 설정하게 하는 CSS 속성입니다. 단축 속성을 사용하여, 웹 개발자는 시간과 에너지를 절약하는 더 간결하고 종종 더 읽기 쉬운 스타일시트를 작성할 수 있습니다.
184 레이아웃 모드 CSS
CSS 레이아웃 모드(layout mode, 가끔 layout으로 줄여 씀)는 형제(sibling) 및 조상(ancestor) 박스와 상호 작용하는 방식을 기반으로 박스의 위치와 크기를 결정하는 알고리즘입니다. 그 중 몇 가지입니다:
185 명시도 CSS, Guide
명시도specificity는 브라우저가 어떤 CSS 속성값이 요소와 가장 관련이 있고 따라서 적용되는 지를 결정하는 수단입니다. 명시도는 다른 종류의 CSS 선택자로 구성되는 일치(matching) 규칙에 기반합니다
186 배경 이미지 크기 조정하기 CSS
background-size CSS 속성으로 엘리먼트에 적용 될 배경 이미지 크기를 조정할 수 있습니다.
187 사용자 정의 CSS 속성 사용하기 (변수)
CSS 변수는 문서 전반적으로 재사용할 어떠한 특정 값을 포함하는, CSS 작성자가 정의한 엔터티이다.  이 변수는 사용자 정의 속성 표기법 (예 :--main-color: black;)을 사용하여 설정되며 var () 함수를 이용하여 엑세스할 수 있다. (예 : color: var(--main-color);).
188 속성 선택자 CSS, CSS 레퍼런스, 선택자, 속성 선택자, 초급
속성 선택자는 주어진 속성 및 속성값을 선택자로 사용하여 요소의 스타일을 선언한다.
189 시작 하기(CSS 안내서) CSS, 입문자, 필수
완전 초보를 위해, 이 CSS 안내서는 완전 초보용으로 Cascading Style Sheets (CSS) 소개 하겠습니다. 여기서는 기본적인 CSS기능을 직접 실행 해 볼수 있는 예제와 함께제공합니다. 또한 근래의 브라우저에서도 동작하는 CSS표준기능에 대해서도 보여 줄 것입니다.
190 CSS 동작 원리
이번에는 CSS 시작하기 안내서의 세번쨰 장으로 CSS가 브라우저에서 어떻게 동작하는지를 살펴 보자. 예제 Document를 분석하고 그 Style의 자세한 사항을 알아보자.
191 CSS란 무엇인가
여기가 CSS 시작하기 안내서의
192 내용물
CSS 시작하기 안내서 9번째 장; 이번에는 CSS에서
193 리스트
CSS 시작하기 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지  설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.
194 미디어
CSS 시작하기 안내서의 14번쨰 장. 지금까지 이번 안내서에서는 많은 부분을 Document를 어떻게 보여 줄것인지 결정하는 CSS의 속성과 변수에 관해 소개 했다. 이번에는 Stylesheet의 구조와 목적에 대해 다시 살펴 보자.
195 배치
CSS 시작하기 안내서 12번째 장; 여기서는 Document의 배치를 정하는 몇몇 방법에 대해 알아본다. 예제 document를 좀 바꿔 보자.
196 상자
CSS 시작하기 안내서 11번째 장; 여기서는 CSS를 통해 element들이 보여질때 page의 공간을 어떻게 배치하는지에 대해 알아본다. 예제 documnet에서 각 element의 여백 조절과 꾸미기에 대해 배워 보자.
197 색상
CSS 시작하기 안내서 8번째: 이번 장에서는 CSS에서 색상을 표현 하는 방법에 대해 자세히 알아본다. 예제 stylesheet에서 배경색을 설정 해 보자.
198 선택자
CSS 시작하기 안내서의 5번째 장; 여기서는 Style을 선택적으로 적용하는 방법과, 선택자의 종류에 따라 우선순위가 어떻게 다른지 설명한다. 예제 문서에서 태그에 속성을 추가해보고 샘플 스타일시트내에서 이 속성들을 사용해보자.
199 알기 쉬운 CSS
CSS 시작하기 안내서 6번째; CSS 언어 자체의 Style과 문법에 대해 논의 해보자. 좀더 이해하기 쉬운 방향으로 CSS를 바꿔 보자.
200 왜 CSS를 사용하나?
CSS 시작하기 두번째 장에서는 왜 Document는 CSS를 쓰는지에 대한 안내와 설명을 포함한다.
201 종속과 상속
CSS 시작하기 안내서의 4번쨰 섹션; stylesheets가 종속적으로 동작하는 것과 element가 부모로 부터 style을 상속 받는 것에 대해 서술해 본다. 단순하게 document의 많은 Style중 어떤 Style을 사용할 것인지 한단계 상속만으로 하나의 Style을 stylesheet에 추가 할 수 있다.
202 테이블
CSS 시작하기 안내서 13번째; 여기서는 고급 설렉터에 대해 알아보고, 테이블을 사용하는 특별한 방법에 대해 확인 해 보자. 테이블이 포함된 예제 Document와 여기서 사용될 Stylesheet를 만들어 보자.
203 텍스트 스타일
CSS 시작하기 안내서 7번째 장; 여기서는 텍스트 스타일에 대해 좀더 많은 예를 살펴 보자. 예제 Stylesheet를 다른 글씨체로 바꿔 보자.
204 인접 형제 선택자 CSS, CSS 참고자료, 모바일 브라우저 호환 필요, 선택자
이 선택자는 인접 선택자 혹은 다음-형제 선택자라고 합니다. 앞에서 지정한 엘리먼트의 바로 뒤에 있는 지정 엘리먼트만 선택합니다.
205 전체 선택자 Beginner, CSS, CSS Reference, Selectors
별표 (*)는 CSS 용 전체(universal, 전칭/와일드) 선택자(selector)입니다. 이는 모든 유형의 단일 요소(element)와 일치합니다. 단순 선택자의 별표를 생략하면 같은 효과가 있습니다. 예를 들어, *.warning 및 .warning은 같은 걸로 간주됩니다.
206 종속 CSS, Guide, Introduction, Layout, Reference
종속(Cascade)이란 서로 다른 원점에서 가져온 속성 여럿을 조합해 최종 결과를 도출하는 알고리즘입니다. Cascading Style Sheets라는 이름에서도 알 수 있듯 종속은 CSS의 중심입니다. 이 글은 종속이 무엇인지, 선언한 CSS 정의가 어떤 순서로 종속되는지, 그리고 여러분, 즉 웹 개발자에게 어떤 영향을 주는지 설명합니다.
207 컨테이닝 블록의 모든 것 (All about the containing block)
요소들의 크기와 위치는 컨테이닝 블록(containing block)에 의해 영향을 받곤한다. 대부분의 경우, 컨테이닝 블록은 요소의 가장 근접 조상의 콘텐츠 영역(content area)이나 항상 그렇지는 않다.
208 필터
filter 속성은 요소가 표시되기 전에 요소 렌더링시 흐림 또는 색상 이동과 같은 효과를 제공합니다. 필터는 일반적으로 이미지, 배경 또는 테두리의 렌더링을 조정하는 데 사용됩니다.

문서 태그 및 공헌자

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