DH의 개발 공부로그
[HTML] #2 텍스트 태그 h1~h6, p, br, strong, em 본문
제목 태그 h1, h2, h3, h4, h5, h6
일단, h는 heading의 약자로 html문서의 제목이나 부제목 등을 나타낼 때 사용이 됩니다. 6단계로 수준을 나눌 수 가 있으며, 제목 숫자가 낮은 h1이 가장 높은 레벨의 태그입니다. 폰트 사이즈의 차이가 존재하는데 현업에서는 웹브라우저의 호환성을 위해, 태그에 표현 서식을 모두 삭제하고 css 스타일에서 별도로 적용을 해서 사용을 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목태그 h1~h6</title>
<head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>↓
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
- h1 태그는 문서의 메인 제목으로 사용되며, 한 문서에 한 번만 지정하는 것을 권장하고 있습니다. (주로 로고에 사용)
- h2 ~ h6 태그는 제목 태그로 한 문서 안에 여러번 사용이 가능합니다.
- 의미없이 제목 단계를 건너띄지 않으며, 중첩으로 사용도 가능합니다.
문단 태그 p
p 태그는 텍스트의 문단을 정의하는 태그입니다. 블록요소이나 문단 태그 p는 또 다른 블록 요소를 포함하지 않습니다.주로 인라인 요소만 p태그 안에 작성하는 편입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>문단 태그 p</title>
</head>
<body>
<p>텍스트의 문단을 정의하는 요소입니다.</p>
<p>p는 블록 요소이며 여러 문단을 나누어 줍니다.</p>
</body>
</html>↓
텍스트의 문단을 정의하는 요소입니다.
p는 블록 요소이며 여러 문단을 나누어 줍니다.
줄바꿈 태그 br
br 태그는 텍스트안에 줄바꿈을 해주는 태그로, 빈 요소이며 열린 태그로 종료태그가 존재하지 않습니다. br태그는 인위적인 여백을 만들기 위해 사용하지 않으며 꼭 필요한 곳에만 사용합니다. 반응형 웹에서는 br 태그를 이용해 줄바꿈을 하기 보다 span 태그를 이용하여 줄바꿈을 하는 편이라고 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>줄바꿈 태그 br</title>
</head>
<body>
<p>몰리는 지금 약 한 시간 동안 창 밖을 바라보고 있다.<br>
그녀의 책상에는 Nature, New Scientist, 그리고 그녀의 논문이 실린 다른 과학 잡지가 보였다.</p>
</body>
</html>↓
몰리는 지금 약 한 시간 동안 창 밖을 바라보고 있다.
그녀의 책상에는 Nature, New Scientist, 그리고 그녀의 논문이 실린 다른 과학 잡지가 보였다.
강한 강조 태그 strong
strong 태그는 강한 강조 태그로 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 웹브라우저 상에서는 굵은 글씨로 표시합니다. strong 태그는 인라인 요소입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>강한 강조 태그 strong</title>
</head>
<body>
<p><strong>주의:</strong> 소매치기가 이 지역에서 발생하고 있습니다</p>
</body>
</html>↓
주의: 소매치기가 이 지역에서 발생하고 있습니다
일반 강조 태그 em
em 태그는 일반적인 강조의 의미를 나타내는 태그로 주로 기울여져서 표현 됩니다. em 태그를 단순히 디자인을 위해 사용해서는 안됩니다.
!DOCTYPE html>
<html lang="ko">
<head>
<title>일반 강조 태그 em</title>
</head>
<body>
<p>코로나 이후 중요해진 <em>건강</em>과 <em>힐링,</em> 주거 선택 기준이 달라졌다</p>
</body>
</html>↓
코로나 이후 중요해진 건강과 힐링, 주거 선택 기준이 달라졌다
※ 이 게시물은 mozillaMDN(https://developer.mozilla.org/ko/), 잔재미코딩(https://www.fun-coding.org/) 및 학원에서 공부한 내용을 바탕으로 작성하였습니다.
'HTML & CSS' 카테고리의 다른 글
| [CSS] 블록(block)요소 안에 img 태그의 하단 여백 없애기 (0) | 2022.04.15 |
|---|---|
| [HTML] #5 하이퍼링크를 설정하는 태그 a & 절대경로, 상대경로 (0) | 2022.03.29 |
| [HTML] #4 리스트 태그 ol, ul, li, dl, dt, dd, 컨텐츠 분할을 위한 태그 div, span (0) | 2022.03.28 |
| [HTML] #3 시맨틱 마크업 Semantic Markup (0) | 2022.03.25 |
| [HTML] #1 HTML 기본정리 (0) | 2022.03.22 |
