thinkNote

■ 요약

▶ <kbd> 요소는 키보드 입력을 정의한다.

▶ <samp> 요소는 컴퓨터 프로그램의 샘플 출력을 정의한다.

▶ <code> 요소는 컴퓨터 코드 조각을 정의한다.

▶ <var> 요소는 프로그래밍 또는 수학 표현식에서 변수을 정의한다.

▶ <pre> 요소는 미리 서식이 지정된 텍스트를 정의한다.

▶ HTML은 사용자 입력 및 컴퓨터 코드를 정의하기 위한 여러 요소가 포함되어 있다.

<code>
x = 5;
y = 6;
z = x + y;
</code>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_intro3 

■ HTML 키워드 입력을 위한 <kdb> 

▶ HTML <kbd> 요소는 키보드 입력을 정의하는 데 사용된다.

▶ 내부 콘텐츠는 Browser의 기본 모노스페이스 글꼴로 표시된다.

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_kbd 

■ HTML 프로그램 출력을 위한 <samp> 

▶ HTML <samp> 요소는 컴퓨터 프로그램의 샘플 출력을 정의하는 데 사용된다.

▶ 내부 콘텐츠는 Browser의 기본 모노스페이스 글꼴로 표시된다.

<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_samp 

■ HTML 컴퓨터 코드를 위한 <code>

▶ HTML <code> 요소는 컴퓨터 코드 조각을 정의하는데 사용된다.

▶ 내부 콘텐츠는 Browser의 기본 모노스페이스 글꼴로 표시된다.

<code>
x = 5;
y = 6;
z = x + y;
</code>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_code 

▶ <code> 요소는 추가 공백과 줄 바꿈을 유지하지 않는다.

▶ 위 문제를 해결하려면 <code> 요소 안에 <pre> 요소를 넣을 수 있다.

<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_codepre 

■ HTML 변수를 위한 <var>

▶ HTML <var> 요소는 프로그래밍 또는 수학적 표현에서 변수를 정의하는 데 사용된다.

▶ 내부 콘텐츠는 일반적으로 기울임 글꼴로 표시된다.

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_var 

출처 : https://www.w3schools.com/html/html_computercode_elements.asp

▶ 단락은 항상 새 줄에서 시작하며, 보통 텍스트 블록이다.

■ HTML 단락

▶ HTML <p> 요소는 단락을 정의한다.

▶ 단락은 항상 새 줄에서 시작하며, Browser는 앞뒤로 공백을 자동으로 추가한다

<p> 이것은 단락입니다. </p>

■ HTML 표시

▶ 크거나 작은 화면이나 크기가 조정된 창은 다른 결과를 만들기 때문에, HTML이 어떻게 표시되는지 확신할 수 없다.

▶ HTML을 사용하면 HTML 코드에 여분의 공백이나 줄을 추가하여 표시를 변경할 수 없는데,

▶ Browser는 페이지가 표시될 때 여분의 공백이나 줄을 자동으로 제거한다.

<p>
공백을 포함한
단락입니다.
한번 따라해
보세요
</p>

<p>
공백을 포함한
단락                  입니다.
한번 따라해
보세요
</p>

<p>
공백을 포함한 단락입니다. 한번 따라해보세요
</p>

■ HTML 수평 규칙

▶ <hr> 태그는 HTML 페이지의 주제별 구분(a thematic break) 을 정의한다.

▶ <hr> 요소는 HTML 페이지의 내용을 구분하는데 사용된다.

<h1> 1번 제목 </h1>
<p> 1번 단락 </p>
<hr>
<h2> 2번 제목 </h2>
<p> 2번 단락 </p>
<hr>

▶ <hr> 태그는 공백태그이다. 

■ HTML 개행(줄바꿈)

▶ HTML <br> 요소는 줄바꿈을 정의한다.

▶ 새 단락을 시작하지 않고, 줄바꿈을 하고 싶다면 <br>를 사용한다.

<p> 1번 단락 <br> 2번 단락 </p>

▶ <br> 태그는 공백태그이다.

■ 시(문학) 문제

▶ 이 시(문학)는 한 줄에 표시된다.

<p> 윤동주 - 별 헤는 밤 </p>

<p>
...

별 하나에 추억과

별 하나에 사랑과

별 하나에 쓸쓸함과

...
</p>

■ 해결책 - HTML <pre> 요소

▶ HTML <pre> 요소는 서식이 정해진 텍스트를 정의한다.

▶ <pre> 요소 안에 텍스트는 고정된 너비 글골로 표시되며, 공백과 줄바꿈을 유지한다.

<p> 윤동주 - 별 헤는 밤 </p>

<pre>
...

별 하나에 추억과

별 하나에 사랑과

별 하나에 쓸쓸함과

...
</pre>

출처 : https://www.w3schools.com/html/html_paragraphs.asp