blob: e03e748853fdea56c7f162585c986ffc4781853d (
plain)
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
|
---
title: CSS 첫 번째 단계
slug: Learn/CSS/First_steps
translation_of: Learn/CSS/First_steps
---
<div>{{LearnSidebar}}</div>
<p class="summary">CSS (Cascading Style Sheets) 는 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용됩니다. 이 모듈은 작동 방식, 구문의 모양 및 HTML에 스타일을 추가하기 위해, 이를 사용하는 방법에 대한 기본 사항을 통해 CSS 를 마스터 하는 과정을 부드럽게 시작합니다.</p>
<h2 id="전제_조건">전제 조건</h2>
<p>이 모듈을 시작하기 전에, 다음이 있어야 합니다:</p>
<ol>
<li>컴퓨터를 사용하고 웹을 수동적으로 사용하는 것에 대한 기본적인 친숙성 (예: 콘텐츠를 보는 것) 입니다.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a> 에서 자세히 설명한 대로 설정된 기본 작업 환경과 <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기</a> 에서 자세히 설명한 대로 파일을 생성하고 관리하는 방법을 이해합니다.</li>
<li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 에서 설명한 바와 같이 HTML에 대한 기본적인 친숙성입니다.</li>
</ol>
<div class="note">
<p><strong>참고</strong>: 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://glitch.com/">Glitch</a> 와 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.</p>
</div>
<h2 id="안내">안내</h2>
<p>이 모듈에서는 CSS 의 모든 기본 이론을 익히고, 몇 가지 기술을 테스트 할 수 있는 기회를 제공하는 다음과 같은 기사가 포함되어 있습니다.</p>
<dl>
<dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></dt>
<dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS 가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다룹니다.</dd>
<dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></dt>
<dd>이 기사에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.</dd>
<dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></dt>
<dd>CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 알고 있습니다. 이제 언어 자체의 구조를 조금 더 깊이 살펴볼 차례입니다. 우리는 이미 여기에서 논의된 많은 개념들을 만났습니다. 나중에 헷갈리는 개념을 발견하면 다시 이 개념으로 돌아와서 요약 할 수 있습니다.</dd>
<dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></dt>
<dd>CSS 의 기본 사항, 목적 및 간단한 스타일 시트 작성 방법을 배웠습니다. 이 강의에서는 브라우저가 CSS 와 HTML 을 가져와서 웹 페이지로 만드는 방법을 살펴 봅니다.</dd>
<dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식 사용</a></dt>
<dd>지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하고 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 기사는 그렇게 할 수 있는 기회를 제공합니다.</dd>
</dl>
<h2 id="참고_항목">참고 항목</h2>
<dl>
<dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">중급자 웹 활용 능력 1: CSS 소개</a></dt>
<dd><em>CSS 소개</em> 모듈에서 이야기 한 많은 기술을 탐구하고 테스트하는 훌륭한 모질라 기초 과정입니다. 웹 페이지, CSS 선택자, 속성 및 값의 HTML 요소 스타일 지정에 대해 학습합니다.</dd>
</dl>
|
