2025-03-07T20:29:01

doc/html5/56_인라인 텍스트.md

@@ -0,0 +1,218 @@
+# 인라인 텍스트
+
+## span
+```html
+<p>이 문장에서 <span style="color: red;">빨간색</span> 부분이 강조됩니다.</p>
+```
+- 설명: 특정 텍스트에 스타일을 적용.
+
+## a
+| **속성** | **설명** |
+|---|----|
+| `href` | 링크 대상 URL을 지정합니다. |
+| `target` | 링크 열기 위치를 지정합니다. (예: `_blank`, `_self`) |
+| `rel` | 링크와의 관계를 지정합니다. (예: `nofollow`, `noopener`) |
+
+```html
+<a href="https://example.com" target="_blank" rel="noopener">여기를 클릭</a>
+```
+- 설명: 새 탭에서 링크 열기.
+
+## abbr
+| **속성** | **설명** |
+|----|---|
+| `title` | 약어의 전체 설명을 제공합니다. (마우스 오버 시 툴팁으로 표시) |
+
+```html
+<p><abbr title="HyperText Markup Language">HTML</abbr>은 웹의 기본 언어입니다.</p>
+```
+- 설명: 약어에 툴팁으로 전체 설명 제공.
+
+## cite
+```html
+<p>이 문장은 <cite>위대한 개츠비</cite>에서 인용되었습니다.</p>
+```
+- 설명: 책 제목을 인용 출처로 표시.
+
+## code
+```html
+<p>다음은 JavaScript 코드입니다: <code>console.log("Hello");</code></p>
+```
+- 설명: 코드 조각 표시.
+
+## kbd
+```html
+<p>파일을 저장하려면 <kbd>Ctrl</kbd> + <kbd>S</kbd>를 누르세요.</p>
+```
+- 설명: 키보드 입력 표시.
+
+## samp
+```html
+<p>프로그램 출력 예시: <samp>Hello, World!</samp></p>
+```
+- 설명: 샘플 출력 표시.
+
+## var
+```html
+<p>수학 공식에서 <var>x</var>는 미지수를 나타냅니다.</p>
+```
+- 설명: 변수 표시.
+
+## q
+| **속성** | **설명** |
+|----|---|
+| `cite` | 인용문의 출처 URL을 지정합니다. (브라우저에 직접 표시되지는 않음) |
+
+```html
+<p>그는 <q cite="https://example.com">인생은 짧다</q>라고 말했다.</p>
+```
+- 설명: 짧은 인용문 표시.
+
+## small
+```html
+<p>이것은 주요 내용입니다. <small>© 2025</small></p>
+```
+- 설명: 부수적인 작은 텍스트 표시.
+
+## dfn
+```html
+<p><dfn>HTML</dfn>은 웹 페이지의 구조를 정의하는 언어입니다.</p>
+```
+- 설명: 정의되는 용어 표시.
+
+## em
+```html
+<p>이 부분은 <em>정말 중요합니다</em>.</p>
+```
+- 설명: 강조된 텍스트 표시.
+
+## i
+```html
+<p>이 단어는 <i>외국어</i>입니다.</p>
+```
+- 설명: 기울임꼴로 스타일링.
+
+## mark
+```html
+<p>검색 결과에서 <mark>이 부분</mark>이 강조됩니다.</p>
+```
+- 설명: 하이라이트 표시.
+
+## strong
+```html
+<p>이것은 <strong>매우 중요한</strong> 정보입니다.</p>
+```
+- 설명: 강한 중요성 표시.
+
+## b
+```html
+<p>이 단어는 <b>굵게</b> 표시됩니다.</p>
+```
+- 설명: 굵은 텍스트로 스타일링.
+
+## s
+```html
+<p>이 가격은 <s>1000원</s>에서 800원으로 변경되었습니다.</p>
+```
+- 설명: 취소선으로 표시.
+
+## u
+```html
+<p>이 단어는 <u>밑줄</u>이 있습니다.</p>
+```
+- 설명: 밑줄로 스타일링.
+
+## sub
+```html
+<p>물의 화학식은 H<sub>2</sub>O입니다.</p>
+```
+- 설명: 아래첨자 표시.
+
+## sup
+```html
+<p>2의 제곱은 2<sup>2</sup>입니다.</p>
+```
+- 설명: 위첨자 표시.
+
+## data
+| **속성** | **설명** |
+|---|----|
+| `value` | 기계가 읽을 수 있는 데이터 값을 지정합니다. |
+
+```html
+<p>제품: <data value="12345">스마트폰</data></p>
+```
+- 설명: 기계가 읽을 수 있는 데이터 연결.
+
+## time
+| **속성** | **설명** |
+|---|----|
+| `datetime` | 기계가 읽을 수 있는 날짜/시간 형식을 지정합니다. (예: `2025-03-06`) |
+
+```html
+<p>다음 회의는 <time datetime="2025-03-06T10:00">3월 6일 오전 10시</time>에 있습니다.</p>
+```
+- 설명: 기계가 읽을 수 있는 시간 제공.
+
+## br
+```html
+<p>첫 줄입니다.<br>두 번째 줄입니다.</p>
+```
+- 설명: 강제로 줄 바꿈 삽입.
+
+## wbr
+```html
+<p>이것은긴단어입니다: supercalifragilisticexpialidocious<wbr>입니다.</p>
+```
+- 설명: 단어 내 줄 바꿈 가능 위치 제안.
+
+---
+
+
+## del
+| **속성** | **설명** |
+|---|----|
+| `cite` | 삭제 이유를 설명하는 URL을 지정합니다. (브라우저에 직접 표시되지 않음) |
+| `datetime` | 삭제가 이루어진 날짜와 시간을 지정합니다. (예: `2025-03-06T12:00:00Z`) |
+
+```html
+<p>이 가격은 <del datetime="2025-03-06T10:00:00Z">1000원</del>에서 변경되었습니다.</p>
+```
+- 설명: 삭제된 텍스트를 취소선으로 표시하며, 삭제 시점을 기록.
+
+## ins
+| **속성** | **설명** |
+|---|----|
+| `cite` | 삽입 이유를 설명하는 URL을 지정합니다. (브라우저에 직접 표시되지 않음) |
+| `datetime` | 삽입이 이루어진 날짜와 시간을 지정합니다. (예: `2025-03-06T12:00:00Z`) |
+
+```html
+<p>새 가격은 <ins datetime="2025-03-06T10:00:00Z">800원</ins>입니다.</p>
+```
+- 설명: 삽입된 텍스트를 밑줄로 표시하며, 삽입 시점을 기록.
+
+## bdi
+```html
+<p>사용자 이름: <bdi>محمد</bdi>, <bdi>John</bdi></p>
+```
+- 설명: 아랍어(오른쪽에서 왼쪽)와 영어(왼쪽에서 오른쪽)가 섞인 텍스트의 방향성을 독립적으로 유지.
+
+
+## bdo
+| **속성** | **설명** |
+|---|----|
+| `dir` | 텍스트 방향을 강제로 지정합니다. (`ltr`: 왼쪽에서 오른쪽, `rtl`: 오른쪽에서 왼쪽) |
+
+```html
+<p>이 텍스트는 <bdo dir="rtl">거꾸로</bdo> 표시됩니다.</p>
+```
+- 설명: 텍스트 방향을 강제로 오른쪽에서 왼쪽으로 설정.
+
+## ruby, rp, rt
+```html
+<ruby>
+  漢<rp>(</rp><rt>kan</rt><rp>)</rp>
+  字<rp>(</rp><rt>ji</rt><rp>)</rp>
+</ruby>
+```
+- 설명: "漢字" (한자)에 발음 주석("kan", "ji")을 추가. `rp`는 루비 미지원 브라우저에서 괄호 표시.