initial commit

1 files changed, 169 insertions, 0 deletions

diff --git a/files/ko/web/html/inline_elements/index.html b/files/ko/web/html/inline_elements/index.html
new file mode 100644
index 0000000000..b5e0219a01
--- /dev/null
+++ b/files/ko/web/html/inline_elements/index.html
@@ -0,0 +1,169 @@
+---
+title: 인라인 요소
+slug: Web/HTML/Inline_elements
+tags:
+  - Beginner
+  - Development
+  - Guide
+  - HTML
+  - Layout
+  - Web
+translation_of: Web/HTML/Inline_elements
+---
+<p>HTML(<strong>Hypertext Markup Language</strong>)의 요소는 역사적으로 <a href="/ko/docs/HTML/Block-level_elements">"블록 레벨" 요소</a>와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 이 글은 인라인 요소란 무엇인지와 블록 레벨 요소와의 차이점을 살펴봅니다.</p>
+
+<div class="blockIndicator note">
+<p>인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지합니다.</p>
+</div>
+
+<h2 id="인라인_vs._블록_레벨_요소">인라인 vs. 블록 레벨 요소</h2>
+
+<p>간단한 예제만으로 쉽게 설명할 수 있습니다. 우선 다음 CSS를 사용하겠습니다.</p>
+
+<pre class="brush: css">.highlight {
+  background-color: #ee3;
+}
+</pre>
+
+<h3 id="인라인">인라인</h3>
+
+<p>인라인 요소를 보이는 다음 예제를 확인해주세요.</p>
+
+<pre class="brush: html">&lt;div&gt;다음 span은 &lt;span class="highlight"&gt;인라인 요소&lt;/span&gt;로,
+영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.&lt;/div&gt;</pre>
+
+<p>이 예제에서 {{HTMLElement("div")}}는 텍스트를 가진 블록 레벨 요소입니다. 그 텍스트 안에는 인라인 요소인 {{HTMLElement("span")}}이 존재합니다. <code>&lt;span&gt;</code>은 인라인이기 때문에 전체 문단이 끊기지 않고 하나로 그려집니다. 결과도 확인해보세요.</p>
+
+<p>{{EmbedLiveSample("인라인", 600, 80)}}</p>
+
+<div class="hidden">
+<p>For looks, this CSS (not displayed in standard reading mode) is also used:</p>
+
+<pre class="brush: css">body {
+  margin: 0;
+  padding: 4px;
+  border: 1px solid #333;
+}
+
+.highlight {
+  background-color:#ee3;
+}</pre>
+</div>
+
+<h3 id=".EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8" name=".EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8">블록 레벨</h3>
+
+<p>이제 아까 만든 <code>&lt;span&gt;</code>을 마치 {{htmlelement("p")}}처럼 블록 레벨인 요소로 바꿔보겠습니다.</p>
+
+<pre class="brush: html">&lt;div&gt;다음 p는 &lt;p class="highlight"&gt;블록 레벨 요소&lt;/p&gt;로,
+영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</pre>
+
+<div class="hidden">
+<p>The CSS (not displayed in standard reading mode) is also used:</p>
+
+<pre class="brush: css">body {
+  margin: 0;
+  padding: 4px;
+  border: 1px solid #333;
+}
+
+.highlight {
+  background-color:#ee3;
+}</pre>
+</div>
+
+<p>아까와 같은 CSS를 사용했을 때, 결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("블록_레벨", 600, 150)}}</p>
+
+<p>차이가 보이나요? <code>&lt;p&gt;</code> 요소는 텍스트의 레이아웃을 완전히 바꿔, <code>&lt;p&gt;</code> 이전과 자기 자신의 텍스트, 그리고 <code>&lt;p&gt;</code> 이후의 세 부분으로 나눠버렸습니다.</p>
+
+<h3 id="요소_레벨_변경">요소 레벨 변경</h3>
+
+<p>CSS {{cssxref("display")}} 속성을 사용해 요소의 시각적 표현 레벨을 바꿀 수 있습니다. 예컨대 <code>display</code>의 값을 <code>inline</code>에서 <code>block</code>으로 바꾸면, 브라우저에게 이 인라인 요소를 인라인 박스 대신 블록 박스를 사용해 그리라고 알리는 것입니다. 그러나 이 방법을 사용해도 요소의 카테고리와 콘텐츠 모델은 바뀌지 않습니다. 즉 <code>&lt;span&gt;</code> 요소의 <code>display</code>를 <code>block</code>으로 지정한다 해도, 그 안에 <code>&lt;div&gt;</code>를 넣을 수는 없습니다.</p>
+
+<h2 id="개념적_차이">개념적 차이</h2>
+
+<p>다음은 인라인과 블록 레벨 요소의 간략한 개념적 차이입니다.</p>
+
+<dl>
+ <dt>콘텐츠 모델</dt>
+ <dd>보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록 요소는 포함할 수 없습니다.</dd>
+ <dt>서식</dt>
+ <dd>기본적으로, 인라인 요소는 문서 흐름에서 줄바꿈을 강제하지 않습니다. 반면 블록 요소는 줄바꿈을 유발합니다. (물론 언제나처럼 CSS로 바꿀 수 있습니다)</dd>
+</dl>
+
+<h2 id="요소_목록">요소 목록</h2>
+
+<p>다음은 기본값이 인라인인 요소의 목록입니다. (사실 HTML5는 블록과 인라인 요소를 정의하지 않습니다. <a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a>를 사용하세요)</p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{ HTMLElement("a") }}</dt>
+ <dt>{{ HTMLElement("abbr") }}</dt>
+ <dt>{{ HTMLElement("acronym") }}</dt>
+ <dt>{{ HTMLElement("audio") }} (컨트롤이 보이면)</dt>
+ <dt>{{ HTMLElement("b") }}</dt>
+ <dt>{{ HTMLElement("bdi") }}</dt>
+ <dt>{{ HTMLElement("bdo") }}</dt>
+ <dt>{{ HTMLElement("big") }}</dt>
+ <dt>{{ HTMLElement("br") }}</dt>
+ <dt>{{ HTMLElement("button") }}</dt>
+ <dt>{{ HTMLElement("canvas") }}</dt>
+ <dt>{{ HTMLElement("cite") }}</dt>
+ <dt>{{ HTMLElement("code") }}</dt>
+ <dt>{{ HTMLElement("data") }}</dt>
+ <dt>{{ HTMLElement("datalist") }}</dt>
+ <dt>{{ HTMLElement("del") }}</dt>
+ <dt>{{ HTMLElement("dfn") }}</dt>
+ <dt>{{ HTMLElement("em") }}</dt>
+ <dt>{{ HTMLElement("embed") }}</dt>
+ <dt>{{ HTMLElement("i") }}</dt>
+ <dt>{{ HTMLElement("iframe") }}</dt>
+ <dt>{{ HTMLElement("img") }}</dt>
+ <dt>{{ HTMLElement("input") }}</dt>
+ <dt>{{ HTMLElement("ins") }}</dt>
+ <dt>{{ HTMLElement("kbd") }}</dt>
+ <dt>{{ HTMLElement("label") }}</dt>
+ <dt>{{ HTMLElement("map") }}</dt>
+ <dt>{{ HTMLElement("mark") }}</dt>
+ <dt>{{ HTMLElement("meter") }}</dt>
+ <dt>{{ HTMLElement("noscript") }}</dt>
+ <dt>{{ HTMLElement("object") }}</dt>
+ <dt>{{ HTMLElement("output") }}</dt>
+ <dt>{{ HTMLElement("picture") }}</dt>
+ <dt>{{ HTMLElement("progress") }}</dt>
+ <dt>{{ HTMLElement("q") }}</dt>
+ <dt>{{ HTMLElement("ruby") }}</dt>
+ <dt>{{ HTMLElement("s") }}</dt>
+ <dt>{{ HTMLElement("samp") }}</dt>
+ <dt>{{ HTMLElement("script") }}</dt>
+ <dt>{{ HTMLElement("select") }}</dt>
+ <dt>{{ HTMLElement("slot") }}</dt>
+ <dt>{{ HTMLElement("small") }}</dt>
+ <dt>{{ HTMLElement("span") }}</dt>
+ <dt>{{ HTMLElement("strong") }}</dt>
+ <dt>{{ HTMLElement("sub") }}</dt>
+ <dt>{{ HTMLElement("sup") }}</dt>
+ <dt>{{ HTMLElement("svg") }}</dt>
+ <dt>{{ HTMLElement("template") }}</dt>
+ <dt>{{ HTMLElement("textarea") }}</dt>
+ <dt>{{ HTMLElement("time") }}</dt>
+ <dt>{{ HTMLElement("u") }}</dt>
+ <dt>{{ HTMLElement("tt") }}</dt>
+ <dt>{{ HTMLElement("var") }}</dt>
+ <dt>{{ HTMLElement("video") }}</dt>
+ <dt>{{ HTMLElement("wbr") }}</dt>
+</dl>
+</div>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/HTML/Block-level_elements">블록 레벨 요소</a></li>
+ <li><a href="/ko/docs/Web/HTML/Element">HTML 요소 참고서</a></li>
+ <li>{{cssxref("display")}}</li>
+ <li><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">일반 플로우에서의 블록과 인라인 레이아웃</a></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/ko/docs/Web/HTML/")}}</p>