제목(Heading)
HTML은 제목을 표현할 수 있는 다양한 크기의 <h>태그를 제공한다.
가장 큰 <h1>태그부터 가장 작은 <h6>태그까지 다양한 크기로 제목을 표현할 수 있다.
단락(Paragraph)
단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 부른다.
HTML에서는 <p>태그를 이용하여 이러한 단락을 표현한다.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
띄어쓰기와 줄 나누기
HTML 코드에서 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 전혀 영향X
웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문이다.
<br>태그(break line)를 사용하면 새로운 단락을 만들지 않고도 줄을 나눌 수 있다.
<br>태그는 종료 태그가 없는 빈 태그(empty tag)이다.
텍스트(text) 서식 미리 정의하기
HTML 코드에서 작성한 텍스트 서식을 그대로 표현하려면 <pre>태그를 사용해야 한다.
<pre>태그(preformatted text) 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현된다.
<pre>
줄을 나누고 싶어서
이렇게 줄을 나눠봤습니다.
그대로 이렇게 출력이 되요
</pre>
수평 가로 구분선
단락을 나눌 때나 내용상의 구분을 표현하고자 할 때 수평 가로 구분선을 사용한다.
HTML 코드에서는 <hr>태그(horizontal rule)로 간단하게 만들 수 있다.
<p>저는 하나의 단락입니다.</p>
<hr>
<p>저는 하나의 단락입니다.</p>
<hr>
<p>저는 하나의 단락입니다.</p>
서식(Formatting)
HTML은 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)를 제공한다.
-강조 효과
HTML 문서에서 텍스트를 굵게 표현하고 싶을 때 : <b>태그(bold text)나 <strong>태그를 사용.
<p><b>"이 부분"</b>은 단순히 글씨가 굵은 부분!</p>
<p><strong>"이 부분"</strong>은 중요한 부분이라서 굵게 표현!</p>
<b>태그는 단순히 화면의 텍스트를 굵게 표현
<strong>태그는 텍스트를 굵게 표현해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함!
-이탤릭체 표현
<p><i>"이 부분"</i>은 단순히 글씨가 이탤릭체인 부분!</p>
<p><em>"이 부분"</em>은 중요한 부분이라서 이탤릭체로 표현됐어!</p>
<i>태그는 단순히 화면의 텍스트를 이탤릭체로 표현
<em>태그는 텍스트를 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함!
-하이라이팅 효과
<mark>태그는 텍스트에 하이라이팅(highlighting) 효과를 적용시켜 준다.
<p><mark>"이 부분"</mark>만 하이라이팅하고 싶어</p>
-삭제 효과
<del>태그(delete)는 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과를 내준다.
<p><del>"이 부분"</del>을 지운 것처럼 하고 싶어</p>
-삽입 효과
<ins>태그(insert)는 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 내준다.
<p><ins>"밑줄 친 부분"</ins>에 들어갈 알맞은 말을 고르세요.</p>
인용구(Quotation)
HTML에서 인용구를 표현하는 방법은 다음과 같이 두 가지로 나뉜다.
1. 짧은 인용구
2. 블록 인용구
짧은 인용구
짧은 인용구는 <q>태그(quotation)를 사용하여 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표가 붙는다.
<p>HTML의 정의는
<q>웹 페이지를 만들기 위한 하이퍼텍스트 마크업 언어</q>입니다.</p>
블록 인용구
길이가 긴 인용문은 <blockquote>태그(block quatation)를 사용하여 표현할 수 있다.
<blockquote>태그는 이러한 인용 부분을 별도의 단락으로 구분하여 나타낸다.
<p>HTML의 정의</p>
<blockquote>
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다.
</blockquote>
축약형 표현
HTML에서 용어의 축약형을 표현하기 위해서는 <abbr>태그(abbreviation)를 사용한다.
<abbr>태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타난다.
<p><strong><abbr title="HyperText Markup Language 5">HTML5</abbr></strong>
란 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어인 HTML의 최신규격입니다.</p>
주소 표현
<address>태그를 사용하면 HTML에서 주소를 표현할 수 있다.
이러한 주소는 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입된다.
<address>
서울특별시<br>
강남구 테헤란로
</address>
'HTML' 카테고리의 다른 글
HTML 블록과 인라인 (0) | 2020.04.05 |
---|---|
HTML 리스트,테이블 (0) | 2020.04.05 |
HTML 링크 , 이미지 (0) | 2020.04.04 |
HTML 스타일(색,글꼴,배경) (0) | 2020.04.03 |
HTML기초,요소 (0) | 2020.04.03 |