HTML 텍스트 서식 지정

텍스트 서식 지정

This text is bold

This text is italic

This is subscript and superscript

직접 해보기»




HTML 서식 요소

이전 장에서는 HTML 스타일 속성 에 대해 학습했습니다 .

HTML은 특별한 의미로 텍스트를 정의하기위한 특별한 요소 를 정의합니다 .

HTML과 같은 요소 사용 <b>과 <i>같은 출력 서식을 굵게 또는 기울임 꼴 텍스트를.

서식 요소는 특수한 텍스트 유형을 표시하도록 설계되었습니다.

  • <b> - 굵은 텍스트
  • <strong> - 중요 텍스트
  • <i> - 기울임 꼴 텍스트
  • <em> - 강조된 텍스트
  • <mark> - 표시된 텍스트
  • <small> - 작은 텍스트
  • <del> - 삭제 된 텍스트
  • <ins> - 삽입 된 텍스트
  • <sub> - 첨자 텍스트
  • <sup> - 위첨자 텍스트

HTML <b> 및 <strong> 요소

HTML <b>요소는 특별히 중요하지 않고 굵게 표시된 텍스트를 정의합니다 .

<b>This text is bold</b>
직접 해보기»

HTML <strong>요소는 의미가 "강한"중요성이 추가 된 강력한 텍스트를 정의합니다 .

<strong>This text is strong</strong>
직접 해보기»




HTML <i> 및 <em> 요소

HTML <i>요소는 아무 중요성없이 기울임 꼴 텍스트를 정의합니다 .

<i>This text is italic</i>
직접 해보기»

HTML <em>요소는 강조된 텍스트를 의미 론적 중요성을 추가하여 정의합니다 .

<em>This text is emphasized</em>
직접 해보기»

참고 : 브라우저 <strong>는 <b>, 및 <em>로 표시 됩니다 <i>그러나, 이러한 태그의 의미의 차이는 다음 <b>과 <i>굵은 이탤릭체 텍스트를 정의하지만, <strong>및 <em>텍스트가 "중요"을 의미합니다.


HTML <small> 요소

HTML <small>요소는 더 작은 텍스트를 정의 합니다.

<h2>HTML <small>Small</small> Formatting</h2>
직접 해보기»

HTML <mark> 요소

HTML <mark>요소는두드러진 또는 강조 표시된 본문:

<h2>HTML <mark>Marked</mark> Formatting</h2>
직접 해보기»

HTML <del> 요소

HTML <del>요소는삭제 된 (삭제 된) 텍스트.

<p>My favorite color is <del>blue</del> red.</p>
직접 해보기»

HTML <ins> 요소

HTML <ins>요소는삽입 된 (추가 된) 텍스트.

<p>My favorite <ins>color</ins> is red.</p>
직접 해보기»

HTML <sub> 요소

HTML <sub>요소는 아래 첨자 텍스트를 정의 합니다.

<p>This is <sub>subscripted</sub> text.</p>
직접 해보기»

HTML <sup> 요소

HTML <sup>요소는 위 첨자 텍스트를 정의 합니다.

<p>This is <sup>superscripted</sup> text.</p>
직접 해보기»






HTML 텍스트 서식 요소

TagDescription
<b>

Defines bold text  

<em>

Defines emphasized text 
<i>Defines italic text
<small>Defines smaller text
<strong>Defines important text
<sub>Defines subscripted text
<sup>Defines superscripted text
<ins>Defines inserted text
<del>Defines deleted text
<mark>

Defines marked/highlighted text


'언어 > HTML' 카테고리의 다른 글

HTML 주석  (0) 2018.12.18
HTML 인용문 및 인용문 요소  (0) 2018.12.18
HTML 스타일  (0) 2018.12.18
HTML 단락  (0) 2018.12.18
HTML 제목  (0) 2018.12.17

HTML 스타일

나는 빨강이다.

나는 푸른 색이다.

나는 빅이야.

직접 해보기»

HTML 스타일 속성

HTML 요소의 스타일 설정은 style속성을 사용하여 수행 할 수 있습니다 .

