2025-01-24T01:44:03

2025-01-24 01:44:03 +09:00
parent 297ea8abaf
commit 3d30ee3192
68 changed files with 1128 additions and 1079 deletions
--- a/doc/html5/02_텍스트
+++ b/doc/html5/02_텍스트
@@ -0,0 +1,180 @@
+# 텍스트 콘텐츠
+HTML에서 텍스트 콘텐츠를 표현하고 스타일링하는 데 사용되는 다양한 태그들을 살펴보겠습니다.
+
+## h1, h2, h3, h4, h5, h6
+
+웹 페이지의 제목이나 중요한 내용을 강조할 때 사용합니다. `<h1>`이 가장 큰 제목이고 `<h6>`이 가장 작은 제목입니다.
+
+```html
+<h1>최상위 제목</h1>
+<h2>중간 제목</h2>
+<h3>하위 제목</h3>
+```
+
+## p
+
+문단을 나눌 때 사용합니다. 브라우저는 자동으로 줄 바꿈을 하고 여백을 추가합니다.
+
+```html
+<p>이것은 첫 번째 단락입니다. <br>
+   두 번째 줄입니다.</p>
+```
+
+## 줄바꿈 : br, wbr
+
+* `<br>` : 한 줄을 강제로 바꿀 때 사용합니다. 블록 레벨 요소가 아니므로, 다른 블록 레벨 요소 안에 사용해야 합니다.
+* `<wbr>` : 단어 중간에 줄 바꿈이 가능한 위치를 지정하는 태그입니다.
+```html
+<p>첫 번째 줄<br>
+   두 번째 줄</p>
+<p>이것은매우긴단어입니다<wbr>!</p>
+```
+
+## div
+div 태그는 블록 레벨 요소로, 항상 새로운 줄에서 시작하여 전체 너비를 차지합니다.
+```html
+<div class="header">
+  <h1>웹 사이트 제목</h1>
+  <nav>
+    </nav>
+</div>
+```
+
+## span
+span 태그는 인라인 레벨 요소로, 주변 텍스트의 흐름을 방해하지 않고 특정 부분만 스타일을 적용할 수 있습니다.
+```html
+<p>이 문장에서 <span style="color: blue;">파란색</span> 부분만 색상을 변경했습니다.</p>
+```
+
+## hr
+
+구분선을 그을 때 사용합니다. 블록 레벨 요소입니다.
+
+```html
+<hr>
+```
+
+## 인용 : blockquote, q, cite
+
+* `<blockquote>` : 긴 인용문을 표시할 때 사용합니다.
+* `<q>` : 다른 출처에서 인용한 짧은 구절을 나타내는 데 사용됩니다. 
+
+```html
+<blockquote>
+  "인생은 짧고 예술은 길다."
+</blockquote>
+```
+```html
+<p>셰익스피어는 <q cite="https://www.example.com">To be, or not to be: that is the question.</q>라고 말했습니다.</p>
+```
+* `<cite>`: 인용문의 출처를 표시합니다.
+```html
+<p>“모든 지식은 경험에서 나온다.”는 <cite>존 로크</cite>의 말입니다.</p>
+```
+
+## 강조 태그: strong, b, em, i, mark
+
+* `<strong>`: 텍스트의 특정 부분을 매우 강조하고 싶을 때 사용합니다.
+* `<b>`: 텍스트를 굵게 표현하여 시각적으로 강조하고 싶을 때 사용합니다.
+* `<em>`: 텍스트의 특정 부분을 의미적으로 강조하고 싶을 때 사용합니다.
+* `<i>`: 텍스트를 기울여 표현하고 싶을 때 사용합니다.
+* `<mark>`: 텍스트의 특정 부분에 하이라이트를 적용하여 눈에 띄게 하고 싶을 때 사용합니다.
+
+```html
+<p>저는 <strong>웹 개발</strong>을 배우고 있습니다. 특히 <strong>HTML</strong>과 <strong>CSS</strong>가 재미있습니다. 
+  <i>JavaScript</i>도 배우고 싶은데, 아직 어렵네요. 
+  <mark>함께 공부할 사람</mark>을 찾고 있습니다.</p>
+```
+
+* strong과 b: 둘 다 텍스트를 굵게 표현하지만, strong은 의미적으로 중요한 부분을 강조하는 데 사용하는 것이 좋습니다.
+* em과 i: 둘 다 텍스트를 기울여 표현하지만, em은 논리적으로 강조하는 부분에 사용하고, i는 외국어, 기술 용어 등을 표현하는 데 사용하는 것이 일반적입니다.
+
+## 그 외
+
+* `<pre>`: 텍스트의 들여쓰기, 줄 바꿈 등을 그대로 유지하여 출력합니다. 주로 코드 블록을 표현할 때 사용합니다.
+    ```html
+    <pre><code>
+    function factorial(n) {
+    if (n === 0) {
+        return 1;
+    }
+    return n * factorial(n - 1);
+    }
+    </code></pre>
+    ```
+* `<address>`: 문서의 저자 또는 연락처 정보를 표시합니다.
+    ```html
+    <address>
+    Written by: John Doe<br>
+    Contact: <a href="mailto:john@example.com">john@example.com</a>
+    </address>
+    ```
+* `<abbr>`: 약어를 표시하고, 마우스를 올리면 전체 단어를 보여줄 수 있습니다.
+    ```html
+    <p>HTML은 <abbr title="HyperText Markup Language">HyperText Markup Language</abbr>의 약자입니다.</p>
+    ```
+* `<code>`: 컴퓨터 코드를 표시합니다. 일반적으로 `<pre>` 태그와 함께 사용하여 코드 블록을 형성합니다.
+* `<del>`: 삭제된 텍스트를 표시합니다.
+    ```html
+    <p>이 문장에서 <del>삭제된 부분</del>은 더 이상 필요하지 않습니다.</p>
+    ```
+* `<dfn>`: 어떤 글이나 문서에서 처음 등장하는 용어를 설명하거나 정의할 때 사용합니다.
+    ```html
+    <p>HTML에서 <dfn>요소</dfn>는 특정 용어를 정의할 때 사용합니다.</p>
+    ```
+* `<ins>`: 추가된 텍스트를 표시합니다.
+    ```html
+    <p>원래 문장은 다음과 같았습니다. <ins>추가된 부분</ins></p>
+    ```
+* `<small>`: 작은 글자로 표시합니다.
+    ```html
+    <p>본문 내용<small>(저작권 정보)</small></p>
+    ```
+* `<sub>`: 아래 첨자를 표시합니다. 주로 화학식이나 수학 공식에서 사용됩니다.
+    ```html
+    <p>물의 화학식은 H<sub>2</sub>O입니다.</p>
+    ```
+* `<sup>`: 위 첨자를 표시합니다. 주로 지수 표현이나 단위 표현에서 사용됩니다.
+    ```html
+    <p>10의 3승은 10<sup>3</sup>입니다.</p>
+    ```
+* `<var>` : 변수를 나타내는 태그입니다. 주로 수학 공식이나 프로그래밍 코드에서 변수를 표시할 때 사용됩니다.
+    ```html
+    <p>피타고라스의 정리: <var>a</var>² + <var>b</var>² = <var>c</var>²</p>
+    ```
+* `<kbd>` : 키보드 입력을 나타내는 태그입니다. 사용자가 직접 입력해야 하는 키를 표시할 때 사용됩니다.
+    ```html
+    <p>파일을 저장하려면 <kbd>Ctrl+S</kbd>를 누르세요.</p>
+    ```
+* `<samp>` : 컴퓨터 프로그램의 샘플 출력이나 인용된 출력을 나타내는 태그입니다.
+    ```html
+    <p>프로그램 실행 결과: <samp>Hello, world!</samp></p>
+    ```
+* `<time>` : 특정 시간 또는 기간을 나타내는 태그입니다. 검색 엔진이나 보조 기술이 시간 정보를 더 잘 이해할 수 있도록 돕습니다.
+    - datetime 속성: 정확한 시간 정보를 ISO 8601 형식으로 표기합니다.
+    ```html
+    <time datetime="YYYY-MM-DDTHH:MM:SS">2023년 12월 31일</time>
+    ```
+
+## 루비
+루비(Ruby) 태그는 주로 동아시아 언어, 특히 일본어에서 한자어의 발음을 표기하는 데 사용되는 HTML 태그입니다.
+* `<ruby>`: 루비 주석 전체를 감싸는 요소입니다.
+* `<rb>`: 루비 기본 문자(루비를 붙일 문자)를 나타냅니다.
+* `<rt>`: 루비 주석(발음)을 나타냅니다.
+* `<rp>`: 브라우저가 루비를 지원하지 않을 경우 표시될 괄호를 나타냅니다.
+
+```html
+<p>私は<ruby>日本語<rt>にほんご</rt></ruby>が大好きです。</p>
+```
+
+
+
+
+
+
+
+
+
+
+
+