initial commit

1 files changed, 156 insertions, 0 deletions

diff --git a/files/ko/web/html/element/samp/index.html b/files/ko/web/html/element/samp/index.html
new file mode 100644
index 0000000000..44c10296f9
--- /dev/null
+++ b/files/ko/web/html/element/samp/index.html
@@ -0,0 +1,156 @@
+---
+title: '<samp>: 출력 예시 요소'
+slug: Web/HTML/Element/samp
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/samp
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;samp&gt;</code> 요소</strong>는 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다.</span> 보통 브라우저의 기본 고정폭 글씨체(보통 Courier, Lucida Console)를 사용해 렌더링합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>브라우저가 <code>&lt;samp&gt;</code> 요소에 사용하는 기본 글씨체는 CSS를 사용해 바꿀 수 있습니다. 그러나 브라우저의 사용자 설정값이 모든 CSS보다 우선할 수도 있습니다.</p>
+
+<p>기본 글씨체를 덮어쓸 수 있는 CSS는 다음과 같은 형태입니다.</p>
+
+<pre class="brush: css">samp {
+  font-family: "Courier";
+}</pre>
+
+<div class="note">
+<p><strong>참고:</strong> 웹사이트나 앱의 JavaScript 코드 출력을 담을 컨테이너 요소가 필요하다면 {{HTMLElement("output")}} 요소를 사용해야 합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p>다음 간단한 예제는 문단이 프로그램 출력 예시를 포함하고 있습니다.</p>
+
+<pre class="brush: html">&lt;p&gt;프로세스가 완료되면 유틸리티가 &lt;samp&gt;Scan complete. Found &lt;em&gt;N&lt;/em&gt; results.&lt;/samp&gt;
+를 출력합니다. 출력을 확인한 후 다음 단계로 진행하세요.&lt;/p&gt;</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("기본_예제", 650, 100)}}</p>
+
+<h3 id="사용자_입력을_포함한_출력_예시">사용자 입력을 포함한 출력 예시</h3>
+
+<p><code>&lt;samp&gt;</code> 블록 안에 {{htmlelement("kbd")}} 요소를 중첩해서 사용자가 입력하는 텍스트 예제를 나타낼 수 있습니다. 다음 예제 코드는 Linux 또는 macOS 콘솔 세션의 텍스트 복사본을 나타냅니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;pre&gt;
+&lt;samp&gt;&lt;span class="prompt"&gt;mike@interwebz:~$&lt;/span&gt; &lt;kbd&gt;md5 -s "Hello world"&lt;/kbd&gt;
+MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62
+
+&lt;span class="prompt"&gt;mike@interwebz:~$&lt;/span&gt; &lt;span class="cursor"&gt;█&lt;/span&gt;&lt;/samp&gt;&lt;/pre&gt;</pre>
+
+<p>{{HTMLElement("span")}}을 사용해 셸 프롬프트, 콘솔 커서 등 예제 텍스트의 특정 부분에 다른 스타일을 적용했습니다. 또, <code>&lt;kbd&gt;</code>를 사용해 사용자가 입력한 텍스트를 나타내고 있습니다.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<p>원하는 외형을 얻을 수 있는 CSS는 다음과 같습니다.</p>
+
+<pre class="brush: css">.prompt {
+  color: #b00;
+}
+
+samp &gt; kbd {
+  font-weight: bold;
+}
+
+.cursor {
+  color: #00b;
+}</pre>
+
+<p>프롬프트와 커서에 강렬하지 않은 색을 입히고, 예제 텍스트의 입력 부분을 굵게 하는 단순한 코드입니다.</p>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("사용자_입력을_포함한_출력_예시", 650, 120)}}</p>
+
+<h2 id="명세">명세</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('HTML WHATWG', 'semantics.html#the-samp-element', '&lt;samp&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-samp-element', '&lt;samp&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;samp&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.samp")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>관련 요소: {{HTMLElement("kbd")}}, {{HTMLElement("code")}}, {{HTMLElement("pre")}}</li>
+ <li>스크립트로 생성한 출력을 담는 {{HTMLElement("output")}} 요소</li>
+</ul>