시작 하기(CSS 안내서)

  • 리비전 슬러그: CSS/시작하기
  • 리비전 제목: 시작 하기(CSS 안내서)
  • 리비전 아이디: 364827
  • 제작일시:
  • 만든이: SpikeYou
  • 현재 리비전인가요?
  • 댓글

리비전 내용

중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/12)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.

완전 초보를 위해, 이 CSS 안내서는 완전 초보용으로 Cascading Style Sheets (CSS) 소개 하겠습니다. 여기서는 기본적인 CSS기능을 직접 실행 해 볼수 있는 예제와 함께제공합니다. 또한 근래의 브라우저에서도 동작하는 CSS표준기능에 대해서도 보여 줄 것입니다.

이 안내서는 CSS에 대해 완전 초보자들을 위한 것이지만 CSS를 조금 친숙한 분들도 사용에 도움이 될 수 있을 것입니다. CSS에 전문가인 분들은 별로 도움이 되지 않을 것이므로 CSS main page lists 에서 좀더 전문적인 내용을 참고하세요.

시작하기 전에 알아둘 사항

이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다.

파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.

참고:  CSS는 색상 설정 방법을 제공 하므로 많은 부분은 색상을 참고한다. 모니터등 표시장치가 컬러용이라면 이 부분만 사용할 수 있도록 배우기만 하여도 된다.

이 안내서의 사용법

이 안내서를 사용하려면, 각 페이지를 순차적으로 잘 읽어야 한다. 만약 몇 페이지를 건너뛰게 된다면 그 이후 나온 설명을 이해하기 힘들 수 있다.

각 페이지마다 CSS가 어떻게 동작 하는지에 대한 유용한 정보 섹션이 있다. 동작 색션에서는 CSS를 직접 사용하는 방법을 알려준다.

자신의 이해력 수준을 테스트 하기 위해서 각 페이지 마지막 부분에 도전항목을 배치 하였으며, 그에 대한 해답은 그 아래 링크로 걸어두었으나, 필요하지 않다면 보지 않아도 된다.

CSS를 좀더 깊이 알고 싶다면, "더 자세히"라는 박스에서 제공하는 내용을 읽어라. 거기에는 CSS 참조자료에 대한 링크도 제공 될 것이다.

안내서 파트 II

이 두분쨰 안내서 파트에서는 모질라와 다른 브라우저들에서 사용가능한 CSS의 범위들에 대한 예제도 제공 될 것이다.

  1. JavaScript
  2. SVG graphics
  3. XML data
  4. XBL bindings
  5. XUL user interfaces

리비전 소스

<div class="warning">
  <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/12)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
<p>완전 초보를 위해, 이 CSS 안내서는 완전 초보용으로&nbsp;<a href="/en-US/docs/CSS" title="/en-US/docs/CSS">Cascading Style Sheets</a> (CSS) 소개 하겠습니다. 여기서는 기본적인 CSS기능을 직접 실행 해 볼수 있는 예제와 함께제공합니다. 또한 근래의 브라우저에서도 동작하는 CSS표준기능에 대해서도 보여 줄 것입니다.</p>
<p>이 안내서는 CSS에 대해 완전 초보자들을 위한 것이지만 CSS를 조금 친숙한 분들도 사용에 도움이 될 수 있을 것입니다. CSS에 전문가인 분들은 별로 도움이 되지 않을 것이므로 CSS main page <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">lists</a> 에서 좀더 전문적인 내용을 참고하세요.</p>
<nav class="fancyTOC">
  <a class="button" href="/en-US/docs/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">CSS란 무엇인가</a>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">왜 CSS를 써야 하는가</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">CSS가 어떻게 동작하는가</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">종속과 상속</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">설렉터</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">CSS 가독법</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">텍스트 스타일</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">색상</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">내용</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">리스트</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">상자</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">레이아웃</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">테이블</a></p>
  <p><a class="button" href="/en-US/docs/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">미디어</a></p>
</nav>
<h3 id="What_do_you_need_before_you_start.3F">시작하기 전에 알아둘 사항</h3>
<p>이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다.</p>
<p>파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
<p><strong>참고:&nbsp;</strong> CSS는 색상 설정 방법을 제공 하므로 많은 부분은 색상을 참고한다. 모니터등 표시장치가 컬러용이라면 이 부분만 사용할 수 있도록 배우기만 하여도 된다.</p>
<h3 id="How_to_use_this_tutorial">이 안내서의 사용법</h3>
<p>이 안내서를 사용하려면, 각 페이지를 순차적으로 잘 읽어야 한다. 만약 몇 페이지를 건너뛰게 된다면 그 이후 나온 설명을 이해하기 힘들 수 있다.</p>
<p>각 페이지마다 CSS가 어떻게 동작 하는지에 대한 유용한 정보 섹션이 있다. 동작 색션에서는 CSS를 직접 사용하는 방법을 알려준다.</p>
<p>자신의 이해력 수준을 테스트 하기 위해서 각 페이지 마지막 부분에 도전항목을 배치 하였으며, 그에 대한 해답은 그 아래 링크로 걸어두었으나, 필요하지 않다면 보지 않아도 된다.</p>
<p>CSS를 좀더 깊이 알고 싶다면, "더 자세히"라는 박스에서 제공하는 내용을 읽어라. 거기에는 CSS 참조자료에 대한 링크도 제공 될 것이다.</p>
<h2 id="Tutorial_Part_II">안내서 파트 II</h2>
<p>이 두분쨰 안내서 파트에서는 모질라와 다른 브라우저들에서 사용가능한 CSS의 범위들에 대한 예제도 제공 될 것이다.</p>
<ol>
  <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li>
  <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></strong></li>
  <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></strong></li>
  <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></li>
  <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></strong></li>
</ol>
Revert to this revision