CSS documentation index

Found 245 pages:

# Page Tags and summary
1 CSS: Cascading Style Sheets CSS, Design, Landing, Layout, Reference, l10n:priority, 스타일시트
Cascading Style Sheets(CSS)는 HTML이나 XML(SVG, XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다.
2 -moz-image-region CSS, CSS Property, CSS:Mozilla Extensions, Non-standard
XUL 요소와 가상요소들에 대하여 list-style-image  속성을 사용할때 이 속성은 전체이미지에서 사용되는 부분의 령역을 지정합니다.  이것은 요소들이 성능을 향상시키기 위해 같은 이미지의 서로다른 부분을 사용할수 있게 합니다.
3 -webkit-overflow-scrolling CSS, CSS Property, Non-standard, Reference
-webkit-overflow-scrolling CSS 속성은 해당 요소가 터치 단말기에서 모멘텀 기반 스크롤의 활성화 여부를 지정합니다.
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 CSS, Layout, Pseudo-class, Reference, Web
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
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 :hover CSS, Layout, Pseudo-class, Reference, Web
:hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.
10 :link CSS, Layout, Pseudo-class, Reference, Web
:link CSS 의사 클래스는 아직 방문하지 않은 요소를 나타냅니다.
11 :not() CSS, Layout, Pseudo-class, Reference
부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 기능 표기법입니다. 인수로 표시되지 않은 요소와 일치합니다. X는 다른 부정 선택자를 포함해서는 안 됩니다.
12 :nth-child CSS 의사 클래스, 레이아웃, 웹, 참고
CSS 의사 클래스 :nth-child(an+b)은 0 이상의 n에 대해서 도큐먼트 트리에서 자기 앞에 an+b-1 개의 형제가 있는 엘리먼트와 일치한다. 더 간단히 말하면 이 셀렉터는 일련의 형제들 중 순서가 an+b 패턴과 일치하는 몇 개의 자식 엘리먼트와 일치한다. 레벨 3 구현에서는 일치하는 엘리먼트의 부모가 있어야 하지만 레벨 4에서는 없어도 된다.
13 :visited CSS, Layout, Pseudo-class, Reference, Web
:visited CSS 의사 클래스는 사용자가 방문한 적이 있는 링크를 나타냅니다. :visited가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.
14 <angle-percentage> CSS, CSS Data Type, Reference
<angle-percentage> CSS 자료형은 <angle>과 <percentage> 모두 가능한 값을 나타냅니다.
15 &lt;angle&gt; CSS, CSS Data Type, Layout, Reference, Web
<angle> CSS 자료형은 각도의 값을 도, 그레이드, 라디안 또는 턴으로 표현합니다. <gradient>나 일부 transform 함수에서 사용합니다..
16 &lt;color&gt; CSS, CSS Date Type, Layout, Reference, Web
<color> CSS 자료형은 sRGB 색 공간의 한 색을 표현하며, 추가로 알파 채널 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 어떻게 합성되어야 하는지 지정할 수 있습니다.
17 &lt;filter-function&gt; CSS, CSS Data Type, Filter Effects, Reference
<filter-function> CSS 자료형은 입력 이미지의 모습을 변형할 수 있는 그래픽 효과를 나타냅니다.
18 blur() CSS, CSS Function, Filter Effects, Reference
blur() CSS 함수는 주어진 이미지에 가우시안 블러를 적용합니다
19 brightness() CSS, CSS Function, Filter Effects, Reference
brightness() CSS 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다.
20 contrast() CSS, CSS Function, Filter Effects, Reference
contrast() CSS 함수는 주어진 이미지의 대비를 조절합니다.
21 &lt;frequency&gt; CSS, CSS Data Type, Reference, Web
<frequency> CSS 자료형은 목소리의 높낮이 등 주파수를 나타냅니다. 현재 어떤 CSS 속성도 <frequency>를 사용하지 않습니다.
22 &lt;gradient&gt; CSS, CSS Data Type, CSS Images, Graphics, Layout, Reference, 그라데이션, 그레이디언트
<gradient> CSS 자료형은 <image>의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.
23 &lt;image&gt; CSS, CSS Data Type, CSS Images, Graphics, Layout, Reference, Web
<image> CSS 자료형은 2차원 이미지를 나타냅니다.
24 &lt;integer&gt; CSS, CSS Data Type, Reference, Web
<integer> CSS 자료형은 <number>의 종류 중 하나로 소수점이 없는 완전한 수, 즉 정수를 표현합니다. 정수는 column-count, counter-increment, grid-column, grid-row, z-index 등 다양한 속성에서 사용할 수 있습니다.
25 &lt;length-percentage&gt; CSS, CSS Date Type, Reference
<length-percentage> CSS 자료형은 <length> 또는 <percentage>인 값을 나타냅니다.
26 &lt;length&gt; CSS, CSS Data Type, Layout, Reference, Web, length
<length> CSS 자료형은 거리 값을 나타냅니다. width, height, margin, padding, border-width, font-size, text-shadow 등 다양한 속성에 사용할 수 있습니다.
27 &lt;number&gt; CSS, CSS Data Type, Layout, Reference, Web
<number> CSS 자료형은 숫자, 즉 정수 또는 실수를 표현합니다.
28 &lt;percentage&gt; CSS, CSS Data Type, Layout, Reference, Web
<percentage> CSS 자료형은 백분율 값을 나타냅니다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용합니다. width, height, margin, padding, font-size 처럼 다양한 속성에서 백분율을 쓸 수 있습니다.
29 &lt;string&gt; CSS, CSS Data Type, Layout, Reference, Web
<string> CSS 자료형은 연속한 문자 집합을 나타냅니다. content, font-family, quotes 등 많은 CSS 속성에서 사용합니다.
30 &lt;time&gt; CSS, CSS Date Type, Reference, Web
<time> CSS 자료형은 시간 값을 초나 밀리초 단위로 나타냅니다. animation, transition과 관련 속성에서 사용합니다.
31 &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.
32 matrix()
matrix() CSS 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 <transform-function> 데이터 타입입니다.
33 translate3d() translate3d
translate3d() CSS 함수는 3D공간에 요소의 위치를 이동시킵니다. 이 변환은 3차원 벡터에 의해 특성 지어지고,  그 좌표는 각 방향으로 얼마나 움직이는지를 정의합니다.
34 &lt;url&gt; CSS, CSS Data Type, Layout, Reference
<url> CSS 자료형은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 background-image, cursor, list-style 등 다양한 속성에서 사용할 수 있습니다.
35 @-규칙 At-rule, CSS, CSS Reference
@-규칙은 식별자(identifier)가 뒤따르는 at 기호('@' (U+0040 COMMERCIAL AT))로 시작하는 CSS 문이며 다음 세미콜론(';' (U+003B SEMICOLON)) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함합니다.
36 @charset At-rule, CSS, Layout, Reference, Web
@charset CSS at-규칙은 스타일 시트에 쓰이는 문자 인코딩을 지정합니다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 합니다; 중첩된 문이 아니기에, 조건부 그룹 at-규칙 내에 사용될 수 없습니다. 여러 @charset at-규칙이 정의된 경우, 첫 번째 것만 사용되고 HTML 요소의 style attribute 또는 HTML 페이지의 문자 집합과 관련 있는 <style> 요소 내에서 사용될 수 없습니다.
37 @font-face
CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. @font-face at-rule 은 CSS의 top-level에서 뿐 아니라, CSS conditional-group at-rule 안에서도 사용될 수도 있다.
38 @import At-rule, CSS, Reference
@import CSS at-규칙은 다른 스타일 시트에서 스타일 규칙을 import하는데 쓰입니다. 이 규칙은 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다; 중첩된 문이 아니기에, @import는 조건부 그룹 at-규칙 내에 사용될 수 없습니다.
39 @keyframes Animations, At-rule, CSS, Reference
@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
40 @media @media, At-rule, CSS, Reference
@media CSS @규칙은 중괄호로 구분된 CSS 블록 내 중첩문 집합을 미디어 질의에 정의된 조건과 연결합니다.
41 prefers-color-scheme @media, CSS, Reference, Web, prefers-color-scheme
prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.
42 @namespace At-rule, CSS, Layout, Reference, Web
@namespace는 CSS 스타일 시트에서 사용되는 XML 네임스페이스를 정의하는 at-규칙입니다. 정의된 네임스페이스는 오직 그 네임스페이스 내의 요소를 선택만 하기 위해 universal, type 및 attribute 선택자를 제한하는 데 사용될 수 있습니다. @namespace 규칙은 보통 여러 네임스페이스(인라인 SVG 또는 MathML 있는 HTML5 또는 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용합니다.
43 @page At-rule, CSS, Layout, Reference, Web
@page CSS @규칙은 문서를 인쇄할 때 일부 CSS 속성을 수정하는 데 쓰입니다. @page로 모든 CSS 속성을 바꿀 수는 없습니다. 문서의 margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break만 바꿀 수 있습니다. 다른 CSS 속성을 바꾸려는 시도는 무시됩니다.
44 @supports At-rule, CSS, Layout, Reference, Web
@supports CSS @규칙은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공합니다.
45 @viewport Adaptation, At-rule, CSS, Device, NeedsContent, NeedsTranslation, Reference, TopicStub
The @viewport CSS at-rule lets you configure the viewport through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).
46 height @viewport, CSS, CSS Descriptor, Reference
height CSS 서술자(descriptor)는 뷰포트의 min-height 및 max-height 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.
47 zoom CSS, CSS Descriptor, Graphics, Layout, NeedsExample, Reference
zoom CSS 설명자(descriptor)는 @viewport에 의해 정의된 문서의 초기 줌 배율(factor)을 설정합니다.
48 Alternative style sheets
Firefox는 대체 스타일시트 를 지원합니다. 대체 스타일시트를 제공하는 페이지에서는 보기>페이지 스타일 메뉴를 이용하여 페이지에 적용될 스타일을 선택할 수 있습니다. 따라서 사용자는 자신이 원하는 다양한 종류의 페이지를 볼 수 있게 됩니다.
49 CSS Animations CSS, CSS Animations, Overview, Reference
CSS Animations is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.
50 CSS 애니메이션 사용하기 Advanced, CSS, CSS Animations, Example, Experimental, Guide
CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.
51 CSS Basic Box Model CSS, CSS Box Model, Overview, Reference
CSS Basic Box Model은 각 요소에 대해 시각적 서식 모델에 따라 생성하고 배치하는 사각형 박스(안팎 여백 포함)를 위한 CSS 모듈입니다.
52 CSS 기본 박스 모델 입문 CSS, CSS Box Model, Guide, Layout
문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다.
53 마진 상쇄 정복 CSS, CSS Box Model
블록의 top 및 bottom 마진은 때로는 (결합되는 마진 중 크기가) 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))됩니다, 마진 상쇄(margin collapsing)로 알려진 행동.
54 CSS Basic User Interface CSS, CSS Basic User Interface, Overview, Reference
CSS Basic User Interface는 사용자 인터페이스와 연관된 렌더링 및 동작 기능을 정의할 수 있는 CSS 모듈입니다.
55 CSS Charsets CSS, CSS Charsets, Overview, Reference
CSS Charsets는 스타일 시트에서 사용하는 문자 집합을 정의할 수 있는 CSS 모듈입니다.
56 CSS Color CSS, CSS Colors, HTML Colors, Overview, Reference
CSS 색상은 색상, 색상 유형, 색상 혼합, 투명도 및 이러한 색상 효과를 HTML에 적용하는 방법을 다루는 CSS 모듈입니다. <color> 값을 취하는 모든 CSS 속성이 이 모듈에 속하는건 아니지만 의존성은 가지고 있습니다.
57 CSS Conditional Rules CSS, CSS Conditional Rules, Overview, Reference
CSS Conditional Rules는 프로세서 또는 스타일 시트에 적용되는 문서의 기능에만 기반을 두는 규칙 집합을 정의할 수 있는 CSS 모듈입니다.
58 CSS Device Adaptation CSS, CSS Device Adaptation, Overview, Reference
CSS Device Adapation은 뷰포트의 크기, 줌 배율(factor) 및 방향을 정의할 수 있는 CSS 모듈입니다.
59 CSS Flexible Box Layout CSS, CSS Flexible Boxes, Overview, Reference
CSS Flexible Box Layout은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈입니다. 플렉스 레이아웃 모델에서는, 플렉스 컨테이너의 자식을 어떤 방향으로도 배치할 수 있으며, 자식의 크기도 유연하게("플렉시블") 빈 공간을 채우거나, 컨테이너를 넘어가지 않도록 줄어듭니다. 자식 간의 수평 및 수직 정렬 또한 쉽게 조작할 수 있습니다.
60 Aligning Items in a Flex Container
flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스는 flex 컨테이너를 의미합니다)  내부를 중앙 정렬 할 수 있게 되었습니다. 이 가이드에서 우리는 flexbox의 정렬 및 끝 마추기 기능에 대해 자세히 살펴볼 것입니다.
61 flexbox의 기본 개념
일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능에 대한 개요를 다룹니다. 더 자세한 내용은 가이드의 다른 글에서 탐구하게 될 것입니다.
62 CSS Flow Layout CSS 흐름 레이아웃, 흐름
일반적인 흐름 Normal Flow, 또는 흐름 레이아웃 Flow Layout 은 그 레이아웃 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 요소가 보여지는 방식 입니다. 흐름이란 본질적으로 레이아웃 아래 서로 같이 동작하고 서로에게 서로가 알려지는 것들의 집합 입니다. 만약에 어느 하나가 흐름에서 벗어나면 그것은 독립적으로 동작하게 됩니다.
63 Introduction to formatting contexts
이 자료는 양식화 문맥 formatting contexts 의 개념과 그것의 종류인 블록 양식화 문맥 block formatting contexts, 인라인 양식화 문맥 inline formatting contexts, 그리고 플렉스 양식화 문맥 flex formatting contexts 에 대해 설명 합니다. 각 양식화 문맥의 기초 동작을 설명 하고, 그 동작을 어떻게 사용할 수 있는지에 대해도 설명 합니다.
64 CSS Fonts CSS, CSS Fonts, Overview, Reference
CSS Fonts는 글꼴 관련 속성 및 글꼴 자원이 로드되는 법을 정의하는 CSS 모듈입니다. 이는 글꼴의 스타일을 정의할 수 있습니다, 글꼴 패밀리, 크기 또는 굵기 및 한 문자에 여러 자체(glyph)가 있는 글꼴에 사용되는 이형(variant) 자체와 같은 줄높이도 정의할 수 있습니다.
65 CSS Generated Content CSS, CSS Generated Content, Overview, Reference
CSS Generated Content는 요소에 콘텐츠를 추가하는 법을 정의하는 CSS 모듈입니다.
66 CSS Images CSS, CSS Images, Overview, Reference
CSS Images는 사용될 수 있는 이미지 유형(<image> 유형, 포함하는 URL, 그러데이션 및 다른 유형의 이미지), 크기 조정 방법 및 이미지와 다른 대체 콘텐츠가 서로 다른 레이아웃 모델과 상호작용하는 법을 정의하는 CSS 모듈입니다.
67 CSS로 이미지 스프라이트 구현하기 Advanced, CSS, CSS Image, CSS 이미지, Graphics, Guide, Sprites, Web, 스프라이트
이미지 스프라이트는 여러 개의 이미지들이 필요한 아주 많은 웹앱에서 사용됩니다. 이미지 각각을 별도의 파일로 포함시키는 대신, 이미지들을 하나의 파일로 만들어서 포함시키면 HTTP 리퀘스트 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다.
68 CSS Lists and Counters CSS, CSS Lists, Overview, Reference
CSS Lists는 리스트 배치 방법, 리스트 마커를 스타일 할 수 있는 법을 정의하는 CSS 모듈입니다.
69 CSS 카운터 사용하기 CSS, CSS Counter Styles, Guide, Layout, Reference, Web, 번호, 카운터
CSS counters를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.
70 CSS Logical Properties and Values CSS, CSS Logical Properties, Overview, Reference
CSS Logical Properties and Values는 레이아웃을 제어하는 물리 속성에 논리 맵핑을 정의하는 CSS 모듈입니다.
71 CSS Masking CSS, CSS Masking, Overview, Reference
CSS Masking은 마스킹 및 클리핑을 포함해 시각 요소의 부분 또는 전체를 숨기기 위한 수단을 정의하는 CSS 모듈입니다.
72 CSS Miscellaneous CSS, Overview, Reference
이 페이지는 한참 실험 중이거나 다른 어떤 부류와도 맞지 않은 CSS 속성을 포함합니다.
73 CSS Multi-column Layout CSS, CSS Multi-column Layout, Layout, Overview, Reference
CSS Multi-column Layout은 다단 레이아웃을 정의하는 CSS 모듈입니다. 레이아웃에서 단의 숫자와 콘텐츠가 하나의 단에서 다른 단으로 흐르는 방식, 단 사이의 간격, 구분선과 구분선의 모양 등의 지원을 포함하고 있습니다.
74 CSS Namespaces CSS, CSS Namespaces, Overview, Reference
CSS Namespaces는 CSS에서 XML 네임스페이스를 지정할 수 있는 CSS 모듈입니다.
75 CSS Paged Media CSS, CSS Paged Media, CSS Reference, Overview
CSS Paged Media는 페이지 전환을 처리하는 방법을 정의하는 CSS 모듈입니다.
76 CSS Positioning CSS, CSS Positioning, Overview, Reference
CSS Positioning은 요소를 페이지에 배치하는 방법을 정의하는 CSS 모듈입니다.
77 CSS Ruby CSS, CSS Ruby, Overview, Reference
CSS Ruby는 행간 주석의 형태로 기본 텍스트와 함께 작게 실행되는 텍스트인 ruby 주석 표시와 관련된 렌더링 모델 및 서식 컨트롤을 제공하는 CSS 모듈입니다.
78 CSS Scroll Snap Points CSS, CSS Scroll Snap, Overview, Reference
CSS Scroll Snap Points는 물리보다는 논리상 방향과 차원 맵핑을 통해 레이아웃을 제어하는 능력을 제공하는 속성 및 값을 정의하는 CSS 모듈입니다.
79 CSS Shapes CSS, CSS Shapes, Overview, Reference
CSS Shapes는 CSS에서 사용하기 위한 기하학적 도형을 설명한다. 레벌1 명세에 의하면 떠있는 요소에 CSS Shapes를 적용할 수 있다. 명세의 정의에 의하면 떠있는 요소의 모양을 정의 하거나  요소 상자의 사각형을 따르는 대신 테두리 선을 따라 감싸지도록 하는 방법 등  다양한 방법을 정의하고 있다.
80 CSS Table CSS, CSS Table, Overview, Reference
CSS Table은 표 데이터 배치법을 정의하는 CSS 모듈입니다.
81 CSS Text CSS, CSS Text, Overview
CSS Text는 줄 바꿈, 정돈 및 정렬, 공백 처리 및 텍스트 변환 같은 텍스트 조작을 수행하는 법을 정의하는 CSS 모듈입니다.
82 CSS Text Decoration CSS, CSS Text Decoration, Overview, Reference
CSS Text Decoration은 밑줄, 텍스트 그림자 및 강조 표시 등 텍스트 장식에 관련된 기능을 정의하는 CSS 모듈입니다.
83 CSS Transforms CSS, CSS Transforms, Overview, Reference
CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.
84 CSS transform 사용하기 3D, Advanced, CSS, CSS Transforms, Graphics, Guide
CSS 변형(transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 본 가이드는 변형 사용법의 기초를 제시합니다.
85 CSS Transitions CSS, CSS Transitions, Overview, Reference
CSS Transitions는 특정 CSS 속성의 값을 점진적으로 바꿀 수 있는 CSS 모듈입니다. 타이밍 함수, 시간 등 여러 속성을 통해 값이 바뀌는 방식을 조절할 수 있습니다.
86 CSS 트랜지션 사용하기 Advanced, CSS, CSS Transitions, Guide
CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.
87 CSS Writing Modes CSS, CSS Writing Modes, Overview, Reference
CSS Writing Modes는 다양한 국제 쓰기 모드를 정의하는 CSS 모듈입니다, 좌에서 우(가령 Latin 및 Indic 스크립트에 사용됨), 우에서 좌(가령 Hebrew 또는 Arabic 스크립티에 사용됨), 양방향(좌에서 우 및 우에서 좌 스크립트를 섞을 때 사용됨) 및 세로(가령 일부 Asian 스크립트에 사용됨) 등.
88 CSS animated properties CSS
일부 CSS 속성은 애니메이션될 수 있습니다, 즉 그 값을 바꿀 때 CSS animation 또는 CSS transition이 사용된 경우 부드러운 방식으로 바꿀 수 있습니다.
89 CSS documentation index CSS, Index, MDN Meta
Found 236 pages:
90 CSS z-index 이해하기
우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다.
91 floating 엘리먼트의 쌓임
floating 엘리먼트들의 쌓임 순서는 약간 다르다. floating 엘리먼트들은 position이 지정된 블록과 지정되지 않은 블록 사이에 쌓인다.
92 z-index 적용
처음 예제에서(z-index가 없는 경우의 쌓임) 엘리먼트들이 기본적으로 어떻게 쌓이는지 설명했다. 만약 다른 쌓임 순서를 적용하고 싶다면 먼저 엘리먼트에 position 속성을 지정하고 z-index 속성을 지정해야한다.
93 z-index가 없는 경우의 쌓임
만약 모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다음 순서로 아래에서부터 위로 쌓인다.
94 쌓임 맥락 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.
95 쌓임 맥락 예제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 속성 값은 지정되지 않았다.
96 쌓임 맥락 예제2
굉장히 간단하지만 쌓임 맥락을 이해하는데 도움이 되는 예제를 하나 소개하려 한다. 이전 예제에서 본 4개의 DIV가 있다. 이번에는 두 레벨의 DIV 모두 z-index 속성 값을 지정했다.
97 쌓임 맥락 예제3
마지막 예제는 멀티 레벨 HTML 계층 구조에서 z-index 속성 값을 지정할때 생기는 문제에 대해 다룰 것이다.
98 CSS 그리드 레이아웃 CSS, Grid Layout, Grids, 개요, 그리드, 그리드 레이아웃, 레이아웃, 참고
CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.
99 Basic concepts of grid layout CSS, CSS 그리드, 가이드, 레이아웃
CSS 그리드 레이아웃(Grid Layout)은 CSS에 2차원의 그리드 시스템을 도입했습니다. 그리드는 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있습니다. 이 문서에서는 CSS 그리드 레이아웃 및 CSS 그리드 레이아웃 레벨 1 명세서에 포함된 새로운 기술 용어를 소개합니다. 이번 개요에 소개된 기능은 나머지 안내 문서에서 자세히 설명합니다.
100 Grid template areas CSS, CSS Grids, Guide
이전 가이드에서 우리는 그리드 라인에 대해서 살펴보았으며, 이 라인을 기준으로 어떻게 아이템들을 배치하는지 알아보았습니다. CSS 그리드 레이아웃으로 작업할 땐 거기엔 항상 라인이 있을 것이고, 이것은 아이템들을 그리드에 배치할 때 사용할 수 있는 아주 직관적인 방법이 될 수 있습니다. 그렇지만, 아이템을 그리드에 배치할 때 사용할 수 있는 또 다른 방법이 있는데, 이것은 독자적으로 혹은 라인 기준 배치 방법과 함께 혼용해서 사용할 수 있습니다. 이 방법은 이름이 지명된 템플릿 영역을 사용하여 아이템을 배치하는 작업과 연관돼 있으며, 이 방법이 정확히 어떻게 작동하는지 알아보겠습니다. 이것이 때때로 왜 그리드 레이아웃의 ascii-art 방식이라고 일컬어지는지 쉽게 눈치채실 수 있을 겁니다!
101 Layout using named grid lines CSS, CSS Grids, Guide
이전 가이드에선 그리드 트랙을 정의하면 생성되는 라인을 사용해서 아이템을 배치하는 법을 살펴보았으며, 또한 이름이 명명된 템플릿 영역을 가지고 어떻게 아이템들을 배치하는지도 알아보았습니다. 이번 가이드에선 이름이 주어진 라인을 쓰는 상황에서 이 두 가지 방법이 서로 어떻게 작용하는지 알아보겠습니다. 라인에 이름을 지어 주는 것이 매우 유용할 때도 있지만, 이름과 트랙 크기가 혼합돼서 사용되는 그리드 용법을 보고 있으면 매우 헷갈릴 수도 있습니다. 하지만 몇 가지 예제를 가지고 작업해 보시면 점점 명확해지면서 나중엔 작업하기도 훨씬 수월해지실 겁니다.
102 Line-based placement with CSS Grid CSS, CSS Grids, Guide
그리드 레이아웃의 기본 개념을 다룬 문서에서 라인 번호를 사용하여 그리드에 아이템을 배치하는 방법을 잠깐 살펴본 적이 있습니다. 이번 문서에서는 이 기본적 기능이 어떻게 작동하는지를 자세히 살펴보겠습니다.
103 Relationship of grid layout to other layout methods CSS, CSS Grids, Guide
CSS 그리드 레이아웃은 레이아웃 작업을 위한 전체 시스템 중의 일부로서, 다른 CSS 기술과 함께 어우러져 작동하도록 설계되었습니다. 이번 가이드에서는 이미 사용하고 계신 다른 기술과 그리드가 어떻게 잘 어울리는지 설명해 드리겠습니다.
104 CSS 기본 자료형 CSS, CSS Data Type, Overview, Reference
CSS 기본 자료형은 CSS 속성과 함수가 받아들이는 일반적인 값(키워드와 단위 포함)을 정의합니다. 기본 자료형은 component value type의 특별한 종류입니다.
105 CSS 배경 및 테두리 CSS, CSS Backgrounds and Borders, Overview, Reference
CSS Backgrounds and Borders는 요소의 배경 및 테두리를 꾸밀 수 있는 CSS 모듈입니다.
106 배경 이미지 크기 조정하기 CSS, CSS Background, Example, Guide, Intermediate, Reference, Web
CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. background-size 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다.
107 한 번에 여러 배경 사용하기 CSS, CSS Background, Example, Guide, Reference
여러 개의 배경을 한 번에 적용할 수도 있습니다. 첫 번째 배경이 맨 위에, 마지막 배경이 맨 밑에 위치하는 레이어 구조를 사용하게 됩니다.
108 CSS 선택자
선택자는 CSS 규칙조합이 어떤 요소들에 적용될지 정의한다.
109 CSS 참고서 CSS, Overview, Reference, l10n:priority
CSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 가상 클래스, 가상 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 모든 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다. 추가로 간단한 DOM-CSS / CSSOM 참조도 들어 있습니다.
110 CSS3
CSS3는 Cascading Style Sheets(CSS) 언어의 가장 최신 버전이고 CSS2.1을 상속하는 것을 목표로  합니다.  CSS3는 개발자들이 오랫동안 기다려온 새로운 기능들을 지원하게 되었습니다. 다중열(rounded corners), 그림자( shadows) , 부드러운 색의 변이(gradients) , 변이(transitions), 움직임(animations) 등도 지원합니다.
111 ID 선택자 CSS, Reference, Selectors
CSS ID 선택자는 요소의 id 속성 값을 비교하여 완전히 동일한 id를 가진 요소를 선택합니다.
112 Media queries CSS, CSS 미디어 쿼리, Overview, 레퍼런스, 미디어 쿼리, 반응형 디자인
미디어 쿼리는 다양한 기기 특성과 파라메터의 존재 여부에 따라 사이트, 혹은 앱을 조정할 수 있습니다.
113 접근성을 위한 미디어 쿼리 사용하기 @media, CSS, 미디어 속성, 접근성
미디어쿼리(Media Queries)는 장애를 가진 사용자가 웹사이트를 더 쉽게 이해할 수 있도록 도울 수 있습니다.
114 Paged Media CSS, CSS3, Page Breaks
인쇄 미디어(paged media) 속성은 인쇄 콘텐츠의 프레젠테이션 또는 콘텐츠를 개별 페이지로 나누는 다른 미디어를 제어합니다. 페이지 나누기 설정, 인쇄 가능 영역 제어, 서로 다른 좌우 페이지 스타일 및 요소 내부 나누기 제어를 할 수 있습니다. 널리 지원되는 속성은 포함합니다
115 Property Template CSS, CSS Reference
요약.
116 Replaced element CSS, Layout, Reference, css layout, rendering, replaced element
대표적인 대체 요소는 다음과 같습니다.
117 align-content CSS, CSS Box Alignment, CSS Property, Reference
CSS align-content property는 flex container에서 browser가 간격과 아이템들을 xy좌표축에서의 공간을 할당하는 방법을 정의합니다.
118 align-items CSS, CSS Flexible Boxes, CSS Property, Reference
CSS align-items property는 바로 접하고 있는 flex items에 align-self 를 일괄적용한다. align-self property는 해당 item이 차지하는 공간의 중앙인지 시작인지 끝인지에 정렬한다.
119 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 값은 무시 됩니다.
120 animation CSS, CSS Animations, CSS Property, Reference
animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용합니다. animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state의 단축 속성입니다.
121 animation-delay CSS, CSS Property, CSS animation, Reference
animation-delay CSS 속성은 애니메이션이 시작할 시점을 지정합니다. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있습니다.
122 animation-direction CSS 속성, CSS 애니메이션
animation-direction CSS 속성은 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.
123 animation-duration CSS 애니메이션
animation-duration CSS 속성은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다.
124 animation-fill-mode CSS 속성, CSS 애니메이션
animation-fill-mode CSS 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.
125 animation-name
animation-name CSS 속성은 하나 또는 하나 이상의 애니메이션이 실행될 요소를 설정합니다. Each name is an @keyframes at-rule that sets the property values for the animation sequence.
126 background CSS, CSS Background, CSS Property, Reference
background CSS 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.
127 background-color CSS, CSS Background, CSS Property, Graphics, HTML Colors, HTML Styles, Layout, Reference, Styles, Styling HTML
background-color CSS 속성은 요소의 배경 색을 지정합니다.
128 background-image CSS, CSS Background, CSS Property, Reference
background-image CSS 속성은 요소의 배경 이미지를 한 개나 여러 개 지정합니다.
129 border CSS, CSS Borders, CSS Property, Layout, Reference
border CSS 단축 속성은 요소의 테두리를 설정합니다.border-width, border-style,border-color의 값을 설정합니다.
130 border-bottom CSS, CSS Borders, CSS Property, Reference, 테두리
border-bottom CSS 단축 속성은 요소의 아래쪽 테두리를 설정합니다.
131 border-bottom-color CSS, CSS Borders, CSS Property, Reference
border-bottom-color CSS 속성은 요소의 아래쪽 테두리 색상을 지정합니다.
132 border-bottom-style CSS, CSS Borders, CSS Property, Reference
border-bottom-style CSS 속성은 요소 테두리의 아래쪽 스타일을 지정합니다.
133 border-bottom-width CSS, CSS Borders, CSS Property, Reference
border-bottom-width CSS 속성은 요소의 아래 테두리 너비를 지정합니다.
134 border-collapse CSS, CSS Borders, CSS Property, CSS Tables, Reference
border-collapse CSS 속성은 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있습니다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유합니다.
135 border-color CSS, CSS Borders, CSS Property, Reference
border-color CSS 단축 속성은 모든 면의 테두리 색상을 설정합니다.
136 border-image CSS, CSS Borders, CSS Property, Reference
border-image CSS 속성은 요소 border-style의 자리에 이미지를 그립니다.
137 border-image-outset CSS, CSS Borders, CSS Property, Reference
border-image-outset CSS 속성은 요소의 테두리 상자와 테두리 이미지의 거리를 설정합니다.
138 border-image-repeat CSS, CSS Borders, CSS Property, Reference
border-image-repeat CSS 속성은 원본 이미지의 모서리 영역을 요소의 테두리 이미지 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.
139 border-image-slice CSS, CSS Borders, CSS Property, Reference
border-image-slice CSS 속성은 border-image-source로 설정한 이미지를 여러 개의 영역으로 나눕니다. 이렇게 나눠진 영역이 요소의 테두리 이미지를 이룹니다.
140 border-image-source CSS, CSS Borders, CSS Property, Reference
border-image-source CSS 속성은 요소의 테두리 이미지로 사용할 원본 이미지를 지정합니다.
141 border-image-width CSS, CSS Borders, CSS Property, Reference
border-image-width CSS 속성은 요소 테두리 이미지의 너비를 설정합니다.
142 border-left CSS, CSS Borders, CSS Property, Reference, 테두리
border-left CSS 단축 속성은 요소의 왼쪽 테두리를 설정합니다.
143 border-left-color CSS, CSS Borders, CSS Property, Reference
border-left-color CSS 속성은 요소의 왼쪽 테두리 색상을 지정합니다.
144 border-left-style CSS, CSS Borders, CSS Property, Reference
border-left-style CSS 속성은 요소 테두리의 왼쪽 스타일을 지정합니다.
145 border-left-width CSS, CSS Borders, CSS Property, Reference
border-left-width CSS 속성은 요소의 왼쪽 테두리 너비를 지정합니다.
146 border-radius CSS, CSS Property, Reference
border-radius CSS 속성은 요소의 테두리를 둥글게 만듭니다. 하나의 값을 사용해 원형 모서리를, 두 개의 값을 사용해 타원형 모서리를 적용할 수 있습니다.
147 border-right CSS, CSS Borders, CSS Property, Reference, 테두리
border-right CSS 단축 속성은 요소의 오른쪽 테두리를 설정합니다.
148 border-right-color CSS, CSS Borders, CSS Property, Reference
border-right-color CSS 속성은 요소의 오른쪽 테두리 색상을 지정합니다.
149 border-right-style CSS, CSS Borders, CSS Property, Reference
border-right-style CSS 속성은 요소 테두리의 오른쪽 스타일을 지정합니다.
150 border-right-width CSS, CSS Borders, CSS Property, Reference
border-right-width CSS 속성은 요소의 오른쪽 테두리 너비를 지정합니다.
151 border-spacing CSS, CSS Property, CSS Tables, Reference
border-spacing CSS 속성(property)은 인접한 표 셀의 테두리 간 간격을 지정합니다 (분리 테두리 모델만을 위한). 이는 프리젠테이션 HTML에서 cellspacing attribute에 해당하지만 선택 사항인 두 번째 값은 서로 다른 가로 및 세로 간격을 설정하는데 사용될 수 있습니다.
152 border-style CSS, CSS Borders, CSS Property, Reference
border-style CSS 단축 속성은 요소 테두리 네 면의 스타일을 지정합니다.
153 border-top CSS, CSS Borders, CSS Property, Reference, 테두리
border-top CSS 단축 속성은 요소의 위쪽 테두리를 설정합니다.
154 border-top-color CSS, CSS Borders, CSS Property, Reference
border-top-color CSS 속성은 요소의 위쪽 테두리 색상을 지정합니다.
155 border-top-style CSS, CSS Borders, CSS Property, Reference
border-top-style CSS 속성은 요소 테두리의 위쪽 스타일을 지정합니다.
156 border-top-width CSS, CSS Borders, CSS Property, Reference
border-top-width CSS 속성은 요소의 위쪽 테두리 너비를 지정합니다.
157 border-width CSS, CSS Borders, CSS Property, Reference
border-width CSS 단축 속성은 요소 네 면 테두리의 너비를 설정합니다.
158 box-shadow CSS, CSS Property, CSS Styles, Reference
box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이루어집니다.
159 box-sizing CSS, CSS Property, Reference
box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.
160 calc() CSS, CSS Function, Layout, Reference, Web
calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다.
161 clear CSS, CSS Positioning, CSS Property, Reference
clear CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다.
162 color CSS, CSS Colors, CSS Property, CSS Text, Layout, Reference, Web, 색
color CSS 속성은 요소의 글씨 및 글씨 장식의 전경색과 currentcolor의 값을 설정합니다.
163 cursor CSS, CSS Property, Reference, Web
cursor CSS 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.
164 cursor 속성값에 URL 사용 CSS, CSS_2.1, Cross-browser_Development, Web Development
Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)은 URL 값을 CSS2 커서 속성값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.
165 display CSS, CSS Display, CSS Property, Reference, display
display CSS property는 element의 display type을 정의합니다. 이것은 박스를 어떻게 생성할 것인지 결정하는 두가지 기본 속성으로 이루어져 있습니다. outer display type은 flow layout 상에서 어떻게 적용될 것인지, inner display type 은 박스 안의 child elements를 어떻게 배치할 것인지 정합니다.
166 filter CSS, CSS Property, Reference, SVG, SVG Filter
filter CSS 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다.
167 flex CSS, CSS Flexible Boxes, CSS Property, Reference
flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.
168 flex-basis CSS, CSS Flexible Boxes, CSS Property, Reference
flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.
169 flex-direction CSS, CSS Flexible Boxes, CSS Property, Reference
flex-direction CSS 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.
170 flex-flow CSS, CSS Flexible Boxes, CSS Property, Reference
flex-flow CSS 속성은 flex-direction, flex-wrap 속성의 단축 속성입니다.
171 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 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.
172 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 요소의 크기가 축소됩니다.
173 flex-wrap CSS, CSS Flexible Boxes, CSS Property, Reference
CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.
174 float CSS, CSS Positioning, CSS Property, Reference
CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
175 font CSS, CSS Fonts, CSS Property, Reference
font CSS 속성은 font-style, font-variant, font-weight, font-size, line-height, font-family의 단축 속성입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다.
176 font-family CSS, CSS Fonts, CSS Property, Reference
CSS font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을  지정할 수 있게 해줍니다.
177 font-size
font-size CSS 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 em 과 ex <length> 단위로 계산된 다른 항목들의 크기를 바꿉니다.
178 font-weight
font-weight CSS 속성은 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 normal 나 bold 일 때만 가능하다.
179 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), 값을 한번에 설정합니다.
180 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.
181 height CSS, CSS Property, Reference
height CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, box-sizing이 border-box라면 테두리 영역의 높이를 설정합니다.
182 image-rendering CSS, CSS Images, CSS Property, Reference
image-rendering CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.
183 inherit CSS, CSS Cascade, Layout, Reference, Web
inherit CSS 값은 요소가 부모 요소로부터 속성(property)의 계산값(computed value)을 갖도록 지정되게 합니다. 모든 CSS 속성에 허용됩니다.
184 initial CSS, CSS Cascade, Layout, Reference, Web
initial CSS 키워드는 속성의 초기값(initial value)을 요소에 적용합니다. 모든 CSS 속성에 허용되고 요소가 속성의 초기값을 사용하도록 합니다.
185 letter-spacing CSS, CSS Property, CSS Text, Reference, 글자 간격
letter-spacing CSS 속성은 글자 사이의 간격을 조절합니다.
186 linear-gradient CSS, CSS Function, CSS Images, Graphics, Layout, Reference, Web, gradient
linear-gradient() CSS 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 <image>의 특별한 종류인 <gradient> 자료형입니다.
187 margin CSS, CSS Property, Reference
margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다.
188 margin-bottom CSS, CSS Property, Reference
margin-bottom CSS 속성은 요소의 아래쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.
189 margin-left CSS, CSS Property, Layout, Reference
margin-left CSS 속성은 요소의 왼쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.
190 margin-right CSS, CSS Property, Reference
margin-right CSS 속성은 요소의 오른쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.
191 margin-top CSS, CSS Property, Reference
margin-top CSS 속성은 요소의 위쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.
192 mask CSS, CSS Property, Layout, Reference, SVG, Web
mask CSS 속성은 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다.
193 max-height CSS, CSS Property, Reference
max-height CSS 속성은 요소의 최대 높이를 설정합니다. max-height는 height 속성의 사용값이 자신의 값보다 커지는걸 방지합니다.
194 max-width CSS, CSS Property, Reference
max-width CSS 속성은 요소의 최대 너비를 설정합니다. max-width는 width 속성의 사용값이 자신의 값보다 커지는걸 방지합니다.
195 min-height CSS, CSS Property, Reference
max-height CSS 속성은 요소의 최소 높이를 설정합니다. min-height는 height 속성의 사용값이 자신의 값보다 작아지는걸 방지합니다.
196 min-width CSS, CSS Property, Reference
min-width CSS 속성은 요소의 최소 너비를 설정합니다. min-width는 width 속성의 사용값이 자신의 값보다 작아지는걸 방지합니다.
197 mix-blend-mode mix-blend-mode
mix-blend-mode CSS 속성은, element 의 content 가 어떻게 그 element 의 직속 부모 content 와 element 의 background 에 blend (혼합)되어야 하는지 서술한다.
198 opacity CSS, CSS Property, Reference, 색
opacity CSS 속성은 요소의 불투명도를 설정합니다.
199 order CSS, CSS Flexible Boxes, CSS Property, Reference
order CSS 속성은 flex-container/grid-container 요소 내부에 존재하는 flex-item/grid-item 요소의 배치 순서를 결정하는 속성입니다. 형제 요소로 렌더링 된 -item 요소들은 기본적으로 order 값을 기준으로하여 오름차순으로 배치됩니다. 만약, order 속성의 값이 동일한 -item 요소일 경우, 소스코드를 기준으로 순서가 정해집니다.
200 overflow CSS, CSS Box Model, CSS Property, Layout, Reference
overflow CSS 속성은 그것의 블록 레벨 컨테이너(block-level container)보다 내용(content)이 너무 클 때(즉, 내용을 감싸고 있는 영역보다 커졌을 때), 내용을 잘라낼 지, 스크롤 바를 보여줄 지, 혹은 범위를 넘어가게 보여줄 지를 기술합니다.
201 overflow-wrap CSS, CSS Property, CSS Text, Reference
overflow-wrap CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.
202 padding CSS, CSS Padding, CSS Property, Reference
padding CSS 속성은 요소의 네 방향 안쪽 여백 영역을 설정합니다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성입니다.
203 padding-bottom CSS, CSS Padding, CSS Property, Reference
padding-bottom CSS 속성은 요소의 아래쪽에 안쪽 여백 영역을 설정합니다.
204 padding-left CSS, CSS Padding, CSS Property, Reference
padding-left CSS 속성은 요소의 왼쪽에 안쪽 여백 영역을 설정합니다.
205 padding-right CSS, CSS Padding, CSS Property, Reference
padding-right CSS 속성은 요소의 오른쪽에 안쪽 여백 영역을 설정합니다.
206 padding-top CSS, CSS Padding, CSS Property, Reference
padding-top CSS 속성은 요소의 위쪽에 안쪽 여백 영역을 설정합니다.
207 pointer-events
pointer-events CSS 속성은, 특정 엘리먼트의 트리거 역할을 설정합니다. '시각적'으로 트리거 역할(hover, active)을 하는 기능 뿐만 아니라, 이벤트 핸들러가 등록 된 상태의 엘리먼트일지라도 이벤트 트리거로서의 역할을 강제로 막을 수 있습니다.
208 position CSS, CSS Positioninng, CSS Property, Reference
position CSS 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom,  left 속성이 요소를 배치할 최종 위치를 결정합니다.
209 tab-size
tab-size CSS 속성은 탭 문자(U+0009)의 너비를 조절하는데 사용됩니다.
210 table-layout CSS, CSS Property, CSS Tables, Reference
table-layout CSS 속성은 테이블 셀, 행, 컬럼등의 레이아웃을 구성하기 위해 사용되는 알고리즘을 정의합니다.
211 text-decoration CSS, CSS Property, CSS Text Decoration, Reference
text-decoration CSS 단축 속성은 글씨의 장식(선) 색을 지정합니다.
212 text-shadow CSS, Reference
text-shadow CSS 속성은 텍스트에 그림자(shadow)를 표현하기 위한 속성이다. 콤마(,)로 구분된 그림자 설정정보 리스트가 텍스트와 엘리먼트(element) text-decorations 속성에 적용될 수 있다.
213 transform
CSS의 transform 속성을 사용함으로써, CSS의 시각적 서식 모델(visual formatting model)의 좌표 공간을 변형시킬 수 있다. 해당 속성에 지정된 값에 따라 엘리먼트(element)에 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다.
214 transition
transition CSS 속성은 transition-property, transition-duration, transition-timing-function 과 transition-delay를 위한 단축 속성입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있습니다. 엘리먼트의 각 상태는 가상 클래스 를 사용해 정의된 :hover 이나 :active 또는 자바스크립트를 사용해 동적으로 만들어진 것들입니다.
215 transition-delay
transition-delay CSS 속성은 transition될 속성이 transition 요청을 받은 이후 실제로 transition하기까지 기다려야하는 시간의 양을 지정합니다.
216 unset CSS, CSS Cascade, Keyword, Layout, Reference, Web
unset CSS 키워드는 initial 및 inherit 키워드의 조합(combination)입니다. 이 다른 CSS 키워드 둘처럼, CSS 단축(shorthand) 속성 all 포함 모든 CSS 속성에 적용될 수 있습니다. 이 키워드는 속성을 부모로부터 상속받은 경우 그 상속값으로 아니면 초기값으로 재설정(reset)합니다. 다시 말해서, 첫 번째는 inherit 키워드처럼 두 번째는 initial 키워드처럼 행동합니다.
217 vertical-align CSS, CSS Property, Reference
vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.
218 visibility CSS, CSS Box Model, CSS Property, Layout, Reference, Web
visibility CSS 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다.
219 white-space
white-space 속성은 어떤 요소(element) 안의 공백(whitespace)이 어떻게 처리될지를 나타내는데 사용됩니다.
220 width CSS, CSS Property, Reference
width CSS 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, box-sizing이 border-box라면 테두리 영역의 너비를 설정합니다.
221 will-change
will-change CSS 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공케 한다.  그래서 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화할 수 있다. 이러한 종류의 최적화는 잠재적으로 성능 비용이 큰 작업을 그것이 실제로 요구되기 전에 미리 실행함으로써 페이지의 반응성을 증가시킬 수 있다.
222 word-break
word-break CSS 요소는 문자가 내용 밖으로 벗어날 경우, 이를 줄바꿈할 것인지에 대한 여부를 설정합니다.
223 z-index
z-index CSS 속성은 엘리먼트와 그 엘리먼트의 자손 엘리먼트들의 z축 순서를 지정한다. 엘리먼트들이 겹쳐졌을 때 z축 순서에 따라 어떤 엘리먼트가 위에 올지 결정된다. z-index가 높은 엘리먼트는 낮은 엘리먼트를 덮는다.
224 가상 요소 Beginner, CSS, CSS Reference, Selectors
가상 클래스(pseudo-classes)처럼, 가상 요소(pseudo-element)는 선택자(selector)에 추가되지만 특별한 상태를 기술하는 대신, 문서의 특정 부분을 스타일할 수 있습니다. 예를 들어, ::first-line 가상 요소는 선택자에 의해 지정된 요소의 첫 줄만을 대상으로 합니다.
225 가상 클래스 CSS, CSS Reference, Intermediate, Selectors
CSS pseudo-class 는 선택될 요소(element)의 특별한 상태를 지정하는 선택자(selector)에 추가된 키워드입니다. 예를 들어 :hover는 사용자가 선택자에 의해 지정된 요소 위를 맴돌(hover) 때 스타일을 적용합니다.
226 결정값 CSS, Reference
CSS 속성의 결정값은 getComputedStyle()이 반환하는 값입니다.
227 계산값 CSS, Reference
CSS 속성의 계산값은 아래 방식으로 지정값(specified value)에서 계산됩니다.
228 공통된 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.
229 구문 Beginner, CSS, Guide, Web
종속형 스타일 시트(CSS) 언어의 기본 목표는 브라우저 엔진이 색상, 위치 지정 또는 장식과 같은 특정 기능을 사용하여 페이지에 요소를 그릴 수 있도록 하는 것입니다.
230 단축 속성 CSS, Guide, Layout, Reference, Web
단축 속성은 동시에 여러 다른 CSS 속성값을 설정할 수 있는 CSS 속성입니다. 단축 속성을 사용하면 웹 개발자의 시간과 에너지를 절약하는 간결한(읽기도 좋은) 스타일 시트를 작성할 수 있습니다.
231 레이아웃 모드 CSS
CSS 레이아웃 모드(layout mode, 가끔 layout으로 줄여 씀)는 형제(sibling) 및 조상(ancestor) 박스와 상호 작용하는 방식을 기반으로 박스의 위치와 크기를 결정하는 알고리즘입니다. 그 중 몇 가지입니다:
232 명시도 CSS, Example, Guide, Reference, Web
명시도란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다.
233 사용값 CSS, Reference
CSS 속성의 사용값은 계산값에 모든 계산을 수행한 후의 결과 값입니다.
234 사용자 정의 CSS 속성 사용하기 (변수) CSS, Guide, Web
CSS 변수는 문서 전반적으로 재사용할 어떠한 특정 값을 포함하는, CSS 작성자가 정의한 엔터티이다. 이 변수는 사용자 정의 속성 표기법 (예 :--main-color: black;)을 사용하여 설정되며 var () 함수를 이용하여 엑세스할 수 있다. (예 : color: var(--main-color);).
235 상속 CSS, Guide, Inheritance, Layout, Web
MDN 내 각 CSS 속성(property) 정의 페이지의 요약절은 그 속성이 기본(default)으로 상속되는지("Inherited: Yes") 혹은 상속되지 않는지("Inherited: no") 쓰여 있습니다. 이 상속 여부는 요소의 속성에 어떤 값이 지정되지 않을 때 일어나는 일을 제어합니다.
236 속성 선택자 CSS, Reference, Selectors
CSS 속성 선택자 는 요소의 주어진 속성의 존재 여부나 그 값을 판별해 선택합니다.
237 실제값 CSS, Reference
CSS 속성의 실제값은 모든 근사치(approximation)가 적용된 뒤의 사용값입니다. 예를 들어, 사용자 에이전트는 오직 정수 픽셀값으로 테두리(border)를 렌더링할 수도 있고 테두리의 계산된 폭(width)에 근접하도록 강제할 지도 모릅니다.
238 유형 선택자 CSS, HTML, Node, Reference, Selectors
CSS 유형 선택자는 노드 이름을 사용해 요소를 선택합니다. 즉 문서 내에서 주어진 유형의 모든 요소를 선택합니다.
239 인접 형제 선택자 CSS, Reference, Selectors
인접 형제 선택자(+)는 앞에서 지정한 요소의 바로 다음에 위치하는 요소만 선택합니다.
240 전체 선택자 CSS, Reference, Selectors
CSS 전체 선택자(*)는 모든 형태의 모든 요소를 선택합니다.
241 종속 CSS, Guide, Introduction, Layout, Reference
종속(Cascade)이란 서로 다른 원점에서 가져온 속성 여럿을 조합해 최종 결과를 도출하는 알고리즘입니다. Cascading Style Sheets라는 이름에서도 알 수 있듯 종속은 CSS의 중심입니다. 이 글은 종속이 무엇인지, 선언한 CSS 정의가 어떤 순서로 종속되는지, 그리고 여러분, 즉 웹 개발자에게 어떤 영향을 주는지 설명합니다.
242 지정값 CSS, CSS Reference
CSS 속성의 지정값은 세 가지 방법 중 하나로 설정됩니다.
243 초기값 CSS, Reference
각 CSS 속성(property) 정의 페이지의 요약절에 주어진 초기값(initial value)은 상속과 비상속 속성에 따라 의미가 다릅니다.
244 컨테이닝 블록의 모든 것 CSS, Guide, Layout, Position
요소들의 크기와 위치는 컨테이닝 블록(containing block)의 영향을 받곤 합니다. 대부분의 경우 어떤 요소의 컨테이닝 블록은 그 요소에 가장 가까운 블록 레벨 조상의 콘텐츠 영역이나, 항상 그런 것은 아닙니다. 이 글에서는 요소의 컨테이닝 블록을 결정하는 요인을 살펴보겠습니다.
245 클래스 선택자 CSS, Reference, Selectors
CSS 클래스 선택자는 요소의 class 속성을 판별하고 선택합니다.

문서 태그 및 공헌자

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