제목 표시하기
뉴스 기사나 블로그 글 등 인터넷에 게시된 여러 종류의 글에는 대부분 제목이 표시되어 있습니다. 제목은 해당 글의 정체성을 드러내는 중요한 요소입니다. HTML로 제목을 표시할 때는 알파벳 h로 시작되는 <hx> 태그를 사용하는데, 이 태그를 사용하면 텍스트가 일반적인 텍스트보다 두껍게 표시됩니다.
태그 입력 시 h의 뒤에는 1부터 6까지의 숫자 중 하나를 입력해야 합니다. 여기에서 숫자는 제목 텍스트의 상대적인 크기를 나타내는 것으로, 텍스트는 숫자가 1일 때 가장 크고 6일 때 가장 작습니다. 다음은 <h1> 부터 <h6> 까지의 크기를 비교한 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>제목 태그별 크기 비교</title>
</head>
<body>
<h1>숫자가 1일 때의 제목 텍스트</h1>
<h2>숫자가 2일 때의 제목 텍스트</h2>
<h3>숫자가 3일 때의 제목 텍스트</h3>
<h4>숫자가 4일 때의 제목 텍스트</h4>
<h5>숫자가 5일 때의 제목 텍스트</h5>
<h6>숫자가 6일 때의 제목 텍스트</h6>
</body>
</html>
문단 표시하기
문단(단락)이란 글을 내용상 끊어서 구분한 하나하나의 토막을 뜻하는데, 이를 표시할 때는 주로 <p> 태그를 사용합니다. 하나의 <p> 태그는 하나의 문단을 표시하고, 문단 요소는 다른 요소와의 간격을 위해 일정한 여백을 가지게 됩니다. <p> 태그는 글의 본문을 표시할 때 주로 사용하므로 텍스트 태그 중 가장 많이 사용되는 태그입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력해주세요</title>
</head>
<body>
<p>p 태그는 문단을 나타낼 때 사용하는 태그입니다.</p>
<p>하나의 문단에는 일정한 여백이 형성되어 화면 상에서 구분하기가 용이합니다.</p>
</body>
</html>
인용구 표시하기
<p> 태그와는 다르게 특별한 스타일이 가미된 문단을 표시하는 태그도 존재합니다. <blockquote> 태그는 태그 안쪽의 텍스트가 인용구임을 나타내는데, <blockquote> 태그로 표시한 텍스트는 일반적인 텍스트보다 안쪽으로 들여 써집니다. 또한 <blockquote> 태그에는 선택적으로 cite라는 속성을 추가할 수 있습니다. cite 속성은 해당 인용구의 출처를 입력하는 속성으로, 여기에는 주로 문구를 인용해 온 웹페이지의 주소를 입력합니다.
아래 코드는 일반적인 텍스트를 표시하는 <p> 태그와 <blockquote> 태그를 비교하기 위해 작성한 코드입니다.
이제부터는 간헐적으로 문서 기본 구조를 생략하고 코드의 주요 부분만을 표시하겠습니다.
<body>
<p>p 태그는 문단을 나타낼 때 사용하는 태그입니다.</p>
<blockquote cite="https://codefactoryglobal.tistory.com">웹 개발 입문자들을 대상으로 하는 HTML 교재입니다.</blockquote>
</body>수평선 표시하기
<hr> 태그는 화면에 수평선을 표시할 때 사용하는 태그로, 닫는 태그가 필요하지 않은 단일 태그입니다. 수평선은 주로 텍스트 사이사이에 삽입되어 텍스트의 내용을 구분짓는 역할을 합니다.
<body>
<p>지금까지 스포츠 뉴스였습니다.</p>
<hr>
<p>날씨 예보입니다. 오늘은 하루 종일 맑았지만, 내일은 비가 올 예정입니다.</p>
</body>
수평선은 기본적으로 얇고 긴 검정색 선의 형태를 띄고 있지만, color 속성이나 size 속성을 이용해 색상이나 두께를 조절할 수도 있습니다. 속성 사용 시 color 속성에는 색깔 이름을, size 속성에는 픽셀 단위의 숫자를 입력합니다. 다음은 수평선의 색상을 보라색으로, 두께는 10픽셀로 조절한 코드 예입니다.