HTML style속성의 구문 은 다음  같습니다.

<tagname style="property:value;">

이 속성 은 CSS 속성입니다. 값은 CSS의 값입니다.





HTML 배경색

이 background-color속성은 HTML 요소의 배경색을 정의합니다.

이 예제에서는 페이지의 배경색을 powderblue로 설정합니다.

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
직접 해보기»




HTML 텍스트 색상

이 color속성은 HTML 요소의 텍스트 색상을 정의합니다.

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
직접 해보기»



HTML 글꼴

이 font-family속성은 HTML 요소에 사용할 글꼴을 정의합니다.

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
직접 해보기»





HTML 텍스트 크기

이 font-size속성은 HTML 요소의 텍스트 크기를 정의합니다.

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
직접 해보기»




HTML 텍스트 정렬

이 text-align속성은 HTML 요소의 가로 텍스트 정렬을 정의합니다.

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
직접 해보기»



테스트해보기




단원 요약

  • styleHTML 요소 스타일 지정에 속성 사용
  • 사용하여 background-color배경 색상
  • 사용하여 color텍스트 색상을
  • 사용하여 font-family텍스트 글꼴
  • 사용하여 font-size텍스트 크기에
  • 사용하여 text-align텍스트 정렬


'언어 > HTML' 카테고리의 다른 글

HTML 인용문 및 인용문 요소  (0) 2018.12.18
HTML FORMATING 텍스트 서식지정  (0) 2018.12.18
HTML 단락  (0) 2018.12.18
HTML 제목  (0) 2018.12.17
HTML 속성  (0) 2018.12.17

HTML 단락

HTML <p>요소는 단락을 정의합니다 .

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
직접 해보기»
참고 : 브라우저는 단락 앞뒤에 공백을 자동으로 추가합니다 (여백).



HTML 표시

HTML이 어떻게 표시 될지 확신 할 수 없습니다.

크고 작은 화면과 크기가 조정 된 창은 다른 결과를 만듭니다.

HTML을 사용하면 HTML 코드에 여분의 공백이나 추가 행을 추가하여 출력을 변경할 수 없습니다.

페이지가 표시 될 때 브라우저는 여분의 공백과 여분의 행을 제거합니다.

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>




끝 태그를 잊지 마라.

대부분의 브라우저는 종료 태그를 잊어 버린 경우에도 HTML을 올바르게 표시합니다.

<p>This is a paragraph.
<p>This is another paragraph.
직접 해보기»

위의 예제는 대부분의 브라우저에서 작동하지만, 의존하지는 않습니다.

참고 : 종료 태그를 삭제하면 예기치 않은 결과 또는 오류가 발생할 수 있습니다.




HTML 줄 바꿈

HTML <br>요소는 줄 바꿈을 정의합니다 .

<br>새 단락을 시작하지 않고 줄 바꿈 (새 줄)을 사용하려면 다음을 사용하십시오 .

<p>This is<br>a paragraph<br>with line breaks.</p>
직접 해보기»



시 문제

이시는 한 줄에 표시됩니다 :

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>
직접 해보기»



HTML <pre> 요소

HTML <pre>요소는 서식이 미리 지정된 텍스트를 정의합니다.

<pre>요소 내부의 텍스트 는 고정 너비 글꼴 (일반적으로 Courier)로 표시되며 공백과 줄 바꿈을 모두 유지합니다.

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>
직접 해보기»



Test Yourself with Exercises!





HTML 태그 참조

W3Schools 태그 참조에는 HTML 요소 및 해당 속성에 대한 추가 정보가 들어 있습니다.

TagDescription
<p>Defines a paragraph
<br>Inserts a single line break
<pre>Defines pre-formatted text







'언어 > HTML' 카테고리의 다른 글

HTML FORMATING 텍스트 서식지정  (0) 2018.12.18
HTML 스타일  (0) 2018.12.18
HTML 제목  (0) 2018.12.17
HTML 속성  (0) 2018.12.17
HTML 요소  (0) 2018.12.17

+ Recent posts