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

인라인 텍스트

span

<p>이 문장에서 <span style="color: red;">빨간색</span> 부분이 강조됩니다.</p>

• 설명: 특정 텍스트에 스타일을 적용.

a

속성	설명
href	링크 대상 URL을 지정합니다.
target	링크 열기 위치를 지정합니다. (예: _blank, _self)
rel	링크와의 관계를 지정합니다. (예: nofollow, noopener)

<a href="https://example.com" target="_blank" rel="noopener">여기를 클릭</a>

• 설명: 새 탭에서 링크 열기.

abbr

속성	설명
title	약어의 전체 설명을 제공합니다. (마우스 오버 시 툴팁으로 표시)

<p><abbr title="HyperText Markup Language">HTML</abbr>은 웹의 기본 언어입니다.</p>

• 설명: 약어에 툴팁으로 전체 설명 제공.

cite

<p>이 문장은 <cite>위대한 개츠비</cite>에서 인용되었습니다.</p>

• 설명: 책 제목을 인용 출처로 표시.

code

<p>다음은 JavaScript 코드입니다: <code>console.log("Hello");</code></p>

• 설명: 코드 조각 표시.

kbd

<p>파일을 저장하려면 <kbd>Ctrl</kbd> + <kbd>S</kbd>를 누르세요.</p>

• 설명: 키보드 입력 표시.

samp

<p>프로그램 출력 예시: <samp>Hello, World!</samp></p>

• 설명: 샘플 출력 표시.

var

<p>수학 공식에서 <var>x</var>는 미지수를 나타냅니다.</p>

• 설명: 변수 표시.

q

속성	설명
cite	인용문의 출처 URL을 지정합니다. (브라우저에 직접 표시되지는 않음)

<p>그는 <q cite="https://example.com">인생은 짧다</q>라고 말했다.</p>

• 설명: 짧은 인용문 표시.

small

<p>이것은 주요 내용입니다. <small>© 2025</small></p>

• 설명: 부수적인 작은 텍스트 표시.

dfn

<p><dfn>HTML</dfn>은 웹 페이지의 구조를 정의하는 언어입니다.</p>

• 설명: 정의되는 용어 표시.

em

<p>이 부분은 <em>정말 중요합니다</em>.</p>

• 설명: 강조된 텍스트 표시.

i

<p>이 단어는 <i>외국어</i>입니다.</p>

• 설명: 기울임꼴로 스타일링.

mark

<p>검색 결과에서 <mark>이 부분</mark>이 강조됩니다.</p>

• 설명: 하이라이트 표시.

strong

<p>이것은 <strong>매우 중요한</strong> 정보입니다.</p>

• 설명: 강한 중요성 표시.

b

<p>이 단어는 <b>굵게</b> 표시됩니다.</p>

• 설명: 굵은 텍스트로 스타일링.

s

<p>이 가격은 <s>1000원</s>에서 800원으로 변경되었습니다.</p>

• 설명: 취소선으로 표시.

u

<p>이 단어는 <u>밑줄</u>이 있습니다.</p>

• 설명: 밑줄로 스타일링.

sub

<p>물의 화학식은 H<sub>2</sub>O입니다.</p>

• 설명: 아래첨자 표시.

sup

<p>2의 제곱은 2<sup>2</sup>입니다.</p>

• 설명: 위첨자 표시.

data

속성	설명
value	기계가 읽을 수 있는 데이터 값을 지정합니다.

<p>제품: <data value="12345">스마트폰</data></p>

• 설명: 기계가 읽을 수 있는 데이터 연결.

time

속성	설명
datetime	기계가 읽을 수 있는 날짜/시간 형식을 지정합니다. (예: 2025-03-06)

<p>다음 회의는 <time datetime="2025-03-06T10:00">3월 6일 오전 10시</time>에 있습니다.</p>

• 설명: 기계가 읽을 수 있는 시간 제공.

br

<p>첫 줄입니다.<br>두 번째 줄입니다.</p>

• 설명: 강제로 줄 바꿈 삽입.

wbr

<p>이것은긴단어입니다: supercalifragilisticexpialidocious<wbr>입니다.</p>

• 설명: 단어 내 줄 바꿈 가능 위치 제안.

---

del

속성	설명
cite	삭제 이유를 설명하는 URL을 지정합니다. (브라우저에 직접 표시되지 않음)
datetime	삭제가 이루어진 날짜와 시간을 지정합니다. (예: 2025-03-06T12:00:00Z)

<p>이 가격은 <del datetime="2025-03-06T10:00:00Z">1000원</del>에서 변경되었습니다.</p>

• 설명: 삭제된 텍스트를 취소선으로 표시하며, 삭제 시점을 기록.

ins

속성	설명
cite	삽입 이유를 설명하는 URL을 지정합니다. (브라우저에 직접 표시되지 않음)
datetime	삽입이 이루어진 날짜와 시간을 지정합니다. (예: 2025-03-06T12:00:00Z)

<p>새 가격은 <ins datetime="2025-03-06T10:00:00Z">800원</ins>입니다.</p>

• 설명: 삽입된 텍스트를 밑줄로 표시하며, 삽입 시점을 기록.

bdi

<p>사용자 이름: <bdi>محمد</bdi>, <bdi>John</bdi></p>

• 설명: 아랍어(오른쪽에서 왼쪽)와 영어(왼쪽에서 오른쪽)가 섞인 텍스트의 방향성을 독립적으로 유지.

bdo

속성	설명
dir	텍스트 방향을 강제로 지정합니다. (ltr: 왼쪽에서 오른쪽, rtl: 오른쪽에서 왼쪽)

<p>이 텍스트는 <bdo dir="rtl">거꾸로</bdo> 표시됩니다.</p>

• 설명: 텍스트 방향을 강제로 오른쪽에서 왼쪽으로 설정.

ruby, rp, rt

<ruby>
  漢<rp>(</rp><rt>kan</rt><rp>)</rp>
  字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

• 설명: "漢字" (한자)에 발음 주석("kan", "ji")을 추가. rp는 루비 미지원 브라우저에서 괄호 표시.