html 강좌 5 텍스트 관련 태그 정리
안녕하세요 엘빈입니다.
저번 시간까지 html 문서의 기본 구조를 살펴보았는데요.
이번 포스팅부터 실제 html 문서를 작성하는데 사용되는 태그와 속성에 대해서 알아보겠습니다.
* 텍스트를 덩어리로 묶어 주는 태그
태그들은 크게 Block 태그와 inline 태그로 나뉩니다. 지금부터 알아볼 태그들은 선택한 텍스트 글자에서만 적용되는 것이 아니라 텍스트가 포함된 블록 전체에 적용되는 태그들입니다.
제목을 표시하는 <h(숫자)> 태그
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<body>
<h1>h1입니다</h1>
<h2>h2입니다</h2>
<h3>h3입니다</h3>
<h4>h4입니다</h4>
<h5>h5입니다</h5>
<h6>h6입니다</h6>
</body>
</html>
h(숫자) 태그는 제목을 의미하는 태그입니다. 다음과 같이 작성해 봅시다.
위와 같이 h태그를 사용하면 제목과 같은 글씨체로 표시됩니다. h 뒤의 숫자가 작을수록 좀 더 큰 제목을 표시하며 작아질수록 글씨 크기가 작아집니다.
단락을 만드는 <p> 태그
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<body>
(p태그 사용하지 않음)
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
<p>(p태그 사용)</p>
<p>동해물과 백두산이 마르고 닳도록</p>
<p>하느님이 보우하사 우리나라 만세</p>
</body>
</html>
위와 같이 p 태그를 적용 시킨 문단과 적용시키지 않은 문단의 차이는 어떨까요?
p 태그가 없는 문단은 줄바꿈 없이 한줄에 모두 작성되는것과 반면에 p 태그를 사용시 해당 문단의 끝에 줄바꿈을 자동으로 해줍니다.
줄 바꾸기 <br> 태그
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<body>
안녕하세요 엘빈입니다<br>
줄바꿈을 해보았는데요 br 한번<br><br>
br 2번시 이렇게 많이 띄어줘요
</body>
</html>
<br> 태그는 <p> 태그와 같이 줄바꿈을 도와주는 태그입니다. 하지만 닫는 태그 없이 독단적으로 사용할 수 있으며 문단 구분이 아닌 단순이 줄바꿈을 할때 자주 사용됩니다.
이렇게 br 태그를 한번만 사용하면 줄바꿈이 한번만 되며 여러번 사용하면 여러번 줄바꿈이 됩니다.
인용문 삽입의 <blockquote> 태그
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
<blockquote>
인용 내용은 여기로 들어갑니다
위의 내용은 애국가에서 발취한 것입니다.
</blockquote>
</body>
</html>
blockquote는 문단에 추가적인 설명인 인용문을 나타내는 태그입니다. 이와 같이 작성하면 화면에 다음과 같이 표시됩니다.
blockquote 태그가 적용된 문장은 다른 텍스트 문장과 다르게 들여쓰기 된 상태로 화면에 표시된 것을 알 수 있습니다.
소스 코드 작성한 그대로 표시해주는 <pre> 태그
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<pre>동해물과 백두산이 마르고 닳도록(enter)
하느님이 보우하사 우리나라만세 (이어진다 이어진다)
무궁화 삼천리 화려강산
</pre>
</body>
</html>
pre 태그는 우리가 html 문서에 작성한 그대로 화면에 표시됩니다.
코드에 들여쓰기를 했다면 화면에서도 들여쓰기가 되며 줄바꿈을 했을때도 그대로 적용됩니다.
해당 코드는 다음과 같이 화면에 표시됩니다.
이와 같이 코드 작성한 그대로 표시되는 것을 알 수 있습니다.
문단을 작성하는데 너무 많은 태그들이 사용될 것 같은 경우에 이와 같이 pre 태그를 사용합니다.
텍스트를 한 줄로 표시하는 태그
방금까지 알아본 태그들은 블록 단위의 태그들입니다. 이 태그들 말고 줄바꿈 없이 텍스트에 적용시킬수 있는 태그들도 있습니다.
바로 인라인 레벨 수준의 태그들인데요. 바로 알아볼까요?
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
</head>
<strong>Strong 태그 입니다</strong>
<b>b 태그 입니다</b>
<em>em 태그입니다</em><br>
<q>q 태그입니다</q>
<mark>mark 태그입니다</mark>
<span>span 태그입니다</span>
</body>
</html>
이와 같이 코드를 작성해봅시다. 위의 태그들은 따로 줄바꿈 태그를 사용하지 않으면 모두 한 문장에 표시됩니다.
em 태그 뒤에 br 태그를 붙여 줄바꿈을 해주었습니다.
태그들의 의미는 다음과 같습니다.
|
태그 |
의미 |
|
<strong>,<b> |
문장을 강조 |
|
<em> |
문장을 기울임 |
|
<q> |
문장 안의 인용 구문 |
|
<mark> |
형광펜 효과 |
|
<span> |
인라인 레벨의 덩어리를 만든다 |
'개발 > HTML_CSS' 카테고리의 다른 글
| html 강좌 7 표(테이블) 관련 태그 정리, 간단하게 만들자 (0) | 2020.01.11 |
|---|---|
| html 강좌 6 목록 관련 태그 정리 (0) | 2020.01.10 |
| 홈페이지 만들기 html 강좌 4 - 기본 문서 구조 (0) | 2020.01.08 |
| 홈페이지 만들기 HTML 강좌 2 - 설정 및 기본 구조 (0) | 2019.03.28 |
| 홈페이지 만들기 HTML 강좌 1 - 웹 프로그래밍에 대해서 (0) | 2019.03.26 |
