HTML-101 #5. 텍스트 서식, 인용문 및 코드 포맷팅

Source: Dev.to

위의 링크에 있는 전체 텍스트를 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. 현재는 외부 페이지의 내용을 직접 가져올 수 없으니, 번역이 필요한 본문을 복사해서 알려 주세요.

👋 짧은 소개 (왜 이 글을 쓰는가)

저는 현재 HTML을 배우고 있으며, 공개 학습을 통해 제 여정을 기록하기로 했습니다.

이 블로그는 HTML‑101 시리즈의 일부로, 처음부터 차근차근 HTML을 배우고 있습니다.

이 시리즈는 전문가가 쓴 것이 아니라 — 초보자가 큰소리로 배우는 과정이며, 다음을 공유합니다:

• 제가 이해한 내용,
• 저를 혼란스럽게 하는 점,
• 그리고 진행하면서 배우는 것들.

목표는 일관성과 명확성을 키우고, 토론을 유도하는 것입니다.

📌 이 블로그에서 다루는 내용

이 포스트에서는 다음을 다룹니다:

• HTML의 텍스트‑포맷팅 태그
• 의미론적 vs. 비의미론적 포맷팅 (<strong> vs. <b>, <em> vs. <i>)
• 밑줄, 강조 표시, 작은 텍스트, 삭제된 텍스트
• 위첨자와 아래첨자 사용법
• <blockquote>와 <q>를 사용한 인용
• <code>와 <pre>를 사용한 코드 포맷팅

📂 GitHub 저장소

내 모든 노트, 예제, 그리고 연습 코드는 여기에서 확인할 수 있습니다:

[GitHub repo link]

저는 계속 학습하면서 저장소를 업데이트합니다.

📚 학습 노트

1. HTML 텍스트‑포맷팅 태그

<strong>

• 목적: 의미적으로 중요성을 나타냅니다; 브라우저는 굵게 표시합니다.
• 구문: <strong>Warning</strong>
• 사용 시점: 텍스트가 단순히 굵게 보이기 위한 것이 아니라 중요할 때.

<em>

• 목적: 강조 또는 스트레스를 나타냅니다; 스크린리더가 어조를 바꿉니다. 이탤릭체로 표시됩니다.
• 구문: I <em>really</em> sorry
• 사용 시점: 단순히 이탤릭체가 아니라 강조를 전달하고 싶을 때.

<b>

• 목적: 의미 없이 시각적으로 굵게 표시합니다.
• 구문: <b>Hi There!</b>
• 사용 시점: 중요성을 부여하지 않고 굵은 스타일이 필요할 때.

<i>

• 목적: 의미 없이 시각적으로 이탤릭체로 표시합니다.
• 구문: <i>Hi There!</i>
• 사용 시점: 강조가 아니라 이탤릭 스타일이 필요할 때.

<u>

• 목적: 텍스트에 밑줄을 긋습니다.
• 구문: <u>This is underlined</u>
• 사용 시점: 주석, 철자 오류 표시, 혹은 스타일 목적(중요성을 나타내지 않음)일 때.

<mark>

• 목적: 텍스트를 노란 배경으로 강조합니다.
• 구문: <mark>This is a highlighted word</mark>
• 사용 시점: 관련 있거나 검색 결과와 같이 주목을 끌고 싶을 때.

<small>

• 목적: 글자 크기를 작게 합니다.
• 구문: <small>Terms and conditions apply</small>
• 사용 시점: 면책 조항, 법적 고지, 혹은 작은 글씨가 필요한 경우.

<del>

• 목적: 취소선(삭제) 텍스트를 표시합니다.
• 구문: <del>$50</del> <ins>$30</ins>
• 사용 시점: 삭제/구식 콘텐츠, 가격 인하, 버전 변경, 수정 등을 나타낼 때.

<sup> / <sub>

• 위첨자: <sup>는 텍스트를 위로 올립니다. 예: x<sup>2</sup> (지수).
• 아래첨자: <sub>는 텍스트를 아래로 내립니다. 예: H<sub>2</sub>O (화학식).

<abbr>

• 목적: 약어를 표시하고 title 속성을 통해 전체 형태를 제공합니다.
• 구문: <abbr title="HyperText Markup Language">HTML</abbr>
• 사용 시점: 접근성을 높이고 마우스 오버 시 의미를 보여줄 때.

2. HTML에서 인용

<blockquote>

• 목적: 길고 인용된 구절이나 인용 블록을 별도로 표시합니다. 기본적으로 블록 형태이며 들여쓰기되고 새 줄에서 시작합니다.
• 구문:

<blockquote>
  This is a long quoted section from another source.
</blockquote>

• 선택적 cite 속성:

<blockquote cite="source-url">
  The future belongs to those who believe in the beauty of their dreams.
  — Eleanor Roosevelt
</blockquote>

• 사용 시점: 다른 출처의 긴 텍스트를 인용할 때.

<cite>

• 목적: 인용문이나 창작물의 출처를 표시합니다.
• 구문: <cite>— Eleanor Roosevelt</cite>
• 사용 시점: 인용문, 책, 기사, 저자 등을 명시할 때.

<q>

• 목적: 짧은 인용문을 인라인으로 표시합니다; 브라우저가 자동으로 따옴표를 추가합니다.
• 구문:

<p>He said, <q>HTML is easy to learn</q> and smiled.</p>

• 사용 시점: 문장 안에 포함되는 짧은 인용문으로, 텍스트 흐름을 깨뜨리지 않을 때.

주요 차이점

3. 코드 포맷팅 태그

<code>

• 목적: 주변 텍스트와 함께 인라인으로 짧은 코드 조각을 나타냅니다.
• 구문:

Use the <code>console.log()</code> function to output messages to the console.

Source: …

디버깅을 위해.

• 사용 시점: 문단 안에 짧은 명령어, 파일 이름, 변수 이름 등과 같이 나타나는 경우.

<code>

• 목적: 인라인 코드나 짧은 스니펫을 표시합니다.
• 구문: 백틱()으로 텍스트를 감싸거나 ` 태그를 사용합니다.
• 사용 시점: 문단 안에 짧은 명령어, 파일 이름, 변수 이름 등과 같이 나타나는 경우.

<pre>
function greet(){
  console.log("Hello World");
}
</pre>

<pre><code>
function add(a, b) {
  return a + b;
}
</code></pre>

, , ,  as they are. -->

So that was something new I learned while going through this topic.

If you faced any issues or have any questions, do let me know in the comments 🙂