HTML 기초에 대해 알아보자(h태그, p태그 등등)
1. HTML 기본과 구조
2. h태그
3. p태그
4. br태그
5. img태그
이렇게 알아보도록 하겠습니다.
1. HTML 기본과 구조
HTML은 Hypertext Markup Language의 약자입니다.
웹 문서를 만들기 위해 사용하는 언어라고 생각하시면 됩니다.
태그들을 이용해서 작성을 하는데 태그란 <, > 이런 꺽쇠들로 감싸서 씁니다.
HTML을 쓸 때 기본구조는
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
이렇습니다.
<head> 태그에는 meta, title 같은 태그가 들어가게 되고,
<body> 태그에는 h1, h2, p, li, br, img 등의 많은 태그들이 들어가게 됩니다.
2. h태그
h태그는 head를 줄여서 쓰는 것입니다.
h태그는 주로 제목을 쓸 때 사용합니다.
h태그는 h1, h2, h3 ...... 이렇게 있는데 h6까지 있습니다.
<h1>html</h1>
<h2>html</h2>
<h3>html</h3>
<h4>html</h4>
<h5>html</h5>
<h6>html</h6>
위 6개의 h태그가 어떤 차이가 있는지 보겠습니다.
h1 ~ h6은 순서대로 크기가 작아집니다.
h1이 제일 크며, h6이 제일 작습니다.
3. p태그
p태그는 문단을 나타냅니다.
가나다라마바사
아자차카타파하
<p>가나다라마바사</p>
<p>아자차카타파하</p>
이렇게 입력을 하면 아래 사진처럼 됩니다.
p태그를 입력하지 않으면 줄바꿈을 하여도 줄바꿈이 적용되지 않고 표시됩니다.
p태그를 사용하면 문단이 나눠져 줄바꿈이 됩니다.
줄바꿈이라기 보다 p태그는 문단이 나눠진다고 보면 됩니다.
4. br태그
br을 줄바꿈을 할 때 사용합니다.
p태그는 문단이고, br을 줄입니다.
가나다라마바사<br>
아자차카타파하
<p>가나다라마바사</p>
<p>아자차카타파하</p>
<p>가나다라마바사
아자차카타파하</p>
<p>가나다라마바사<br>
아자차카타파하</p>
이렇게 작성을 하였습니다.
결과 먼저 보겠습니다.
가나다라마바사<br>
아자차카타파하
이것을 먼저 보면 <br>이 없었을 때는 줄바꿈이 되지 않고 써졌었습니다.
<br>을 이용하여 줄바꿈을 한 것입니다.
<p>가나다라마바사</p>
<p>아자차카타파하</p>
이렇게 했을 때는 위 <br>처럼 간격이 없이 줄바꿈이 되는게 아니라 위에서 말했듯이 단락을 나눈 것입니다.
그래서 <br>을 사용했을 때보다 간격이 조금 더 넓습니다.
<p>가나다라마바사
아자차카타파하</p>
하나의 p태그 안에서 이렇게 작성한다면 어떻게 될까요??
줄바꿈이 되지 않습니다.
하나의 문단 태그 안에서 작성되었기 때문입니다.
에디터에서 그냥 줄바꿈을 한다고 웹에 똑같이 표현되지 않습니다.
<p>가나다라마바사<br>
아자차카타파하</p>
하나의 p태그 안에서 줄바꿈을 하기 위해서는 이렇게 <br>태그를 이용하여야 합니다.
댓글