1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
---
title: CSS 란 무엇인가?
slug: Learn/CSS/First_steps/What_is_CSS
translation_of: Learn/CSS/First_steps/What_is_CSS
---
<div>{{LearnSidebar}}</div>
<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다룹니다.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">전제조건:</th>
<td>컴퓨터 기본 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식 및 HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습)</td>
</tr>
<tr>
<th scope="row">목적:</th>
<td>CSS가 무엇인지 배우기.</td>
</tr>
</tbody>
</table>
<p><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 단원에서는 HTML 이 무엇인지, 그리고 문서를 마크 업하는 데 사용되는 방법에 대해 설명했습니다. 이 문서는 웹 브라우저에서 읽을 수 있습니다. 제목은 일반 텍스트보다 크게 보이며, 단락은 줄바꿈이 되고 공백이 있습니다. 링크는 텍스트의 나머지 부분과 구분하기 위해 색상과 밑줄이 표시됩니다. 현재 보고 있는 것은 브라우저의 기본 스타일입니다. 페이지 작성자가 명시적인 스타일을 지정하지 않은 경우에도 기본적으로 읽을 수 있도록 브라우저가 HTML에 적용하는 매우 기본적인 스타일입니다.</p>
<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
<p>그러나, 모든 웹 사이트가 그렇게 보인다면 웹은 지루한 곳이 될 것입니다. CSS를 사용하면 브라우저에서 HTML 요소의 모양을 정확하게 제어하고 원하는 디자인을 사용하여 마크 업을 표시할 수 있습니다.</p>
<h2 id="CSS_란_무엇입니까">CSS 란 무엇입니까?</h2>
<p>앞에서 언급했듯이, CSS 는 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다 — 스타일, 레이아웃 등.</p>
<p><strong>문서</strong>는 일반적으로 마크 업 언어를 사용하여 구성된 텍스트 파일입니다 — {{Glossary("HTML")}} 이 가장 일반적인 마크 업 언어이지만, {{Glossary("SVG")}} 또는 {{Glossary("XML")}} 과 같은 다른 마크 업 언어를 사용할 수도 있습니다.</p>
<p>사용자에게 문서를 <strong>제공 한다는 것</strong>은 대상이 사용 할 수 있는 형식으로 문서를 변환하는 것을 의미합니다. {{Glossary("browser","Browsers")}}, {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} 또는 {{Glossary("Microsoft Edge","Edge")}} 는 컴퓨터 화면, 프로젝터 또는 프린터 등의 문서를 시각적으로 표시하도록 설계되었습니다.</p>
<div class="blockIndicator note">
<p><strong>참고</strong>: 브라우저는 {{Glossary("User agent","user agent")}} 라고도 하며, 기본적으로 컴퓨터 시스템 내부의 개인을 나타내는 컴퓨터 프로그램을 의미합니다. 브라우저는 CSS 에 대해 이야기 할 때, 우리가 생각하는 주요 유형의 user agent 이지만, 유일한 브라우저는 아닙니다. HTML 및 CSS 문서를 인쇄할 PDF로 변환하는 것과 같은 사용 가능한 다른 사용자 user agent 가 있습니다.</p>
</div>
<p>CSS 는 매우 기본적인 텍스트 문서 스타일링에 사용될 수 있습니다 — 예를 들어, 제목 및 링크의 <a href="/en-US/docs/Web/CSS/color_value">색상</a> 과 <a href="/en-US/docs/Web/CSS/font-size">크기</a> 변경. 또한, 레이아웃을 만드는 데 사용 할 수 있습니다 — 예를 들어, <a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">단일 텍스트 열을 변환</a> (기본 콘텐츠 영역과 관련 정보에 대한 사이드 바가 있는 레이아웃으로) 하는 등 레이아웃을 만드는 데 사용 할 수 있습니다. <a href="/en-US/docs/Web/CSS/CSS_Animations">애니메이션</a> 과 같은 효과에도 사용 할 수 있습니다. 구체적인 예는 이 단락의 링크를 살펴 보십시오.</p>
<h2 id="CSS_구문">CSS 구문</h2>
<p>CSS 는 규칙 기반 언어입니다 — 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의합니다. 예를 들어 "내 페이지의 제목이 빨간색이며 큰 텍스트로 표시 되기를 원합니다."</p>
<p>다음 코드는 위에서 설명한 스타일을 실행 하는 매우 간단한 CSS 규칙을 보여줍니다:</p>
<pre class="brush: css">h1 {
color: red;
font-size: 5em;
}</pre>
<p>규칙은 {{Glossary("CSS Selector", "selector")}} 와 함께 열립니다. 스타일을 지정할 HTML 요소를 <em><strong>선택</strong> </em>합니다. 이 경우 level 1 제목 ({{htmlelement("h1")}}) 을 스타일링합니다.</p>
<p>그런 다음 중괄호 <code>{ }</code> 가 있습니다. 그 안에는 <strong>속성</strong>과 <strong>값</strong> 쌍의 형태를 취하는 하나 이상의 <strong>선언</strong>이 있습니다. 각 쌍은 우리가 선택한 요소의 속성을 지정하고 속성에 부여할 값을 지정합니다.</p>
<p>콜론 앞에는, 속성이 있고 콜론 뒤에는 값이 있습니다. CSS {{Glossary("property/CSS","properties")}} 는 지정되는 속성에 따라 허용되는 값이 다릅니다. 이 예제에서는 다양한 <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">색상 값</a> 을 사용 할 수 있는 <code>color</code> 속성이 있습니다. 또한 <code>font-size</code> 속성도 있습니다. 이 속성은 다양한 <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">크기 단위</a> 를 값으로 사용 할 수 있습니다.</p>
<p>CSS 스타일 시트에는 여러 규칙이 하나씩 포함되어 있습니다.</p>
<pre class="brush: css">h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}</pre>
<p>일부 값은 빨리 배운다는 것을 알게 될 것이고, 반면에 다른 값은 여러분이 찾아야 할 것입니다. MDN 의 개별 속성 페이지는 잊었을 때 또는 값으로 사용 할 수 있는 다른 것을 알고자 할 때 속성과 해당 값을 빠르게 찾을 수 있는 방법을 제공합니다.</p>
<div class="blockIndicator note">
<p><strong>참고</strong>: MDN <a href="/en-US/docs/Web/CSS/Reference">CSS 참조</a> 에 나열된 모든 CSS 속성 페이지 (다른 CSS 기능과 함께) 에 대한 링크를 찾을 수 있습니다. 또는, CSS 기능에 대한 자세한 정보를 찾아야 할 때 마다, 자주 사용하는 검색 엔진에서 "mdn <em>css-feature-name</em>" 을 검색하는 데 익숙해야 합니다. 예를 들어, "mdn color" 및 "mdn font-size" 를 검색해 보십시오!</p>
</div>
<h2 id="CSS_Modules">CSS Modules</h2>
<p>CSS 를 사용하여 스타일을 지정할 수 있는 것이 너무 많으므로, 언어는 <em>module</em> 로 분류됩니다. MDN 을 탐색할 때 이러한 module 에 대한 참조가 표시되면, 많은 설명서 페이지가 특정 modul 을 중심으로 구성되어 있습니다. 예를 들어, <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">배경 및 테두리</a> module 에 대한 MDN 참조를 통해 그 용도가 무엇이며, 그 용도에 포함된 다른 속성 및 기타 기능을 확인할 수 있습니다. 또한 기술을 정의하는 <em>CSS Specification</em> 에 대한 링크를 찾을 수 있습니다 (아래 참조).</p>
<p>이 단계에서는 CSS 가 어떻게 구성되어 있는지에 대해 너무 걱정할 필요가 없지만, 예를 들어 특정 속성이 다른 유사한 것들 중에서 발견될 가능성이 높기 때문에, 동일한 specification 에 있을 수 있다는 것을 알고 있다면 정보를 쉽게 찾을 수 있습니다.</p>
<p>구체적인 예를 들어, 배경 및 테두리 module 로 돌아가 보겠습니다 — 이 module 에서 <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> 및 <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code> 속성을 정의하는 것이 논리적이라고 생각 할 수 있습니다. 당신이 옳을 겁니다.</p>
<h3 id="CSS_Specifications">CSS Specifications</h3>
<p>모든 웹 표준 기술 (HTML, CSS, JavaScript 등.) 은 표준 조직 ({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} 또는 {{glossary("Khronos")}} 와 같은) 이 게시한 specifications (또는 단순히 "specs") 이라는 거대한 문서로 정의됩니다. 이러한 기술의 작동 방식을 정확하게 정의하십시오.</p>
<p>CSS 는 다르지 않습니다 — W3C 내에서 <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> 이라는 곳에서 개발 했습니다. 이 그룹은 브라우저 공급 업체 및 CSS 에 관심이 있는 다른 회사의 대표로 구성됩니다. 독립적인 목소리로 행동하는 <strong><em>초청된 전문가</em></strong> 로 알려진 다른 사람들도 있습니다. 그들은 회원 조직에 연결되어 있지 않습니다.</p>
<p>새로운 CSS 기능은 CSS Working Group 에 의해 개발되거나 지정됩니다. 때로는 특정 브라우저가 일부 기능에 관심이 있기 때문에 웹 디자이너와 개발자가 기능을 요구하고, 때로는 실무 그룹 자체가 요구 사항을 식별했기 때문입니다. CSS 는 지속적으로 개발 중이며 새로운 기능을 사용할 수 있습니다. 그러나 CSS 의 중요한 점은 모든 사람이 오래된 웹 사이트를 망가뜨릴 수 있는 방식으로 변경하지 않도록 매우 열심히 노력한다는 것입니다. 현재 사용 가능한 제한된 CSS 를 사용하여 2000년에 구축된 웹 사이트는 여전히 브라우저에서 사용 할 수 있습니다!</p>
<p>CSS 를 처음 첩하는 사람들은, CSS specs 이 압도적이라고 생각할 것입니다 — 웹 개발자가 CSS 를 이해하기 위해 읽는 것이 아니라 엔지니어가 user agents 의 기능에 대한 지원을 구현하는 데 사용하기 위한 것입니다. 많은 숙련된 개발자가 MDN 설명서나 기타 자습서를 참조하는 것이 좋습니다. 그러나 사용중인 CSS, 브라우저 지원 (아래 참조) 및 specs 간의 관계를 이해하고 존재한다는 것을 아는 것이 좋습니다.</p>
<h2 id="브라우저_지원">브라우저 지원</h2>
<p>CSS 가 지정되면 하나 이상의 브라우저가 이를 구현한 경우에만 웹 페이지를 개발하는 데 유용합니다. 이것은 CSS 파일의 명령을 화면에 출력할 수 있는 것으로 바꾸도록 코드가 작성되었음을 의미합니다. <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a> 수업에서 이것에 대해 자세히 살펴보겠습니다. 모든 브라우저가 동시에 기능을 구현하는 것은 드문 일이므로 일반적으로 일부 브라우저에서는 CSS 의 일부를 사용할 수 있고, 다른 브라우저에서는 사용할 수 없는 경우가 있습니다. 이러한 이유로, 구현 상태를 확인할 수 있는 것이 유용합니다. MDN 의 각 속성 페이지에서 관심있는 속성의 상태를 볼 수 있으므로 웹 사이트에서 해당 속성을 사용할 수 있는지 알 수 있습니다.</p>
<p>다음은 CSS <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code> 속성에 대한 데이터 차트입니다.</p>
<p>{{Compat("css.properties.font-family")}}</p>
<h2 id="다음은_뭐죠">다음은 뭐죠</h2>
<p>CSS 가 무엇인지 이해했으니, 이제 <a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 시작하기</a> 로 넘어가서 CSS 를 직접 작성할 수 있습니다.</p>
<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
<h2 id="이번_강의에서는">이번 강의에서는</h2>
<ol>
<li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식 사용</a></li>
</ol>
|
