diff options
Diffstat (limited to 'files/ko/web/guide')
| -rw-r--r-- | files/ko/web/guide/api/vibration/vibration/index.html | 100 | ||||
| -rw-r--r-- | files/ko/web/guide/css/media_queries/index.html | 386 | ||||
| -rw-r--r-- | files/ko/web/guide/css/visual_formatting_model/index.html | 223 | ||||
| -rw-r--r-- | files/ko/web/guide/dom/index.html | 22 | ||||
| -rw-r--r-- | files/ko/web/guide/dom/using_full_screen_mode/index.html | 198 | ||||
| -rw-r--r-- | files/ko/web/guide/graphics/index.html (renamed from files/ko/web/guide/그래픽/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/web/guide/html/editable_content/index.html (renamed from files/ko/web/guide/html/content_editable/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/web/guide/html/html5/index.html | 122 | ||||
| -rw-r--r-- | files/ko/web/guide/html/html5/introduction_to_html5/index.html | 40 | ||||
| -rw-r--r-- | files/ko/web/guide/html/using_html_sections_and_outlines/index.html | 367 | ||||
| -rw-r--r-- | files/ko/web/guide/parsing_and_serializing_xml/index.html (renamed from files/ko/web/guide/xml_파싱_및_직렬화/index.html) | 0 |
11 files changed, 529 insertions, 929 deletions
diff --git a/files/ko/web/guide/api/vibration/vibration/index.html b/files/ko/web/guide/api/vibration/vibration/index.html deleted file mode 100644 index 16271ff248..0000000000 --- a/files/ko/web/guide/api/vibration/vibration/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Vibration API -slug: Web/Guide/API/Vibration/Vibration -translation_of: Web/API/Vibration_API ---- -<div>{{DefaultAPISidebar("Vibration API")}}</div> - -<p>요즘 나오는 대부분은 모바일 디바이스는 바이브레이션 하드웨어를 포함하고 있다. 소프트웨어 코드를 이용해 바이브레이션 하드웨어를 제어하면, 모바일 디바이스를 흔들리게 만들어 사용자에게 물리적인 피드백을 제공할 수 있다.</p> - -<p><strong>Vibration API</strong>는 웹앱들이 기기에 장착된 물리 진동장치를 통해 진동을 전달할 수 있도록 해줍니다. 하지만 대응하는 진동 장치가 없는 기기일 경우 아무일도 일어나지 않습니다.</p> - -<h2 id="Describing_vibrations">Describing vibrations</h2> - -<p>바이브레이션은 온오프 펄스들의 패턴이라고 할 수 있는데, 이 펄스들은 아마도 다양한 길이를 가질 것이다. 이 패턴은 아마 하나의 정수값으로 구성될 수 있는데 이 정수값은 진동이 일어날 밀리세컨드 수를 의미한다. 또한 이 패턴은 정수 배열이 될 수도 있는데 이것은 진동과 정지들의 패턴을 의미한다. 바이브레이션은 {{domxref("window.navigator.vibrate()")}} 라는 하나의 메소드로 제어된다.</p> - -<h3 id="한번_진동시키기">한번 진동시키기</h3> - -<p>여러분은 다음과 같이 하나의 값 또는 하나의 값으로 구성된 배열을 명시함으로써 바이브레이션 하드웨어를 1회 진동시킬 수 있을 것이다.</p> - -<pre class="brush:js">window.navigator.vibrate(200); -window.navigator.vibrate([200]); -</pre> - -<p>이 두 가지 예제들은 디바이스를 200ms 동안 진동시킨다.</p> - -<h3 id="패턴이_있는_진동_만들기">패턴이 있는 진동 만들기</h3> - -<p>배 열에 있는 값들은 다바이스가 진동해야 하는 시간과 진동하지 않아야 하는 시간을 번갈아가며 적어놓은 것이다. 배열에 있는 각 값은 하나의 정수로 변환된 후 차례대로 장치가 진동해야 하는 시간, 장치가 진동하지 않아야 하는 시간으로 해석된다. 다음 예제를 보자.</p> - -<pre class="brush: js">window.navigator.vibrate([200, 100, 200]); -</pre> - -<p>이 예제는 장치를 200ms 동안 진동시킨 후 100ms 동안 멈추게 하고 그 후 다시 200ms 동안 장치를 진동시킨다.</p> - -<p>여 러분은 여러분이 원하는 진동/정지 페어를 명시할 수 있다. 그리고 배열 내에 홀수 또는 짝수개의 값들을 명시할 수도 있다. 이렇게 하는 이유는 각각의 진동 시간이 끝나면 디바이스의 진동은 자동적으로 멈추게 되므로 배열의 마지막 값이 정지에 해당하는 값이라면 그 값은 아무 의미가 없기 때문이다.</p> - -<h3 id="이미_실행중인_진동_캔슬하기">이미 실행중인 진동 캔슬하기</h3> - -<p>{{domxref("window.navigator.vibrate()")}} <code>메소드를 0값을 호출하거나, 빈 배열, 0값으로 구성된 배열로 호출하면 </code>현재 진행중인 진동패턴은 취소될 것이다.</p> - -<h3 id="지속적인_진동_내보내기">지속적인 진동 내보내기</h3> - -<p>Some basic <code>setInterval</code> and <code>clearInterval</code> action will allow you to create persistent vibration:</p> - -<pre><code>var vibrateInterval; - -// Starts vibration at passed in level -function startVibrate(duration) { - navigator.vibrate(duration); -} - -// Stops vibration -function stopVibrate() { - // Clear interval and stop persistent vibrating - if(vibrateInterval) clearInterval(vibrateInterval); - navigator.vibrate(0); -} - -// Start persistent vibration at given duration and interval -// Assumes a number value is given -function startPeristentVibrate(duration, interval) { - vibrateInterval = setInterval(function() { - startVibrate(duration); - }, interval); -}</code></pre> - -<p>Of course the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval based on that number (with an additional delay, probably).</p> - -<h3 id="Why_use_Vibration_API">Why use Vibration API?</h3> - -<p>This API is clearly targeted toward mobile devices. The Vibration API would be good for alerts within mobile web applications, and would be especially awesome when used in games or media-heavy applications. Imagine watching a video on your mobile device, and during an explosion scene, your phone got a bit of a shake. Or playing Bomberman and feeling a gentle kick when a block explodes!</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Vibration API')}}</td> - <td>{{Spec2('Vibration API')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div>{{Compat("api.Navigator.vibrate")}}</div> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{domxref("window.navigator.vibrate()")}}</li> -</ul> diff --git a/files/ko/web/guide/css/media_queries/index.html b/files/ko/web/guide/css/media_queries/index.html deleted file mode 100644 index 559b5805c6..0000000000 --- a/files/ko/web/guide/css/media_queries/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -title: 미디어 쿼리 사용하기 -slug: Web/Guide/CSS/Media_queries -tags: - - Advanced - - CSS - - Guide - - Media - - Media Queries - - Responsive Design - - Web -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -<div>{{cssref}}</div> - -<p><strong>미디어 쿼리</strong>는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, {{glossary("viewport", "뷰포트")}} 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.</p> - -<p>미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.</p> - -<ul> - <li><a href="/ko/docs/Web/CSS">CSS</a> {{cssxref("@media")}}와 {{cssxref("@import")}} <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 사용해 특정 조건에 따라 스타일을 적용할 때.</li> - <li>{{htmlelement("style")}}, {{htmlelement("link")}}, {{htmlelement("source")}}, 기타 다른 <a href="/ko/docs/Web/HTML">HTML</a> 요소에 <code>media</code> 특성을 사용해 특정 매체만 가리키게 할 때.</li> - <li>{{domxref("Window.matchMedia()")}}와 {{domxref("MediaQueryList.addListener()")}} <a href="/ko/docs/Web/JavaScript">JavaScript</a> 메서드를 사용해 <a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">미디어 상태를 판별하고 관측</a>할 때.</li> -</ul> - -<div class="note"> -<p><strong>참고:</strong> 이 페이지의 CSS는 시연용으로 <code>@media</code>를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.</p> -</div> - -<h2 id="구문">구문</h2> - -<p>미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.</p> - -<p>미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산됩니다.</p> - -<div class="blockIndicator note"> -<p><strong>참고:</strong> {{HTMLElement("link")}}의 미디어 쿼리가 <a href="http://scottjehl.github.com/CSS-Download-Tests/">거짓을 반환하더라도 스타일시트는 다운로드</a>됩니다. 그렇지만 그 안의 내용은 쿼리가 참이 되어야 적용됩니다.</p> -</div> - -<h3 id="미디어_유형">미디어 유형</h3> - -<p>미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 <code>not</code>이나 <code>only</code> 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 <code>all</code>을 사용합니다.</p> - -<dl> - <dt><code><strong>all</strong></code></dt> - <dd>모든 장치에 적합합니다.</dd> - <dt><code>print</code></dt> - <dd>인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.<br> - (<a href="/ko/docs/Web/CSS/Paged_Media">인쇄 미디어</a> 문서를 방문해 <code>print</code> 형식에서 발생 가능한 서식 문제의 정보를 확인해주세요.)</dd> - <dt><code>screen</code></dt> - <dd>주로 화면이 대상입니다.</dd> - <dt><code>speech</code></dt> - <dd>음성 합성장치 대상입니다.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>사용하지 않는 미디어 유형:</strong> CSS2.1과 <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> 모듈은 여러가지 추가 유형(<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>)을 정의했으나 <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>에서 제거됐으므로 사용해선 안됩니다. <code>aural</code>은 유사한 유형인 <code>speech</code>로 대체됐습니다.</p> -</div> - -<h3 id="미디어_특성">미디어 특성</h3> - -<p>미디어 특성은 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.</p> - -<table> - <thead> - <tr> - <th>이름</th> - <th>요약</th> - <th>참고</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{cssxref("@media/any-hover", "any-hover")}}</td> - <td>사용 가능한 입력 방식 중 하나로 사용자가 요소 위에 호버할 수 있는가?</td> - <td>Media Queries Level 4에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td> - <td>사용 가능한 입력 방식 중 하나가 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td> - <td>Media Queries Level 4에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td> - <td>뷰포트의 가로세로비</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/color", "color")}}</td> - <td>출력 장치의 색상 채널별 비트 수, 흑백일 땐 0</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td> - <td>사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위</td> - <td>Media Queries Level 4에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/color-index", "color-index")}}</td> - <td>출력 장치의 색상 검색 테이블(LUT) 항목 수, 존재하지 않을 땐 0</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td> - <td>출력 장치의 가로세로비</td> - <td>Media Queries Level 4에서 제거</td> - </tr> - <tr> - <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td> - <td>출력 장치 렌더링 표면의 높이</td> - <td>Media Queries Level 4에서 제거</td> - </tr> - <tr> - <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td> - <td>출력 장치 렌더링 표면의 너비</td> - <td>Media Queries Level 4에서 제거</td> - </tr> - <tr> - <td>{{cssxref("@media/display-mode", "display-mode")}}</td> - <td>웹 앱 매니페스트의 <code><a href="/ko/docs/Web/Manifest#display">display</a></code> 항목이 정의한 애플리케이션의 표시 모드</td> - <td><a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest 명세</a>에서 정의</td> - </tr> - <tr> - <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td> - <td>사용자 에이전트가 색상 팔레트를 제한하는지 여부</td> - <td>Media Queries Level 5에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/grid", "grid")}}</td> - <td>장치가 그리드와 비트맵 스크린 중 어느 것을 사용하나?</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/height", "height")}}</td> - <td>뷰포트의 높이</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/hover", "hover")}}</td> - <td>주 입력 방식으로 사용자가 요소 위에 호버할 수 있는가?</td> - <td>Media Queries Level 4에서 제거</td> - </tr> - <tr> - <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td> - <td>사용자 에이전트나 운영 체제가 색상을 반전 중인가?</td> - <td>Media Queries Level 5에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/light-level", "light-level")}}</td> - <td>주변 환경의 광도</td> - <td>Media Queries Level 5에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/monochrome", "monochrome")}}</td> - <td>출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/orientation", "orientation")}}</td> - <td>뷰포트의 방향</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td> - <td>콘텐츠가 블록 축 방향으로 뷰포트를 오버플로 할 경우 출력 장치가 어떻게 처리하는가?</td> - <td>Media Queries Level 4에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td> - <td>콘텐츠가 인라인 축 방향으로 뷰포트를 오버플로 할 경우 스크롤 가능한가?</td> - <td>Media Queries Level 4에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/pointer", "pointer")}}</td> - <td>주 입력 방식이 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td> - <td>Media Queries Level 4에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td> - <td>라이트/다크 색채 조합 중 사용자가 선호하는 것</td> - <td>Media Queries Level 5에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td> - <td>사용자가 시스템에 두 인접 색상 간의 고대비를 요청했는지 탐지</td> - <td>Media Queries Level 5에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td> - <td>사용자가 줄어든 움직임을 선호함</td> - <td>Media Queries Level 5에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td> - <td>사용자가 줄어든 투명도를 선호함.</td> - <td>Media Queries Level 5에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/resolution", "resolution")}}</td> - <td>출력 장치의 픽셀 밀도</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/scan", "scan")}}</td> - <td>출력 장치의 스캔 절차</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/scripting", "scripting")}}</td> - <td>JavaScript 등 스크립트 사용 가능 여부 탐지</td> - <td>Media Queries Level 5에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/update-frequency", "update")}}</td> - <td>출력 장치가 콘텐츠의 외형을 수정할 수 있는 주기</td> - <td>Media Queries Level 4에서 추가</td> - </tr> - <tr> - <td>{{cssxref("@media/width", "width")}}</td> - <td>스크롤바를 포함한 뷰포트 너비</td> - <td></td> - </tr> - </tbody> -</table> - -<h3 id="논리_연산자">논리 연산자</h3> - -<p><code>not</code>, <code>and<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>only</code>와 같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.</p> - -<h4 id="and"><code>and</code></h4> - -<p><code>and</code> 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.</p> - -<h4 id="not"><code>not</code></h4> - -<p><code>not</code> 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. <code>not</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p> - -<div class="blockIndicator note"> -<p><strong>참고:</strong> Level 3 모듈에서는 <code>not</code> 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.</p> -</div> - -<h4 id="only"><code>only</code></h4> - -<p><code>only</code> 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. <code>only</code>를 사용하지 않은 <code>screen and (max-width: 500px)</code> 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 <code>screen</code>으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. <code>only</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p> - -<h4 id="쉼표"><code>,</code> (쉼표)</h4> - -<p>쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 <code>or</code> 연산자처럼 동작합니다.</p> - -<h2 id="미디어_유형_특정하기">미디어 유형 특정하기</h2> - -<p>미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.</p> - -<pre class="brush: css notranslate">@media print { ... }</pre> - -<p>다수의 장치를 특정할 수도 있습니다. 예컨대 아래 <code>@media</code> 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.</p> - -<pre class="brush: css notranslate">@media screen, print { ... }</pre> - -<p><a href="#미디어_유형">미디어 유형</a> 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.</p> - -<h2 id="미디어_기능_특정하기">미디어 기능 특정하기</h2> - -<p>미디어 기능은 주어진 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.</p> - -<pre class="brush: css notranslate">@media (hover: hover) { ... }</pre> - -<p>많은 미디어 기능은 <u>범위 기능</u>으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 {{glossary("viewport", "뷰포트")}} 너비가 12450px 이하인 경우에만 스타일을 적용합니다.</p> - -<pre class="brush: css notranslate">@media (max-width: 12450px) { ... }</pre> - -<p>미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 <code>0</code>이 아닐 때 (Level 4부터는 <code>0</code>과 <code>none</code>이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.</p> - -<pre class="brush: css notranslate">@media (color) { ... }</pre> - -<p>어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.</p> - -<pre class="brush: css notranslate">@media speech and (aspect-ratio: 11/5) { ... }</pre> - -<p><a href="#미디어_특성">미디어 특성</a> 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.</p> - -<h2 id="복잡한_미디어_쿼리_생성">복잡한 미디어 쿼리 생성</h2> - -<p>때로는 사용자가 다수의 조건으로 구성된 쿼리를 생성하기 원할 수도 있습니다. 이때 논리연산자인 : <code>not</code>, <code>and</code>, 그리고 <code>only</code>를 사용하면 됩니다. 더 나아가 , 사용자는 복수의 미디어쿼리를 쉼표로 연결하여 리스트를 작성할수도 있습니다. 이렇게 함으로써 사용자는 다양한 상황에서 같은 스타일을 적용할 수 있습니다.</p> - -<p>앞서 예와 같이, <code>and</code> 연산자를 사용하여 미디어유형과 미디어기능을 그룹지을 수 있습니다. 또한 <code>and</code> 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 <code>not</code> 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. <code>only</code> 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.</p> - -<div class="note"> -<p><strong>Note:</strong> 대부분의 경우, <code>all</code> 미디어유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다. 하지만, 사용자가 <code>not</code> 이나 <code>only</code> 연산자를 사용하면, 사용자는 반드시 미디어유형을 특정해야 합니다.</p> -</div> - -<h3 id="다수의_유형과_기능_조합하기">다수의 유형과 기능 조합하기</h3> - -<p>The <code>and</code> 연산자는 미디어기능과 미디어유형 혹은 다른 미디어 기능들과 연결해줍니다. 이 예에서는 두개의 미디어기능을 기기의 랜스케입(가로방향화면)방향으로 제한시키고 최소폭을 30 ems로 지정합니다:</p> - -<pre class="brush: css notranslate">@media (min-width: 30em) and (orientation: landscape) { ... }</pre> - -<p>화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 <code>screen</code> 미디어유형에 미디어기능을 연결합니다:</p> - -<pre class="brush: css notranslate">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre> - -<h3 id="다수의_쿼리_판별">다수의 쿼리 판별</h3> - -<p>쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어타입, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다:</p> - -<pre class="brush: css notranslate">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre> - -<p>위에 예에서 보면, 만일 사용자가 페이지높이가 800px인 프린터를 사용한다면, 첫번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다. 마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두번째 쿼리가 적용될 것이고, 미디어 문은 참값을 반환하게 됩니다.</p> - -<h3 id="쿼리의_뜻_반전하기">쿼리의 뜻 반전하기</h3> - -<p><code>not</code> 키워드는 미디어쿼리 전체의 의미를 반전시킵니다. 이 키워드는 적용된 미디어쿼리를 반전시킵니다. (즉, 쉼표로 연결된 미디어쿼리 리스트의 하나하나의 미디어쿼리에 적용되는 것이 아닙니다) <code>not</code> 키워드는 개별적인 기능의 쿼리를 부정하는데 사용할 수 없고, 오직 미디어쿼리 전체를 부정하는 데에만 사용됩니다. <code>not</code> 연산자 키워드는 다음의 쿼리에서 보여지듯이 가장 나중에 적용됩니다:</p> - -<pre class="brush: css notranslate">@media not all and (monochrome) { ... } -</pre> - -<p>... 그러므로 위의 쿼리는 다음과 같이 평가됩니다:</p> - -<pre class="brush: css notranslate">@media not (all and (monochrome)) { ... } -</pre> - -<p>... 다음과 같이 되는 것이 아닙니다:</p> - -<pre class="brush: css example-bad notranslate">@media (not all) and (monochrome) { ... }</pre> - -<p>다른 예를 보자면, 다음의 미디어 쿼리는:</p> - -<pre class="brush: css notranslate">@media not screen and (color), print and (color) { ... } -</pre> - -<p>... 이렇게 평가됩니다:</p> - -<pre class="brush: css notranslate">@media (not (screen and (color))), print and (color) { ... }</pre> - -<h3 id="구형_브라우저와의_호환성_향상하기">구형 브라우저와의 호환성 향상하기</h3> - -<p><code>only</code> 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. <em>신형브라우저에는 아무런 영향을 주지 않습니다.</em></p> - -<pre class="brush: css notranslate">@media only screen and (color) { ... } -</pre> - -<h2 id="Level_4의_구문_향상">Level 4의 구문 향상</h2> - -<p>미디어쿼리 Level 4 사양은 향상된 구문을 포함하는데 그를 통해 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다. 예를 들면, 폭, 높이 처럼 말보다는 숫자에 관련된 것들입니다. Level 4 는 그러한 쿼리들을 작성하는데에 필요한 범위 구문을 제공합니다. 예를 들면, adds a <em>range context</em> for writing such queries. 폭을 표현하기 위해 <code>max-</code> 함수를 써서 사용자는 다음과 같이 쓸 수 있습니다:</p> - -<div class="note"> -<p><strong>Note:</strong> 미디어쿼리 Level 4 사양에는 상당수의 최신 브라우저를 지원하지만, 몇몇 미디어기능들은 잘 지원되지 않습니다. 자세한 사항은 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> browser compatibility table</a> 를 참조해 주십시요. </p> -</div> - -<pre class="brush: css notranslate">@media (max-width: 30em) { ... }</pre> - -<p>미디어 쿼리 Level 4 에서는 다음과 같이 쓸 수 있습니다:</p> - -<pre class="brush: css notranslate">@media (width <= 30em) { ... }</pre> - -<p><code>min-</code> 과 <code>max-</code> 를 사용하여 사용자가 두 값 사이에서 폭 값을 시험해 보고 싶은 상황이라면:</p> - -<pre class="brush: css notranslate">@media (min-width: 30em) and (max-width: 50em) { ... }</pre> - -<p>Level 4 구문에서는 이렇게 표현할 수 있습니다:</p> - -<pre class="brush: css notranslate">@media (30em <= width <= 50em ) { ... } -</pre> - -<p> Level 4 미디어쿼리는 또한 완전한 불리언 대수법을 사용하는 미디어쿼리들과 <strong>and</strong>, <strong>not</strong>, <strong>or</strong>.연산자를 결합할 수 있습니다. </p> - -<h3 id="not으로_기능_부정"><code>not</code>으로 기능 부정</h3> - -<p>미디어기능에 <code>not()</code> 을 사용하면 쿼리에 있는 기능을 부정합니다. 예를 들어, hover를 할 수 없는 장치를 사용할 때 <code>not(hover)</code> 를 사용할 수 있습니다.</p> - -<pre class="brush: css notranslate">@media (not(hover)) { ... }</pre> - -<h3 id="or로_다수의_기능_판별"><code>or</code>로 다수의 기능 판별</h3> - -<p><code>or</code> 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 <code>true</code> 값을 반환하게 할 수 있습니다. 예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.</p> - -<pre class="brush: css notranslate">@media (not (color)) or (hover) { ... } -</pre> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">프로그래밍으로 미디어 쿼리 판별하기</a></li> - <li><a href="/ko/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 미디어 기능 확장</a></li> - <li><a href="/ko/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 미디어 기능 확장</a></li> -</ul> diff --git a/files/ko/web/guide/css/visual_formatting_model/index.html b/files/ko/web/guide/css/visual_formatting_model/index.html deleted file mode 100644 index 4b32d08a30..0000000000 --- a/files/ko/web/guide/css/visual_formatting_model/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: 시각적 서식 모델 -slug: Web/Guide/CSS/Visual_formatting_model -tags: - - 씨에스에스 - - 씨에스에스 상자 모델 - - 참조 -translation_of: Web/CSS/Visual_formatting_model ---- -<div>{{CSSRef}}</div> - -<p class="summary"><span class="seoSummary">씨에스에스 <ruby><em>시각적 서식 모델</em><rp> (</rp><rt>visual formatting model</rt><rp>) </rp></ruby>은 문서를 처리하여 그것을 시각적 매체에 표시하는 알고리즘입니다. 이 모델은 씨에스에스의 기본 개념입니다. </span></p> - -<p>시각적 서식 모델은 문서의 각 요소를 변환하여, <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">씨에스에스 상자 모델</a>에 부합하는 0, 1 또는 여러 상자를 생성합니다. 각 상자의 조판은 다음과 같이 정의됩니다:</p> - -<ul> - <li>상자의 면적: 정확히 정의하거나 제약을 받거나, 아에 정의하지 않습니다.</li> - <li>상자의 유형: 인라인, 인라인수준, 원자 인라인수준, 블록.</li> - <li><a href="/ko/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">위치잡기 기법</a>: 일반 대열 소속, 부동체, 또는 절대 위치잡기.</li> - <li>트리 구조에 속한 다른 요소 무리: 그것의 자녀와 이웃.</li> - <li>{{glossary("viewport")}} 크기와 위치.</li> - <li>컨테이너에 속한 이미지의 고유한 면적.</li> - <li>다른 외부 정보</li> -</ul> - -<p>동 모델은 컨테이너 블록의 모서리 기준과 비례하여 상자를 렌더링합니다. 보통, 하나의 상자는 자기 자손들을 위한 컨테이너 블록을 수립합니다. 그러나 상자는 자신의 상위 컨테이너 블록에 구속되지 않습니다. 상자 조판이 상위 컨테이너 블록을 벗어나면 <ruby><em>대열이탈</em><rp> (</rp><rt>overflow</rt><rp>) </rp></ruby>했다고 말합니다..</p> - -<h2 id="상자_생성">상자 생성</h2> - -<p>상자 생성은 해당 문서의 요소로부터 상자를 생성하는 씨에스에스 시각적 서식 모델의 일부입니다. 생성된 상자는 다양한 유형으로, 이 유형은 시각적 서식이 이뤄지는 방식에 영향을 미칩니다. 생성되는 상자 유형은 {{ cssxref("display") }} 씨에스에스 속성의 값 여하에 따라 달라집니다.</p> - -<h3 id="블록수준_요소와_블록_상자">블록수준 요소와 블록 상자</h3> - -<p>어떤 요소를 <em>블록수준</em>이라고 말하려면 계산된 {{ cssxref("display") }} 씨에스에스 속성값이 <code>block</code>, <code>list-item</code>, 또는 <code>table</code>일 때입니다. 블록수준 요소는 사실상 하나의 블록으로 취급되어 시각적으로 서식되며, 수직적으로 겹겹이 포개집니다.</p> - -<p>각각의 블록수준 상자는 <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">블록 서식 상황</a>에 참여합니다. 각 블록수준 요소는 적어도 하나의 블록수준 상자를 생성하며 이를 일컬어 <ruby><em>수석 블록수준 상자</em><rp> (</rp><rt>principal block-level box</rt><rp>) </rp></ruby>라고 합니다. 일부 요소 무리는 목록항목 요소와 같이 목록 항목을 안내하는 글머리표와 서로 다른 타이포그래픽 요소를 처리하기 위한 상자를 추가적으로 생성하듯 더 많은 상자 무리를 생성할 수 있습니다. 대다수는 수석 블록 수준 상자만을 생성합니다.</p> - -<p>수석 블록수준 상자는 자손이 생성한 상자 및 콘텐츠를 포함합니다. 상자는 <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">위치잡기 기법</a>에도 관여하고 있습니다.</p> - -<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">블록 수준 상자는 역시 블록 콘테이너 상자도 될 수 있습니다. <em>블록 컨테이너 상자</em>는 다른 블록수준 상자만을 포함하고 <a href="/ko/docs/Web/CSS/Inline_formatting_context" title="CSS/Inline formatting context">인라인 서식 상황</a>을 생성하므로 인라인 상자 무리만을 포함합니다.</p> - -<p>중요한 점은 블록수준 상자와 블록 컨테이너 상자의 개념은 별개라는 점에 유의해야 한다는 것입니다. 첫째, 상자가 자기 부모와 형제자매과 함께하는 행동 방식을 설명합니다. 둘째, 상자가 자기 자손과는 어떻게 상호작용하는지 설명합니다. 테이블과 같은 블록 수준의 상자 무리는 블록 컨테이너 상자가 아닙니다. 마찬가지로 <ruby><em>비객원</em><rp> (</rp><rt>non-replaced</rt><rp>) </rp></ruby> 인라인 블록과 비객원 테이블 셀과 같은 일부 블록 컨테이너 상자는 블록 수준 상자가 아닙니다.</p> - -<p>또한, 블록 컨테이너 상자이며 동시에 블록수준 상자를 일컬어 우리는 <ruby><em>블록 상자</em><rp> (</rp><rt>block boxes</rt><rp>) </rp></ruby>라고 부릅니다.</p> - -<h4 id="무명_블록_상자">무명 블록 상자</h4> - -<p>경우에 따라서는 시각적 서식 알고리즘은 보충 상자를 추가할 알고리즘도 필요합니다</p> - -<p>씨에스에스 선택기는 해당 상자에 이름을 부여하거나 스타일링을 할 수 없기 때문에 이를 일컬어<em>무명 상자</em>라고 합니다.</p> - -<p>선택기는 무명 상자와 협력하지 않기 때문에 스타일시트를 통해 스타일링이 적용될 수 없습니다. 즉, 상속할 수 있는 모든 씨에스에스 속성은 <code>inherit</code> 값을 갖고 상속할 수 없는 씨에스에스 속성은 <code>initial</code> 값을 가집니다.</p> - -<p>상자를 포함하는 블록은 인라인수준 상자 또는 블록수준 상자만을 포함합니다. 그러나 문서는 두 가지 모두를 혼합해 포함합니다. 그 경우 무명 블록 상자는 인접 인라인수준 상자 주변에 생성됩니다.</p> - -<h3 id="예제">예제</h3> - -<p>아래와 같은 ({{ HTMLElement("div") }}와 {{ HTMLElement("p") }}에 기본값 스타일링이 적용된 에이치티엠엘 코드가 <code>display: block</code> 속성을 갖고 있다면:</p> - -<pre class="syntaxbox"><code><div>약간의 인라인 텍스트 <p>뒤를 잇는 단락 하나</p> 그 뒤를 잇는 인라인 텍스트.</div></code></pre> - -<p>두 개의 무명 블록 상자가 만들어집니다: 하나는 단락 이전 텍스트(<code>약간의 인라인 텍스트</code>) 나머지 하나는 단락 이후 텍스트(<code>그 뒤를 잇는 인라인 텍스트</code>). 이는 다음과 같은 블록 구조를 구축합니다:</p> - -<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p> - -<p>결과는:</p> - -<pre>약간의 인라인 텍스트 -뒤를 잇는 단락 하나 -그 뒤를 잇는 인라인 텍스트. -</pre> - -<p>{{ HTMLElement("p") }} 요소인 상자와 달리 웹 개발자는 두 개의 무명 상자 스타일을 제어할 수 없습니다. 상속 가능한 속성은 (마치 텍스트의 색상을 정의하기 위한 {{ cssxref("color") }}와 같이) {{ HTMLElement("div") }}의 속성 값에서 값을 취하고, 나머지는 초기(<code>initial</code>)값으로 설정합니다. 예를 들어, 무명 상자는 {{ cssxref("background-color") }}를 갖지 않을 것이라, 항상 해당 속성의 초기(<code>initial</code>)값을 가지며 투명합니다. 따라서 <code><div></code>의 배경이 보여집니다. 특정 배경색은 <code><p></code> 상자에 적용할 수 있습니다. 마찬가지로 두 무명 상자는 항상 같은 색을 텍스트에 사용합니다.</p> - -<p>무명 블록 상자를 만드는 또 다른 사례는 하나 또는 여러 개의 블록 상자를 포함하는 인라인 상자입니다. 이 경우 블록 상자가 들어있는 상자는 두 개의 인라인 상자로 쪼개집니다. 하나는 블록 상자 이전에, 다른 하나는 뒤에 옵니다. 블록 상자 이전의 모든 인라인 상자는 <em>무명 블록 상자</em>로 포섭되며, 블록 상자 뒤에 있는 인라인 상자도 마찬가지입니다. 따라서 블록 상자는 인라인 요소를 포함하는 두 개의 무명 블록 상자의 형제가 됩니다.</p> - -<p>중간에 인라인 콘텐츠가 없이 여러 블록 상자가 있는 경우 무명 블록 상자가 해당 상자 집합 이전과 이후에 생성됩니다.</p> - -<h3 id="예제_2">예제</h3> - -<p>아래 에이치티엠엘 코드를 보면 {{ HTMLElement("p") }}는 <code>display: inline</code> 속성을 갖고 있고 {{ HTMLElement("span") }}는 <code>display:block</code> 속성을 갖고 있습니다:</p> - -<pre class="syntaxbox"><code><p>일부 <em>인라인</em> 텍스트 <span>그 뒤를 잇는 단락</span> 그 뒤를 잇는 추가 인라인 텍스트.</p></code></pre> - -<p>두 개의 무명 블록 상자가 생성되었습니다. 스팬 요소 이전의 텍스트(<code>일부 <em>인라인</em> 텍스트</code>) 하나와 그 뒤의 텍스트(<code>그 뒤를 잇는 추가 인라인 텍스트</code>) 하나가 있는데 이로써 다음과 같은 블록 구조가 주어졌습니다:</p> - -<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> - -<p>이 것의 결과는:</p> - -<pre>약간의 인라인 텍스트 -뒤를 잇는 단락 하나 -그 뒤를 잇는 인라인 텍스트. -</pre> - -<h3 id="인라인수준_요소와_인라인_상자">인라인수준 요소와 인라인 상자</h3> - -<p>어떤 요소가 <em>인라인수준</em>이라고 말하려면 자신의 계산된 {{ cssxref("display") }} 씨에스에스 속성 값이 <code>inline</code>, <code>inline-block</code> 또는 <code>inline-table</code>일 때입니다. 시각적으로는 이것은 콘텐츠로 이뤄진 블록 무리를 구성하지 않고 다른 인라인수준 콘텐츠와 함께 라인의 형태로 배포됩니다. 일반적으로 강조 또는 이미지와 같이 서로 다른 서식을 가진 단락의 콘텐츠는 인라인수준 요소로 만들어집니다.</p> - -<p><img alt="venn_inlines.png" class="internal lwrap" src="/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p> - -<div class="warning"> -<p>이 도식은 구식 용어를 사용합니다: 아래 참조 사항을 보세요. 그것 이외에도 오른쪽의 노란색 타원은 정의에 따르면 왼쪽의 타원형과 동일하거나 그보다 크기 때문에(수학적 상위집합일 수 있어) 그림이 틀렀습니다, 왜냐하면 해당 씨에스에스 스펙을 보면 "인라인수준 요소는 인라인 서식 상황에 참여하는 상자인 인라인수준 상자를 생성한다"라고 쓰여있기 때문입니다. 씨에스에스 2.2, 9.2.2장 참조</p> -</div> - -<p>인라인 수준 요소는 <a href="/ko/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">인라인 서식 상황</a>에 참여하는 상자로 정의되는 <em>인라인수준 상자</em>를 생성합니다. <em>인라인 상자</em>는 상자와 인라인 수준 상자 모두가 해당합니다. 다만 이들 상자의 콘텐츠는 인라인 서식 상황에 참여해야 합니다. 예를 들어, <code>display: inline</code> 속성을 가진 모든 비객원 상자의 경우가 인라인입니다. 인라인 서식 상황에 참여하지 않는 인라인수준 상자를 <ruby><em>원자 인라인수준 상자</em><rp> (</rp><rt>atomic inline-level boxes</rt><rp>) </rp></ruby>라고 합니다. 객원 인라인수준 요소 또는 계산된 {{ cssxref("display") }} 값이 <code>inline-block</code>인 요소에 의해 생성된 해당 상자 무리는 인라인 상자에서 가능했던 것처럼 여러 상자로 쪼개지지 않습니다.</p> - -<div class="note"><strong>참고:</strong> 처음에는 원자 인라인수준 상자를 원자 인라인 상자라고 불렀습니다. 그 명명은 불행한 일입니다. 인라인 상자가 <strong>아니기</strong> 때문입니다. 이건 씨에스에스 규격 상에 오타로 시정된 겁니다. 그렇긴 하지만, 문장 속에서 원자 인라인 상자를 마주칠 때마다 무리없이 원자 인라인 수준 상자로 읽을 수 있습니다. 그냥 이름 변경에 불과하기 때문입니다.</div> - -<div class="note">원자 일라인 상자는 인라인 서식 상황 속에서 여러 라인에 걸쳐 분할될 수 없습니다. -<div style="-moz-column-width: 30em;"> -<pre><style> - span { - display:inline; /* default value*/ - } -</style> -<div style="width:20em;"> - 스팬 요소에 포함된 택스트는 <span> 몇 개의 라인으로 분할 될 수 - 있습니다. 왜냐면 </span> 그것이 인라인 상자이기 때문입니다. -</div> -</pre> - -<p>이 것의 결과는:</p> - -<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div> - -<pre><style> - span { - display:inline-block; - } -</style> -<div style="width:20em;"> - 스팬 요소에 포함된 텍스트는 <span>몇 라인으로 분할 될 수 - 없 습니다. 왜냐면 </span> 그것이 인라인 블록이기 때문입니다. -</div> -</pre> - -<p>이 것의 결과는:</p> - -<div style="width: 20em;">스팬 요소에 포함된 텍스트는 <span style="display: inline-block;">분할될 수 없습니다. 왜냐면</span> 인라인 블록 상자이기 때문입니다.</div> -</div> -</div> - -<h4 id="무명_인라인_상자">무명 인라인 상자</h4> - -<p>블록상자처럼 씨에스에스 엔진에 의해 자동적으로 인라인상자가 생성되는 경우가 몇 개 있습니다. 이들 인라인 상자는 무명으로, 선택기가 이름을 특정할 수 없습니다. 무명 인라인 상자의 속성은, 상속 가능한 것은 상속된 값을, 그 이외는 <code>initial</code> 값을 가집니다.</p> - -<p>무명의 인라인 상자가 만들어지는 흔한 경우는 인라인 서식 상황을 만드는 블록상자의 직계 자식 요소로 파악되는 텍스트가 있는 경우입니다. 이 경우, 동 텍스트는 최대한 큰 무명 인라인 상자에 넣을 수 있습니다. 또한, 씨에스에스의 {{ cssxref("white-space") }} 속성으로 지정된 동작에 의해 제거되는 공백의 콘텐츠는 결국 공백이 될 것이기 때문에 무명 인라인 상자를 생성하지 않습니다.</p> - -<div class="note">예제 TBD</div> - -<h3 id="다른_유형의_상자">다른 유형의 상자</h3> - -<h4 id="라인_상자">라인 상자</h4> - -<p><em>라인 상자</em>는 텍스트 라인을 표현하기 위해 <a href="/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">인라인 서식 상황</a>에 의해 생성되는 상자입니다. 블록 상자 내부의 라인 상자는 상자의 한쪽 테두리로부터 반대측의 테두리까지 넓어집니다. <a href="/en-US/docs/CSS/float" title="float">부동체</a>가 있을 경우 라인 상자 구역은 왼쪽 부동체의 맨우측 테두리에서 시작해 우측 부동체의 맨좌측 테두리에서 끝납니다.</p> - -<p>이들 상자는 기술적인 것으로, 보통 웹 저술가가 이것에 대해 고민할 필요는 없습니다.</p> - -<h4 id="내부진행_상자">내부진행 상자</h4> - -<p><code>display: run-in</code>을 사용하도록 정의되는 <ruby><em>내부진행 상자</em><rp> (</rp><rt>Run-in boxes</rt><rp>) </rp></ruby>는 후속 상자의 유형 여하에 따라 블록 상자이거나 인라인 상자입니다. 그들은 가능할 경우 자신의 첫 단락 내부에 진행하는 글 제목을 생성하는 데 사용될 수 있습니다.</p> - -<div class="note"><strong>참고:</strong> 내부진행 상자는 씨에스에스 2.1 규격에서 제외되었다. 상호운용 실현 가능성을 불충분하게 명시했기 때문입니다. 그들이 <ruby><em>씨에스에스 3</em><rp> (</rp><rt>CSS 3</rt><rp>) </rp></ruby>에선 다시 등장할 수도 있지만, 현재로선 <em>실험 상태</em>로 간주합니다. 그들을 완성품에선 사용하지 말아야 합니다.</div> - -<h4 id="모델유인_상자">모델유인 상자</h4> - -<p>인라인 및 블록 서식 상황 외에도 씨에스에스는 요소에 적용할 수 있는 몇 가지 추가 <em>콘텐츠 모델</em>을 지정할 수 있습니다. 특정 레이아웃을 설명하는 데 사용되는 이러한 추가 모델은 추가 상자 유형을 정의할 수 있습니다.</p> - -<ul> - <li><a href="/en-US/docs/CSS/table-layout" title="table-layout">테이블 콘텐츠 모델</a>은 <em>테이블 래퍼 상자</em>와 <em>테이블 상자</em>를 생성할 수 있을뿐만 아니라 <em>캡션 상자</em>같은 특정 상자도 생성할 수 있습니다.</li> - <li>The <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">다단 콘텐츠 모델</a> 은 컨테이너 상자와 컨텐츠 사이에 <ruby><em>열 상자</em><rp> (</rp><rt>column boxes</rt><rp>) </rp></ruby>를 생성할 수 있습니다.</li> - <li>실험적인 격자 또는 가변상자 콘텐츠 모델, 또는 추가적인 유형의 상자를 생성할 수 있습니다.</li> -</ul> - -<h4 id="위치잡기_기법">위치잡기 기법</h4> - -<p>상자를 생성하고 나면 씨에스에스 엔진은 그것들을 조판에 위치시켜야 합니다. 그렇게 하려면 다음과 같은 알고리즘 중의 하나를 사용합니다.</p> - -<ul> - <li><ruby><em>일반 대열</em><rp> (</rp><rt>normal flow</rt><rp>) </rp></ruby> - 하나씩 차례대로 상자를 위치시킵니다.</li> - <li><ruby><em>부동체</em><rp> (</rp><rt>floats</rt><rp>) </rp></ruby> 알고리즘 - 일반 대열에서 상자를 빼내어 상위 컨테이너 상자 옆에 놓습니다.</li> - <li><em>절대 위치잡기</em> 기법 - 자신의 상위 컨테이너 요소가 수립한 절대 좌표 시스템 내부에 상자를 위치시킵니다. 절대적으로 위치잡기한 요소는 다른 요소를 덮을 수 있습니다.</li> -</ul> - -<h3 id="일반_대열">일반 대열</h3> - -<p><em>일반 대열</em> 속 상자 무리는 하나씩 차례대로 배치됩니다. 블록 서식 상황 속에서 그들은 수직으로 배치됩니다. 반면에 인라인 서식 상황 속에서 그들은 수평으로 배치됩니다. 일반 대열은 CSS {{ cssxref("position") }}이 <code>static</code> 또는 <code>relative</code> 값으로 설정될 경우와 {{ cssxref("float") }}가 <code>none</code>으로 설정되면 발동됩니다.</p> - -<h3 id="예제_3">예제</h3> - -<div class="note">일반 대열 속에서는 블록 서식 상황에 포함된 상자는 수직으로 하나씩 차례대로 배치됩니다.<br> -<br> -일반 대열 속에서는 인라인 서식 상황에 포함된 상자는 수평으로 하나씩 차례대로 배치됩니다.</div> - -<div class="note"> -<p>일반 대열에는 두 가지 하위 사례가 있습니다. 정적 위치잡기와 상대 위치잡기:</p> - -<ul> - <li><em>정적 위치잡기</em>에서는 {{ cssxref("position") }} 속성이 <code>static</code> 값일 경우에 발동됩니다. 상자 무리는 일반 대열 조판에 정의된 정확한 위치에 그려집니다.</li> - <li><em>상대 위치잡기</em>에서는 {{ cssxref("position") }} 속성이 <code>relative</code> 값일 경우 발동합니다. 상자는 씨에스에스 속성 무리인 {{ cssxref("top") }}, {{ cssxref("bottom") }}과 {{ cssxref("left") }}, {{ cssxref("right") }}에 의해 정의된 간격띄우기 값을 기준으로 그려집니다.</li> -</ul> -</div> - -<h3 id="부동체">부동체</h3> - -<p><ruby><em>부동 위치잡기 기법</em><rp> (</rp><rt>float positioning scheme</rt><rp>) </rp></ruby>에서는 특정 상자(부동 상자 또는 단순 부동체라고 일컬음)를 현재 라인의 시작 또는 끝에 위치시킵니다. 이는 텍스트(그리고 더 일반적으로 일반 대열 내의 모든 것)은 부동 상자의 가장자리를 따라 대열을 맞추는 속성으로 귀결됩니다. 다만 씨에스에스 {{ cssxref("clear") }} 속성에 의해 다른 예기가 나올 경우는 예외입니다.</p> - -<p>상자에 대해 부동 위치잡기 기법을 선택하려면 해당 상대에 대해 씨에스에스 {{ cssxref("float") }} 속성을 <code>none</code> 이외의 값으로 설정하거나 {{ cssxref("position") }} 속성에 <code>static</code>이나 <code>relative</code>가 아닌 값으로 설정할 때 이뤄진다. 만일 {{ cssxref("float") }}가 <code>left</code>로 설정되면 부동체는 라인 상자의 시작 부분에 위치합니다. 만일 <code>right</code>으로 설정되면 동 부동체는 라인 상자의 끝에 위치합니다. 어떤 경우든 라인 상자는 부동체에 들어맞게 축소됩니다.</p> - -<h3 id="절대_위치잡기">절대 위치잡기</h3> - -<p><ruby><em>절대 위치잡기 기법</em><rp> (</rp><rt>absolute positioning scheme</rt><rp>) </rp></ruby>에 포함된 상자는 대열에서 제거되어 대열과는 어떤 상호작용도 하지 않습니다. 그들은 {{ cssxref("top") }}과 {{ cssxref("bottom") }}, {{ cssxref("left") }}와 {{ cssxref("right") }}를 사용해서 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">상위 컨테이너 블록</a> 기준으로 비례해서 위치잡기합니다.</p> - -<p>하나의 요소를 절대 위치잡기하려면 {{ cssxref("position") }}이 <code>absolute</code> 또는 <code>fixed</code>로 설정하면 됩니다.</p> - -<p><em>고정 위치잡기한 요소</em>의 경우 상위 컨테이너 블록이 뷰포트입니다. 동 요소의 위치는 뷰포트 내부에서 절대적 위치가 됩니다. 스크롤링은 동 요소의 위치를 변경시키지 않습니다.</p> - -<h2 id="참조_항목">참조 항목</h2> - -<ul> - <li>{{css_key_concepts}}</li> -</ul> diff --git a/files/ko/web/guide/dom/index.html b/files/ko/web/guide/dom/index.html deleted file mode 100644 index fc26bc0bee..0000000000 --- a/files/ko/web/guide/dom/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DOM developer guide -slug: Web/Guide/DOM -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -<p>{{draft}}</p> -<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.</p> -<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p> -<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> -<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> -<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p> -<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> -<h2 id="More_about_the_DOM">More about the DOM</h2> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/web/guide/dom/using_full_screen_mode/index.html b/files/ko/web/guide/dom/using_full_screen_mode/index.html deleted file mode 100644 index d7f561a95c..0000000000 --- a/files/ko/web/guide/dom/using_full_screen_mode/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Using fullscreen mode -slug: Web/Guide/DOM/Using_full_screen_mode -translation_of: Web/API/Fullscreen_API ---- -<div>{{DefaultAPISidebar("Fullscreen API")}}</div> - -<p><strong>Fullscreen API</strong> 는 특정 요소{{DOMxRef("Element")}}(와 해당 자손들을)를 full-screen mode로 표시하고, 더 이상 필요하지 않으면 full-screen mode를 종료하는 메서드를 추가합니다. 이렇게 하면 사용자의 전체 화면을 사용하여, 온라인 게임과 같은 원하는 내용을 표시할 수 있습니다. full-screen mode가 종료될 때까지 화면에서 브라우저의 모든 유저 인터페이스 요소와 기타 응용 프로그램을 제거할 수 있습니다.</p> - -<p>API 사용 방법에 대한 자세한 내용은 <a href="/ko/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a> 문서를 참조하세요.</p> - -<div class="blockIndicator note"> -<p><strong>주의:</strong> 이 API에 대한 지원은 여러 브라우저에서 이루어지며, 다양한 업체의 접두사(prefix)가 필요하거나, 최신 사양을 구현하지 않는 경우가 많습니다. 이 API 지원에 대한 자세한 내용은 아래에 있는 {{anch("Browser compatibility")}} 섹션을 참조하세요. Fullscreen API를 지원하지 않는 업체의 경우, <a href="https://github.com/rafrex/fscreen">Fscreen</a> 과 같은 라이브러리를 사용할 수 있습니다.</p> -</div> - -<h2 id="Interfaces">Interfaces</h2> - -<p><em>Fullscreen API 에는 자체 인터페이스가 없습니다. 대신에, full-screen 기능을 제공하는데 필요한 메서드, 속성(property), 이벤트 핸들러를 추가하기 위해, 다음 섹션에 나열된 것과 같은 몇 가지 다른 인터페이스를 추가합니다. </em></p> - -<h2 id="Methods">Methods</h2> - -<p>Fullscreen API 는 {{DOMxRef("Document")}}, {{DOMxRef("Element")}} 인터페이스에 메서드를 추가하여 full-screen mode를 설정하거나 해제할 수 있습니다.</p> - -<h3 id="Methods_on_the_Document_interface">Methods on the Document interface</h3> - -<dl> - <dt>{{DOMxRef("Document.exitFullscreen()")}}</dt> - <dd>{{Glossary("user agent")}} 가 full-screen mode에서 창 모드로 다시 전환되도록 요청합니다. full-screen mode가 완전히 종료되면 {{jsxref("Promise")}} resolved 를 반환합니다.</dd> -</dl> - -<h3 id="Methods_on_the_Element_interface">Methods on the Element interface</h3> - -<dl> - <dt>{{DOMxRef("Element.requestFullscreen()")}}</dt> - <dd>유저 에이전트가 지정한 요소(그리고 그 자손들까지)를 full-screen mode로 설정하고, 브라우저의 모든 UI 요소와 다른 모든 애플리케이션을 화면에서 제거하도록 요구합니다. full-screen mode가 활성화되면 {{jsxref("Promise")}} resolved를 반환합니다.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<p><em>{{DOMxRef("Document")}} 인터페이스는 full-screen mode가 지원되고 사용 가능한지, full-screen mode가 현재 활성화 되어있는지, 어떤 요소가 스크린을 사용하고 있는지 확인하는데 사용할 수 있는 속성(property)을 제공합니다.</em></p> - -<dl> - <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}</dt> - <dd><code>fullscreenElement</code> 속성은 DOM(혹은 shadow DOM)에서 현재 full-screen mode로 표시되는 요소{{DOMxRef("Element")}}를 알려줍니다. 이것이 <code>null</code>인 경우, document는 full-screen mode가 아닙니다.</dd> - <dt>{{DOMxRef("Document.fullscreenEnabled")}}</dt> - <dd><code>fullscreenEnabled</code> 속성(property)은 full-screen mode를 사용할 수 있는지 여부를 알려줍니다. 이유가 어떻든(예를들어, <code>"fullscreen"</code> 기능이 허락되지 않거나, full-screen mode가 지원되지 않는 경우) full-screen mode를 사용할 수 없으면 <code>false</code> 입니다.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<p><em>Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다. 이러한 이벤트에 대한 이벤트 핸들러는 {{DOMxRef("Document")}} 와{{DOMxRef("Element")}} 인터페이스 에서 사용할 수 있습니다.</em></p> - -<div class="blockIndicator note"> -<p><strong>주의:</strong> 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 {{Event("fullscreenchange")}} 및 {{Event("fullscreenerror")}} 이벤트를 지정할 수 없습니다. 자바스크립트 코드로 추가해야만 합니다.</p> -</div> - -<h4 id="Event_handlers_on_documents">Event handlers on documents</h4> - -<dl> - <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt> - <dd>문서(document)가 full-screen mode로 전환되거나 full-screen mode를 종료할 때 {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenchange")}} 이벤트에 대한 이벤트 핸들러 입니다. 이 핸들러는 오직 전체 문서가 full-screen mode로 표시될 때만 호출됩니다.</dd> - <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt> - <dd>전체 문서에 대해 full-screen mode를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면, {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.</dd> -</dl> - -<h4 id="Event_handlers_on_elements">Event handlers on elements</h4> - -<dl> - <dt>{{DOMxRef("Element.onfullscreenchange")}}</dt> - <dd>{{Event("fullscreenchange")}} 이벤트가 요소(element)로 전송되면, 요소가 full-screen mode로 배치되거나 제거되었음을 나타내는 이벤트 핸들러입니다.</dd> - <dt>{{DOMxRef("Element.onfullscreenerror")}}</dt> - <dd>full-screen mode 를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면 요소로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.</dd> -</dl> - -<h3 id="Obsolete_properties">Obsolete properties</h3> - -<dl> - <dt>{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}</dt> - <dd>문서에 현재 full-screen mode로 표시되는 요소가 있는 경우 <code>true</code>, 그렇지 않으면 <code>false</code>의 Boolean 값입니다. - <div class="note"><strong>주의:</strong> 대신에 {{DOMxRef("Document")}} 나 {{DOMxRef("ShadowRoot")}} 에서 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 속성(property)을 사용하세요. 그것이 <code>null</code>이 아닌 경우 {{DOMxRef("Element")}}가 full-screen mode로 표시됩니다.</div> - </dd> -</dl> - -<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Events</h2> - -<p><em>Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다.</em></p> - -<dl> - <dt>{{Event("fullscreenchange")}}</dt> - <dd>full-screen mode를 사용하거나, 사용하지 않도록 전환할 때 {{DOMxRef("Document")}} 혹은{{DOMxRef("Element")}} 로 보냅니다.</dd> - <dt>{{Event("fullscreenerror")}}</dt> - <dd>full-screen mode를 사용하거나, 사용하지 않도록 전환하려고 시도하는 중에 오류가 발생하면 <code>Document</code> 또는 <code>Element</code> 로 보냅니다.</dd> -</dl> - -<h2 id="Dictionaries">Dictionaries</h2> - -<dl> - <dt>{{DOMxRef("FullscreenOptions")}}</dt> - <dd>{{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}}을 호출할 때 지정할 수 있는 옵션 설정을 제공합니다.</dd> -</dl> - -<h2 id="Controlling_access">Controlling access</h2> - -<p><a href="/ko/docs/Web/HTTP/Feature_Policy">Feature Policy</a>을 사용하여 full-screen mode의 유효성을 제어할 수 있습니다. full-screen mode는 <code>"fullscreen"</code>으로 식별되고, 기본 허용 목록 값은 <code>"self"</code> 입니다. 이는 최상위(top-level) 문서 컨텍스트에서 full-screen mode가 허용된다는 것을 의미하며, 최상위(top-most) 문서와 같은 출처에서 로드 된 중첩 된 컨텍스트에도 적용됩니다.</p> - -<p>기능 정책을 사용하여 API에 대한 액세스를 제어하는 자세한 내용은 <a href="/ko/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a>을 참조하세요.</p> - -<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Usage notes</h2> - -<p>사용자는 <kbd>ESC</kbd> (혹은 <kbd>F11</kbd>) 키를 누르기만하면 사이트 또는 앱이 프로그래밍 방식으로 기다리는 대신에, full-screen mode를 종료하도록 선택할 수 있습니다. 유저 인터페이스의 어딘가에 사용자에게 이 옵션을 사용할 수 있음을 알리는, 적절한 유저 인터페이스 요소를 제공해야 합니다.</p> - -<div class="note"> -<p><strong>주의:</strong> 다른 페이지로 이동하거나, 탭을 변경하거나, 응용 프로그램 전환기(또는 <kbd>Alt</kbd>-<kbd>Tab</kbd>)를 사용하여, 다른 응용 프로그램으로 전환하면 마찬가지로 full-screen mode가 종료됩니다.</p> -</div> - -<h2 id="Example">Example</h2> - -<p>이 예제에서는 비디오가 웹 페이지에 표시됩니다. <kbd>Return</kbd> 또는 <kbd>Enter</kbd> 키를 누르면, 사용자가 비디오의 창과 full-screen 표시를 전환할 수 있습니다.</p> - -<p><a href="/samples/domref/fullscreen.html">View Live Examples</a></p> - -<h3 id="Watching_for_the_Enter_key">Watching for the Enter key</h3> - -<p>페이지가 로드되면, 이 코드가 실행되어 <kbd>Enter</kbd> 키 를 주시하는 이벤트 리스너를 설정합니다.</p> - -<pre class="brush: js">document.addEventListener("keypress", function(e) { - if (e.keyCode === 13) { - toggleFullScreen(); - } -}, false); -</pre> - -<h3 id="Toggling_full-screen_mode">Toggling full-screen mode</h3> - -<p>이 코드는 사용자가 <kbd>Enter</kbd> 키를 누를 때, 위의 이벤트 핸들러에 의해 호출됩니다.</p> - -<pre class="brush: js">function toggleFullScreen() { - if (!document.fullscreenElement) { - document.documentElement.requestFullscreen(); - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } - } -}</pre> - -<p>먼저 {{DOMxRef("Document", "document")}}의 <code>fullscreenElement</code> 속성(attribute)값을 살펴보겠습니다. 실제 배포 시에는 이 시점에 접두어가 붙은 버전(예를들어, <code>mozFullscreenElement</code>, <code>msFullscreenElement</code>, <code>webkitFullscreenElement</code>)을 확인해야 합니다. 값이 <code>null</code>인 경우, 문서는 현재 window mode에 있으므로, full-screen mode로 전환해야 합니다. 그렇지 않으면, 이 요소는 지금 full-screen mode 상태입니다. full-screen mode로 전환하는 작업은, {{HTMLElement("video")}}요소에서 {{DOMxRef("Element.requestFullscreen()")}}을 호출하여 수행합니다.</p> - -<p>full-screen mode가 이미 활성화 된 경우(<code>fullscreenElement</code> 가 <code>null</code>이 아닌 경우), <code>document</code>에서 {{DOMxRef("Document.exitFullscreen", "exitFullscreen()")}}을 호출하여 full-screen mode를 종료합니다.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Fullscreen")}}</td> - <td>{{Spec2("Fullscreen")}}</td> - <td>Initial version.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<h3 id="Document.fullscreen"><code>Document.fullscreen</code></h3> - -<div> - - -<p>{{Compat("api.Document.fullscreen")}}</p> - -<h3 id="Document.fullscreenEnabled"><code>Document.fullscreenEnabled</code></h3> - -<div> -<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> - -<p>{{Compat("api.Document.fullscreenEnabled")}}</p> -</div> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Fullscreen_API">Using full-screen mode</a></li> - <li>{{DOMxRef("Element.requestFullscreen()")}}</li> - <li>{{DOMxRef("Document.exitFullscreen()")}}</li> - <li>{{DOMxRef("Document.fullscreen")}}</li> - <li>{{DOMxRef("Document.fullscreenElement")}}</li> - <li>{{CSSxRef(":fullscreen")}}, {{CSSxRef("::backdrop")}}</li> - <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li> -</ul> diff --git a/files/ko/web/guide/그래픽/index.html b/files/ko/web/guide/graphics/index.html index cb7cd6f873..cb7cd6f873 100644 --- a/files/ko/web/guide/그래픽/index.html +++ b/files/ko/web/guide/graphics/index.html diff --git a/files/ko/web/guide/html/content_editable/index.html b/files/ko/web/guide/html/editable_content/index.html index 2e039ea976..2e039ea976 100644 --- a/files/ko/web/guide/html/content_editable/index.html +++ b/files/ko/web/guide/html/editable_content/index.html diff --git a/files/ko/web/guide/html/html5/index.html b/files/ko/web/guide/html/html5/index.html new file mode 100644 index 0000000000..2d64ce56d6 --- /dev/null +++ b/files/ko/web/guide/html/html5/index.html @@ -0,0 +1,122 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +<p><strong>HTML5</strong>는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 명세</a>는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중 많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 <a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 및 <a href="/ko/List_of_Mozilla-Based_Applications" title="ko/List of Mozilla-Based Applications">다른 많은 제품</a>으로 사용되어 있는 Mozilla의 <a href="/ko/Gecko" title="ko/Gecko">Gecko</a> 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.</p> + +<p>(<a href="/ko/HTML/HTML5/HTML5_Thematic_Classification" title="ko/HTML/HTML5/HTML5 Thematic Classification">HTML5의 문서에 대한 다른 분류</a>도 참고하세요.)</p> + +<h2 id="HTML5_소개">HTML5 소개</h2> + +<dl> + <dt><a href="/ko/HTML/HTML5/Introduction_to_HTML5" title="ko/HTML/Introduction to HTML5"><strong>HTML5의 소개</strong></a></dt> + <dd>이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.</dd> +</dl> + +<h2 id="HTML5의_요소">HTML5의 요소</h2> + +<dl> + <dt><a href="/ko/HTML/HTML5/HTML5_Tags_List" title="ko/HTML/HTML5/HTML5 Tags List"><strong>HTML5 요소·태그의 목록</strong></a></dt> + <dd>현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.</dd> + <dt><a href="/Ja/Using_HTML5_audio_and_video" title="ko/Using_audio_and_video_in_Firefox">오디오/비디오 사용하기</a></dt> + <dd>Firefox 3.5이상에서 HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.</dd> + <dt><a href="/ko/HTML/Forms_in_HTML" title="ko/HTML/HTML5/Forms in HTML5">HTML5 웹 폼양식</a></dt> + <dd>HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.</dd> + <dt><a href="/ko/Sections_and_outlines_of_an_HTML5_document" title="ko/Sections and Outlines of an HTML5 document">HTML5 섹션과 아웃라인</a></dt> + <dd>HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.</dd> + <dt>{{ HTMLElement("mark") }} 요소</dt> + <dd>mark 요소는 텍스트중에서의 특별한<em> 관련성</em>을 강조시키기 위해서 이용합니다.</dd> + <dt>{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소</dt> + <dd>주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.</dd> +</dl> + +<h3 id="Canvas_기술_지원">Canvas 기술 지원</h3> + +<dl> + <dt><a href="/ko/Canvas_tutorial" title="https://developer.mozilla.org/ko/Canvas_tutorial">Canvas 튜토리얼</a></dt> + <dd>새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.</dd> + <dt><a href="/ko/Drawing_text_using_a_canvas" title="ko/Drawing_text_using_a_canvas"><code>canvas</code> 요소의 HTML5 text API</a></dt> + <dd>{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.</dd> +</dl> + +<h2 id="웹_애플리케이션_기능">웹 애플리케이션 기능</h2> + +<dl> + <dt><a href="/ko/HTML/Using_the_application_cache" title="ko/Offline_resources_in_Firefox">Firefox 오프 라인 자원</a></dt> + <dd>Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.</dd> + <dt><a href="/ko/Online_and_offline_events" title="ko/Online_and_offline_events">Online 이벤트와 Offline 이벤트</a></dt> + <dd>Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.</dd> + <dt><a href="/ko/DOM/Storage" title="ko/DOM/Storage">WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)</a></dt> + <dd>클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.</dd> + <dt><a href="/ko/HTML/Content_Editable" title="ko/HTML/Content Editable"><code>contentEditable</code> 속성： 웹 사이트 및 위키 편집 용이성</a></dt> + <dd>HTML5 에서는 <code>contentEditable</code> 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.</dd> + <dt><a href="/ko/Using_files_from_web_applications" title="ko/Using_files_from_web_applications">로컬 파일 사용하기</a></dt> + <dd>새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 <a href="/ko/HTML/Element/Input#attr-type" title="ko/HTML/Element/input#attr-type"><strong>type</strong></a> 속성의 값에 <code>file</code>를 지정한 <code>{{ HTMLElement("input") }}</code> 요소에 새롭게 추가된 <a href="/ko/HTML/Element/Input#attr-multiple" title="ko/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.</dd> +</dl> + +<h2 id="DOM_주요_기능">DOM 주요 기능</h2> + +<dl> + <dt><a href="/ko/DOM/document.getElementsByClassName" title="ko/DOM/document.getElementsByClassName">getElementsByClassName</a></dt> + <dd>Document 및 Element 노드에 있어서의 <code>getElementsByClassName</code> 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.</dd> + <dt><a href="/Ja/DragDrop/Drag_and_Drop" title="ko/DragDrop/Drag_and_Drop">드래그 앤 드롭</a></dt> + <dd>HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.</dd> + <dt><a href="/ko/Focus_management_in_HTML" title="ko/Focus_management_in_HTML">HTML 내 포커스 관리</a></dt> + <dd>HTML5가 새로운 <code>activeElement</code> 속성과 <code>hasFocus</code> 속성이 지원되어 있습니다.</dd> + <dt><a href="/ko/Web-based_protocol_handlers" title="ko/Web-based_protocol_handlers">웹 기반 프로토콜 핸들러</a></dt> + <dd><code>navigator.registerProtocolHandler()</code>메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.</dd> +</dl> + +<h2 id="HTML_파서">HTML 파서</h2> + +<p>Gecko의 <a href="/ko/HTML/HTML5/HTML5_Parser" title="ko/HTML/HTML5/HTML5 parser">HTML5 표준 파서</a>(HTML 문서를 DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).{{ fx_minversion_inline(4.0) }}</p> + +<h2 id="추가_변경사항">추가 변경사항</h2> + +<ul> + <li>HTML 문서에 있어서의 <code>localName</code> 및 <code>namespaceURI</code>는 XML 문서 때와 같은 행동을 하게 되었습니다. 예를 들면, <code>localName</code>는 소문자를 돌려주어, HTML 요소의 <code>namespaceURI</code>는 <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"</code>를 돌려줍니다.</li> + <li>페이지 URI 문서 단편 식별자 ("#" (해시) 문자에서 후의 부분)가 변경되었을 때, 새로운 <code>hashchange</code> 이벤트가 페이지에 보내집니다. 자세한 것은 <code><a href="/ko/DOM/window.onhashchange" title="ko/DOM/window.onhashchange">window.onhashchange</a></code>를 참조해 주십시오.</li> + <li><code>class</code> 속성을 보다 간단하게 취급할 수 있도록 HTML5의 <code><a href="/ko/DOM/element.classList" title="ko/DOM/element.classList">element.classList</a></code>이 기술 지원되었습니다.</li> + <li>문서에 즉시 생성되는 이벤트에 응하는 <code><a href="/ko/DOM/document.onreadystatechange" title="ko/DOM/document.onreadystatechange">document.onreadystatechange</a></code>와 <code><a href="/ko/DOM/document.readyState" title="ko/DOM/document.readyState">document.readyState</a></code>가 기술 지원되었습니다.</li> + <li>표시에 관련하는 속성으로 지정한 색은 HTML5의 사양에 따라서 해석됩니다.</li> +</ul> + +<h2 id="HTML5의_일부로서_포함된_기술">HTML5의 일부로서 포함된 기술</h2> + +<p>아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.</p> + +<ul> + <li><a href="/ko/WebGL" title="ko/WebGL">WebGL</a></li> + <li><a href="/ko/DOM/FileReader" title="ko/DOM/FileReader">FileReader</a></li> + <li><a href="/ko/DOM/XMLHttpRequest" title="ko/XMLHttpRequest">XMLHttpRequest</a></li> + <li><a href="/ko/DOM/Locating_DOM_elements_using_selectors" title="ko/DOM/Locating DOM elements using selectors">querySelector(All)</a></li> + <li><a href="/Ja/Using_geolocation" title="ko/Using geolocation">Geolocation</a></li> + <li><a href="/ko/JavaScript/ECMAScript_5_support_in_Mozilla" title="ko/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> + <li><a href="/ko/CSS/CSS3" title="CSS3">CSS3</a></li> + <li><a href="/ko/XBL2_specification_(external)" title="ko/XBL2 specification (external)">XBL2</a></li> + <li><a href="/ko/DOM/Using_web_workers" title="ko/Using web workers">Web Workers</a></li> + <li><a href="/ko/WebSockets" title="https://developer.mozilla.org/ko/WebSockets">Web Sockets</a></li> + <li>JavaScript의 고속화</li> +</ul> + +<h2 id="관련_문서">관련 문서</h2> + +<p>웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：</p> + +<ul> + <li><a href="/ko/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li> + <li><a href="/ko/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li> + <li><a href="/ko/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li> + <li><a href="/ko/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li> + <li><a href="/ko/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li> + <li><a href="/ko/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li> + <li><a href="/ko/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li> + <li><a href="/ko/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li> + <li><a href="/ko/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li> + <li><a href="/ko/Firefox_3.6_for_developers" title="ko/Firefox 3.6 for developers">Firefox 3.6 </a></li> + <li><a href="/Ja/Firefox_3.5_for_developers" title="ko/Firefox 3.5 for developers">Firefox 3.5 </a></li> + <li><a href="/ko/Firefox_3_for_developers" title="ko/Firefox 3 for developers">Firefox 3 </a></li> + <li><a href="/ko/Firefox_2_for_developers" title="ko/Firefox 2 for developers">Firefox 2 </a></li> + <li><a href="/ko/Firefox_1.5_for_developers" title="ko/Firefox 1.5 for developers">Firefox 1.5</a></li> +</ul> diff --git a/files/ko/web/guide/html/html5/introduction_to_html5/index.html b/files/ko/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..8b9698dc53 --- /dev/null +++ b/files/ko/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,40 @@ +--- +title: HTML5 소개 +slug: Web/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML5 + - 웹개발 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.</p> + +<p>HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. <a href="/ko/HTML/HTML5" title="ko/HTML/HTML5">HTML5의 메인 페이지</a>에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> 웹 사이트를 참조해 주십시오.</p> + +<h2 id="HTML5_DOCTYPE">HTML5 DOCTYPE</h2> + +<p>HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：</p> + +<pre><!DOCTYPE html> +</pre> + +<p>이 DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.</p> + +<p>이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.</p> + +<h2 id="<meta_charset>으로_문자셋_정의하기"><code><meta charset>으로 문자셋 정의하기</code></h2> + +<p>보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.</p> + +<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p><code>이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.</code></p> + +<p><code>HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.</code></p> + +<h2 id="새로운_HTML5_해석기의_사용">새로운 HTML5 해석기의 사용</h2> + +<p>HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.</p> + +<p>이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.</p> + +<p>걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!</p> diff --git a/files/ko/web/guide/html/using_html_sections_and_outlines/index.html b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..87cae41ebd --- /dev/null +++ b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,367 @@ +--- +title: HTML 구획과 개요 사용하기 +slug: Web/HTML/HTML5_문서의_섹션과_윤곽 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +<div>{{HTMLSidebar}}</div> + +<div class="warning"> +<p><strong>중요</strong>: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 <a href="https://html.spec.whatwg.org/multipage/sections.html#outline">개요</a> 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 <strong>안됩니다</strong>. 문서 작성자는 대신 제목 <a href="https://html.spec.whatwg.org/multipage/sections.html#rank">순위</a>(<a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1-h6</a>)를 사용해 문서 구조를 나타내는 것이 좋습니다.</p> +</div> + +<p>HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.</p> + +<p>예를 들면 <div>는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, <figcaption>은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.</p> + +<p>새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.</p> + +<h2 id="HTML4에서의_문서_구조">HTML4에서의 문서 구조</h2> + +<p><span style="line-height: inherit;">문서의 구조, 즉 <code><body></code>와 <code></body></code> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다.</span> HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.</p> + +<p>그래서 다음과 같은 마크업은:</p> + +<pre class="brush: xml"><div class="section" id="forest-elephants"> + <h1>둥근귀코끼리</h1> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다. + ...섹션 내용 진행 중... + <div class="subsection" id="forest-habitat"> + <h2>서식지</h2> + <p><span style="color: #323333; font-family: courier new;">둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span> + ...하위 섹션 내용 진행 중... + </div> +</div></pre> + +<p><span style="line-height: inherit;">다음과 같은 문서 아웃라인을 가지게 됩니다:</span></p> + +<pre>1. 둥근귀코끼리 + 1.1 서식지 +</pre> + +<p>새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,</p> + +<pre class="brush: xml"><h1>둥근귀코끼리</h1> +<p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다. +...섹션 내용 진행 중... +<h2>서식지</h2> +<p>둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span> +...하위 섹션 내용 진행 중... +<h2>먹이</h2> +<h1>몽골 게르빌루스쥐</h1></pre> + +<p>앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:</p> + +<pre>1. 둥근귀코끼리 + 1.1 서식지 + 1.2 먹이 +2. 몽골 게르빌루스쥐 +</pre> + +<h2 id="HTML5에서_해결한_문제들">HTML5에서 해결한 문제들</h2> + +<p>HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:</p> + +<ol> + <li>의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 <strong>class</strong> 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 <font color="#000000">것은 불가능합니다</font>("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">보조 장비에 사용되는 기술</a>에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.</li> + <li>여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.</li> + <li>HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.</li> + <li>반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.</li> +</ol> + +<p>좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.</p> + +<h2 id="HTML5_문서_아웃라인_알고리즘">HTML5 문서 아웃라인 알고리즘</h2> + +<p>HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.</p> + +<h3 id="HTML5에서의_섹션_정의">HTML5에서의 섹션 정의</h3> + +<p>우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.</p> + +<div class="note">각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽#HTML5.EC.97.90.EC.84.9C_.EC.A0.9C.EB.AA.A9_.EC.A7.80.EC.A0.95.ED.95.98.EB.8A.94_.EB.B2.95" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">HTML5에서 제목 지정하는 법</a>을 보십시오.</div> + +<p>보기:</p> + +<pre class="brush:xml"><section> + <h1>둥근귀코끼리</h1> + <section> + <h1>소개</h1> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p> + </section> + <section> + <h1>서식지</h1> + <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> + </section> + <aside> + <p>광고 구역</p> + </aside> +</section> +<footer> + <p>(c) 2013 회사 이름</p> +</footer></pre> + +<p>위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:</p> + +<pre><span style="color: red;"><section> + <h1></span>둥근귀<span style="color: red;">코끼리</h1> + <section> + <h1>소개</h1> + <p>이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.</p> + </section> + <section> + <h1>서식지</h1> + <p></span>둥근귀<span style="color: red;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> + </section> + <aside> + <p>광고 구역</p> + </aside> +</section></span> + +<span style="color: green;"><footer> + <p>(c) 2013 회사 이름?</p> +</footer></span></pre> + +<p>첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:</p> + +<pre><section> + <h1>둥근귀코끼리</h1> + + <span style="color: red;"><section> + <h1>소개</h1> + <p>이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.</p></span> +<span style="color: red;"> </section></span> + + <span style="color: green;"><section> + <h1>서식지</h1> + <p></span>둥근귀<span style="color: green;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> + </section></span> + + <span style="color: blue;"><aside> + <p>광고 구역</p> + </aside></span> +</section> + +<footer> + <p>(c) 2013 회사 이름</p> +</footer></pre> + +<p>그래서 다음과 같은 구조를 가지게 됩니다:</p> + +<pre>1. 둥근귀코끼리 + 1.1 소개 + 1.2 서식지 + 1.3 광고 구역 (aside) +</pre> + +<h3 id="HTML5에서_제목_지정하는_법">HTML5에서 제목 지정하는 법</h3> + +<p>비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.</p> + +<p><span style="line-height: inherit;">제목 요소엔 요소 이름에 붙은 숫자를 가지고 <em>계급</em>을 매기는데,</span> {{HTMLElement("h1")}}이 <em>최상위</em> 계급이며 {{HTMLElement("h6")}}는 <em>최하위</em> 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:</p> + +<pre class="brush:xml"><section> + <h1>둥근귀코끼리</h1> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. + ...계속 된 섹션 내용... + <section> + <h2>서식지</h2> + <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. + ...계속 된 하위 섹션 내용... + </section> +</section> +<section> + <h3>몽골 게르빌루스쥐</h3> + <p>이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다. + ...계속 된 섹션 내용... +</section></pre> + +<p>이는 다음과 같은 아웃라인을 갖게 됩니다:</p> + +<pre>1. 둥근귀코끼리 + 1.1 서식지 +2. 몽골 게르빌루스쥐</pre> + +<p>여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)</p> + +<h3 id="은연중_자동으로_정의되는_섹션">은연중 자동으로 정의되는 섹션</h3> + +<p>HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 <span style="line-height: inherit;">절대적으로 </span><span style="line-height: inherit;">필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 </span><em>은연중 자동으로 정의되는 섹션</em><span style="line-height: inherit;">이라 하겠습니다</span><span style="line-height: inherit;">.</span></p> + +<p>HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:</p> + +<pre class="brush:xml"><section> + <h1>둥근귀코끼리</h1> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. + ...섹션 내용 진행 중... + <h3 class="implicit subsection">서식지</h3> + <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. + ...하위 섹션 내용 진행 중... +</section></pre> + +<p>이는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> + +<pre>1. 둥근귀코끼리 + 1.1 서식지 <em>(</em>h3 요소에 의해 은연중 자동으로 정의됨<em>)</em> +</pre> + +<p>만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p> + +<pre class="brush:xml"><section> + <h1>둥근귀코끼리</h1> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. + ...섹션 내용 진행 중... + <h1 class="implicit section">몽골 게르빌루스쥐</h1> + <p>몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다. + ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... +</section></pre> + +<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> + +<pre>1. 둥근귀코끼리 +2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐) +</pre> + +<p>만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p> + +<pre class="brush:xml"><body> + <h1>포유 동물</h1> + <h2>고래</h2> + <p>이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다. + ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... + <section> + <h3>둥근귀코끼리</h3> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. + ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... + <h3>몽골 게르빌루스쥐</h3> + <p>몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다. + ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중... + <h2>파충류</h2> + <p>파충류는 냉혈 동물입니다. + ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중... + </section> +</body></pre> + +<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> + +<pre dir="rtl">1. 포유 동물 + 1.1 고래 <em>(</em>h2 요소에 의해 자동으로 정의됨<em>)</em> + 1.2 둥근귀코끼리 <em>(</em>섹션 요소에 의해 명시적으로 정의됨<em>)</em> + 1.3 몽골 게르빌루스쥐 <em>(</em>h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em> +2. 파충류 <em>(</em>h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em></pre> + +<p>단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 <span style="line-height: inherit;">브라우저가 </span><span style="line-height: inherit;">원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.</span></p> + +<p>제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.</p> + +<h3 id="섹션_구분의_근원점"><a name="sectioning_root">섹션 구분의 근원점</a></h3> + +<p>섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.</p> + +<p>보기:</p> + +<pre class="brush:xml"><section> + <h1>숲 코끼리</h1> + <section> + <h2>소개</h2> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p> + </section> + <section> + <h2>서식지</h2> + <p>둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. +</span> 과학자들은 "<cite>보르네오 섬의 둥근귀코끼리</cite>"라는 제목의 책에서 다음과 같이 서술하고 있습니다:</p> + <blockquote> + <h1>보르네오 섬</h1> + <p>보르네오 섬에 서식하는 둥근귀코끼리...</p> + </blockquote> + </section> +</section> +</pre> + +<p>위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:</p> + +<pre>1. 숲 코끼리 + 1.1 소개 + 1.2 서식지</pre> + +<p>이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.</p> + +<h3 id="문서의_아웃라인_밖에_존재하는_섹션">문서의 아웃라인 밖에 존재하는 섹션</h3> + +<p><span style="line-height: inherit;">HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:</span></p> + +<ol> + <li>HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.</li> + <li>HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.</li> + <li>HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.</li> + <li>HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.</li> +</ol> + +<h2 id="섹션을_구분짓는_요소의_주소와_발행_시간">섹션을 구분짓는 요소의 주소와 발행 시간</h2> + +<p>문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.</p> + +<p>가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.</p> + +<p>비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.</p> + +<h2 id="HTML5_미지원_브라우저에서_HTML5_요소를_사용하는_법">HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법</h2> + +<p>섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 <code>display:inline</code> 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:</p> + +<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { + display:block; +} +</pre> + +<p>물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.</p> + +<div>그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:</div> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header" ); + document.createElement("footer" ); + document.createElement("section"); + document.createElement("aside" ); + document.createElement("nav" ); + document.createElement("article"); + document.createElement("hgroup" ); + document.createElement("time" ); + </script> +<![endif]--></pre> + +<p>이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:</p> + +<pre class="brush:xml"><noscript> + <strong>주의 !</strong> + 귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다. + 그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다. +</noscript></pre> + +<p>그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:</p> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header" ); + document.createElement("footer" ); + document.createElement("section"); + document.createElement("aside" ); + document.createElement("nav" ); + document.createElement("article"); + document.createElement("hgroup" ); + document.createElement("time" ); + </script> + <noscript> + <strong>주의 !</strong> + 귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다. + 그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다. + <code></noscript> +</code><![endif]--> +</pre> + +<h2 id="맺음말">맺음말</h2> + +<p>HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.</p> diff --git a/files/ko/web/guide/xml_파싱_및_직렬화/index.html b/files/ko/web/guide/parsing_and_serializing_xml/index.html index 872dfffaa3..872dfffaa3 100644 --- a/files/ko/web/guide/xml_파싱_및_직렬화/index.html +++ b/files/ko/web/guide/parsing_and_serializing_xml/index.html |