elex/html-examples

Fork 0

Files

Elex 3d30ee3192 2025-01-24T01:44:03

2025-01-24 01:44:03 +09:00

6.7 KiB

Raw Blame History

텍스트 콘텐츠

HTML에서 텍스트 콘텐츠를 표현하고 스타일링하는 데 사용되는 다양한 태그들을 살펴보겠습니다.

h1, h2, h3, h4, h5, h6

웹 페이지의 제목이나 중요한 내용을 강조할 때 사용합니다. <h1>이 가장 큰 제목이고 <h6>이 가장 작은 제목입니다.

<h1>최상위 제목</h1>
<h2>중간 제목</h2>
<h3>하위 제목</h3>

p

문단을 나눌 때 사용합니다. 브라우저는 자동으로 줄 바꿈을 하고 여백을 추가합니다.

<p>이것은 첫 번째 단락입니다. <br>
   두 번째 줄입니다.</p>

줄바꿈 : br, wbr

  : 한 줄을 강제로 바꿀 때 사용합니다. 블록 레벨 요소가 아니므로, 다른 블록 레벨 요소 안에 사용해야 합니다.
 : 단어 중간에 줄 바꿈이 가능한 위치를 지정하는 태그입니다.

<p>첫 번째 줄<br>
   두 번째 줄</p>
<p>이것은매우긴단어입니다<wbr>!</p>

div

div 태그는 블록 레벨 요소로, 항상 새로운 줄에서 시작하여 전체 너비를 차지합니다.

<div class="header">
  <h1>웹 사이트 제목</h1>
  <nav>
    </nav>
</div>

span

span 태그는 인라인 레벨 요소로, 주변 텍스트의 흐름을 방해하지 않고 특정 부분만 스타일을 적용할 수 있습니다.

<p>이 문장에서 <span style="color: blue;">파란색</span> 부분만 색상을 변경했습니다.</p>

hr

구분선을 그을 때 사용합니다. 블록 레벨 요소입니다.

<hr>

인용 : blockquote, q, cite

<blockquote> : 긴 인용문을 표시할 때 사용합니다.
<q> : 다른 출처에서 인용한 짧은 구절을 나타내는 데 사용됩니다.

<blockquote>
  "인생은 짧고 예술은 길다."
</blockquote>

<p>셰익스피어는 <q cite="https://www.example.com">To be, or not to be: that is the question.</q>라고 말했습니다.</p>

<cite>: 인용문의 출처를 표시합니다.

<p>“모든 지식은 경험에서 나온다.”는 <cite>존 로크</cite>의 말입니다.</p>

강조 태그: strong, b, em, i, mark

: 텍스트의 특정 부분을 매우 강조하고 싶을 때 사용합니다.
: 텍스트를 굵게 표현하여 시각적으로 강조하고 싶을 때 사용합니다.
: 텍스트의 특정 부분을 의미적으로 강조하고 싶을 때 사용합니다.
: 텍스트를 기울여 표현하고 싶을 때 사용합니다.
: 텍스트의 특정 부분에 하이라이트를 적용하여 눈에 띄게 하고 싶을 때 사용합니다.

<p>저는 <strong>웹 개발</strong>을 배우고 있습니다. 특히 <strong>HTML</strong>과 <strong>CSS</strong>가 재미있습니다. 
  <i>JavaScript</i>도 배우고 싶은데, 아직 어렵네요. 
  <mark>함께 공부할 사람</mark>을 찾고 있습니다.</p>

strong과 b: 둘 다 텍스트를 굵게 표현하지만, strong은 의미적으로 중요한 부분을 강조하는 데 사용하는 것이 좋습니다.
em과 i: 둘 다 텍스트를 기울여 표현하지만, em은 논리적으로 강조하는 부분에 사용하고, i는 외국어, 기술 용어 등을 표현하는 데 사용하는 것이 일반적입니다.

그 외

<pre>: 텍스트의 들여쓰기, 줄 바꿈 등을 그대로 유지하여 출력합니다. 주로 코드 블록을 표현할 때 사용합니다.
```
<pre><code>
function factorial(n) {
if (n === 0) {
 return 1;
}
return n * factorial(n - 1);
}
</code></pre>
```

<address>: 문서의 저자 또는 연락처 정보를 표시합니다.

<address>
Written by: John Doe<br>
Contact: <a href="mailto:john@example.com">john@example.com</a>
</address>

<abbr>: 약어를 표시하고, 마우스를 올리면 전체 단어를 보여줄 수 있습니다.

<p>HTML은 <abbr title="HyperText Markup Language">HyperText Markup Language</abbr>의 약자입니다.</p>

<code>: 컴퓨터 코드를 표시합니다. 일반적으로 <pre> 태그와 함께 사용하여 코드 블록을 형성합니다.

<del>: 삭제된 텍스트를 표시합니다.

<p>이 문장에서 <del>삭제된 부분</del>은 더 이상 필요하지 않습니다.</p>

<dfn>: 어떤 글이나 문서에서 처음 등장하는 용어를 설명하거나 정의할 때 사용합니다.
```
HTML에서 <dfn>요소</dfn>는 특정 용어를 정의할 때 사용합니다.
```

<ins>: 추가된 텍스트를 표시합니다.

<p>원래 문장은 다음과 같았습니다. <ins>추가된 부분</ins></p>

: 작은 글자로 표시합니다.

<p>본문 내용<small>(저작권 정보)</small></p>

: 아래 첨자를 표시합니다. 주로 화학식이나 수학 공식에서 사용됩니다.
```
물의 화학식은 H2O입니다.
```
: 위 첨자를 표시합니다. 주로 지수 표현이나 단위 표현에서 사용됩니다.
```
10의 3승은 103입니다.
```
<var> : 변수를 나타내는 태그입니다. 주로 수학 공식이나 프로그래밍 코드에서 변수를 표시할 때 사용됩니다.
```
피타고라스의 정리: <var>a</var>² + <var>b</var>² = <var>c</var>²
```
<kbd> : 키보드 입력을 나타내는 태그입니다. 사용자가 직접 입력해야 하는 키를 표시할 때 사용됩니다.
```
파일을 저장하려면 <kbd>Ctrl+S</kbd>를 누르세요.
```
<samp> : 컴퓨터 프로그램의 샘플 출력이나 인용된 출력을 나타내는 태그입니다.
```
프로그램 실행 결과: <samp>Hello, world!</samp>
```
<time> : 특정 시간 또는 기간을 나타내는 태그입니다. 검색 엔진이나 보조 기술이 시간 정보를 더 잘 이해할 수 있도록 돕습니다.
- datetime 속성: 정확한 시간 정보를 ISO 8601 형식으로 표기합니다.
```
<time datetime="YYYY-MM-DDTHH:MM:SS">2023년 12월 31일</time>
```

루비

루비(Ruby) 태그는 주로 동아시아 언어, 특히 일본어에서 한자어의 발음을 표기하는 데 사용되는 HTML 태그입니다.

<ruby>: 루비 주석 전체를 감싸는 요소입니다.
<rb>: 루비 기본 문자(루비를 붙일 문자)를 나타냅니다.
<rt>: 루비 주석(발음)을 나타냅니다.
<rp>: 브라우저가 루비를 지원하지 않을 경우 표시될 괄호를 나타냅니다.

<p>私は<ruby>日本語<rt>にほんご</rt></ruby>が大好きです。</p>

6.7 KiB Raw Blame History