안녕하세요.
이번 포스팅에서는 HTML에서 간단한 글을 써보겠습니다.
지난 번에는 문단을 표현하는 <p></p> 태그를 사용하는 모습을 간단하게 보여드렸는데, 오늘은 각 태그에 대한 설명도 조금 곁들여 보겠습니다.
우선 <p></p> 태그는 Paragraph의 P를 따서 만들어진 태그입니다.
말 그대로 문단을 의미합니다.
따라서 여러 개의 <p></p> 태그가 아래와 같이 있다면,
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
첫 번째 문단
</p>
<p>
두 번째 문단
</p>
<p>
세 번째 문단
</p>
<p>
네 번째 문단
</p>
</body>
</html>웹페이지에서는 다음과 같이 보여집니다.
문단과 문단을 구분하기 위해 <p></p>태그 사이에 여백이 생기는 것입니다.
조금 더 길게 써보면,
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
남산 위에 저 소나무, 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
</body>
</html>
문장이 여러 줄이 되어도 문단 사이는 확연히 구분되는 것을 볼 수 있습니다.
여기서 아마 한 가지 의문이 생길텐데, HTML 문서에서 줄바꿈은 일반적으로 적용되지 않습니다.
만약 줄을 바꾸고 싶다면 <br/> 태그를 사용해야 합니다.
이 태그는 끝 태그가 없는 태그로, Line Break의 Break에서 Br만 따온 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
동해 물과 백두산이 마르고 닳도록<br/>
하느님이 보우하사 우리나라 만세.<br/>
무궁화 삼천리 화려 강산<br/>
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
남산 위에 저 소나무, 철갑을 두른 듯<br/>
바람 서리 불변함은 우리 기상일세.<br/>
무궁화 삼천리 화려 강산<br/>
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
가을 하늘 공활한데 높고 구름 없이<br/>
밝은 달은 우리 가슴 일편단심일세.<br/>
무궁화 삼천리 화려 강산<br/>
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
이 기상과 이 맘으로 충성을 다하여<br/>
괴로우나 즐거우나 나라 사랑하세.<br/>
무궁화 삼천리 화려 강산<br/>
대한 사람, 대한으로 길이 보전하세.
</p>
</body>
</html>
이제 <br/> 태그로 인해 줄이 바뀌는 것을 볼 수 있습니다.
그리고 줄이 바뀌어도 <p></p> 태그 간의 구분은 여전히 제대로 이뤄지는 것도 확인 가능합니다.
다음은 애국가에 제목을 달아볼텐데, 제목을 표시하는 태그는 <h1></h1>부터 <h6></h6> 까지 있습니다.
제목, 표제라는 뜻의 Heading에서 H만 따와 만든 태그로, 숫자가 작을 수록 제목의 크기가 커집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>
애국가
</h1>
<h4>
안익태 작곡
</h4>
<p>
동해 물과 백두산이 마르고 닳도록<br/>
하느님이 보우하사 우리나라 만세.<br/>
무궁화 삼천리 화려 강산<br/>
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
남산 위에 저 소나무, 철갑을 두른 듯<br/>
바람 서리 불변함은 우리 기상일세.<br/>
무궁화 삼천리 화려 강산<br/>
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
가을 하늘 공활한데 높고 구름 없이<br/>
밝은 달은 우리 가슴 일편단심일세.<br/>
무궁화 삼천리 화려 강산<br/>
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
이 기상과 이 맘으로 충성을 다하여<br/>
괴로우나 즐거우나 나라 사랑하세.<br/>
무궁화 삼천리 화려 강산<br/>
대한 사람, 대한으로 길이 보전하세.
</p>
</body>
</html>
'Frontend 기본' 카테고리의 다른 글
| HTML 주석과 개발자 도구 (0) | 2022.08.05 |
|---|---|
| HTML 태그 - <ol>, <ul>, <dl> (0) | 2022.08.04 |
| HTML 시멘틱 태그 (0) | 2022.08.03 |
| HTML 태그 - <b>, <strong>, <i>, <em> (0) | 2022.08.02 |
| HTML이란? (0) | 2022.08.01 |