코드 표시, 인용구, 리스트와 관련된 태그

이 글은 코드 표시, 인용구, 리스트와 관련된 태그를 설명합니다.

이것은 HTML에서 소스 코드, 인용문, 주석 및 목록을 작성하는 방법을 설명합니다.

YouTube Video

코드 표시 관련 태그

<code> 태그

1Inline code example: <code>let x = 10;</code>

• <code> 태그는 HTML 문서 내의 코드 또는 프로그램 조각을 나타내기 위해 사용되는 인라인 요소입니다.
• 기본적으로 단일 간격 글꼴로 표시되어 코드의 가독성을 높입니다.

<pre> 태그

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• <pre> 태그는 HTML 문서 내에서 텍스트를 원본 형식 그대로 표시하는 데 사용됩니다. 이 태그를 사용하면 공백 및 줄 바꿈이 보존되어 원래 형식이 유지됩니다. 주로 프로그램 코드, 시, 텍스트 아트와 같이 형식을 유지해야 하는 콘텐츠를 표시하는 데 사용됩니다.

    function hello() {
        console.log("Hello, world!");
    }
    

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• <pre> 태그에서는 공백이 보존되므로, 닫는 태그 앞에 공백이 있으면 이 예시와 같이 끝에 빈 줄이 나타납니다.

<samp> 태그

1Sample system output: <samp>Error: Invalid input.</samp>

• <samp> 태그는 컴퓨터 프로그램의 출력을 나타내기 위해 사용되는 HTML 태그입니다. 프로그램이나 시스템으로부터의 출력이나 메시지를 나타내는 데 사용됩니다.

<kbd> 태그

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• <kbd> 태그는 사용자 입력을 나타내기 위해 사용되는 HTML 태그입니다. 단축키와 같은 키보드 입력 또는 명령 입력을 나타내기 위해 사용됩니다.

<var> 태그

1Variable example: <var>x</var> = 5;

• <var> 태그는 프로그램 또는 수식의 변수를 나타내는 데 사용됩니다. 수학적 공식에서 변수 이름이나 변수를 강조하는 데 사용됩니다.

인용 등에 사용되는 태그

<blockquote> 태그

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• <blockquote> 태그는 길고 긴 인용문이나 다른 출처의 텍스트를 나타내기 위해 사용되며, 일반적으로 블록 수준에서 표시됩니다.

<q> 태그

1This is a short quote: <q>Short quote example.</q>

• <q> 태그는 짧은 인용문을 나타내기 위해 사용되는 인라인 요소입니다. 이 태그는 텍스트의 일부 또는 문장을 인용문으로 표시하는 데 사용할 수 있습니다. <q> 태그로 둘러싸인 텍스트는 일반적으로 큰따옴표로 표시됩니다. <q> 태그는 중첩될 수 있습니다. 이 경우, 내부 인용에는 일반적으로 다른 종류의 따옴표가 사용됩니다.

<cite> 태그

1Reference to a book: <cite>The Great Gatsby</cite>

• <cite> 태그는 인용 또는 참고 자료의 출처를 나타내는 인라인 요소입니다. 주로 작품 제목, 기사, 논문, 웹 페이지 또는 책과 같은 작업의 출처를 나타내는 데 사용됩니다.

<address> 태그

1<address>123 Main Street, Springfield, USA</address>

• <address> 태그는 문서나 섹션의 저자 또는 소유자와 관련된 연락처 정보를 나타내는 데 사용됩니다. 이 태그에는 일반적으로 이메일 주소, 전화번호, 물리적 주소 및 유사한 정보가 포함됩니다.

<time> 태그

1<time datetime="2024-12-04">December 4, 2024</time>

• <time> 태그는 특정 시점, 기간, 또는 반복되는 시간을 나타내기 위해 사용됩니다. 이 태그는 문서에 의미를 부여하기 위해 날짜 및 시간을 포함할 수 있습니다.

<data> 태그

1<data value="2024">Current Year</data>

• <data> 태그는 사람이 읽기 쉬운 콘텐츠를 기계가 해석할 수 있는 값과 연결하기 위해 사용됩니다. 이 태그는 프로그램이 쉽게 처리할 수 있도록 데이터를 마크업할 때 유용합니다.

<details> 및 <summary> 태그

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• 태그는 접었다 펼칠 수 있는 위젯을 만듭니다.

  태그와 함께 사용하면 클릭 가능한 섹션을 만들어 추가적인 세부 정보를 표시할 수 있으며, 주로 '더 보기'와 같은 인터랙티브 디스플레이에 사용됩니다.

목록 표시를 위한 태그

<ul> 태그

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• 이것은 순서가 없는 목록을 생성하는 데 사용되는 태그입니다. 목록의 각 항목은 <li> 태그로 정의됩니다. 기본적으로, 각 목록 항목 앞에 검은 점이 표시됩니다.

<ol> 태그

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• 이 태그는 정렬된 목록을 생성하는 데 사용됩니다. 목록의 각 항목은 <li> 태그로 정의됩니다. 기본적으로 항목의 순서를 나타내기 위해 숫자가 표시됩니다.

<dl> 태그

1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>

• 이 태그는 용어와 정의, 또는 이름과 세부 정보로 구성된 쌍 목록을 생성하는 데 사용됩니다. 목록 항목은 <dt>와 <dd> 태그로 정의됩니다. 용어나 이름은 <dt> 태그에 작성되고, 정의나 설명은 <dd> 태그에 작성됩니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video