-
HTML 기초 - 5 | 간단한 글 쓰기프로그래밍 언어/HTML 2020. 5. 15. 18:30
이번 글부터는 body 태그에 들어가는 여러 태그들에 대해 알아보자.
처음은 간단하게 웹페이지에 글을 올려보도록 하자.
제목 태그 <h#></h#>
우선 제목을 달아보자.
제목은 <h#> 태그를 사용한다. 저기 # 부분에는 1부터 6까지의 숫자를 넣을 수 있다.
한마디로 제목 태그는 6가지의 종류가 있고, 숫자가 작아질수록 제목의 크기가 커진다.
<h1>내용</h1> <h2>내용</h2> <h3>내용</h3> <h4>내용</h4> <h5>내용</h5> <h6>내용</h6>위의 태그 중 한가지를 골라 직접 써 보자. 그리고 안에 내용도 원하는 글을 아무거나 써보자.
h1 태그 위와 같이 웹페이지에 글이 나타난다면 성공이다.
문단 태그 <p></p>
제목을 달았으니 본문도 써보자.
일반적인 문단을 적을땐 <p> 태그를 사용한다.
<p>내용</p>마찬가지로 쓰고 싶은 내용을 <p> 태그를 이용해 한번 써보자.
p 태그 위와 같이 적은 글이 잘 나타난다면 성공이다.
리스트 태그 <li></li>
마지막으로 리스트에 대해 배워보자.
뭔가 여러 항목을 쭉 나열하고 싶을 때는 li 태그를 사용하자.
다만 li 태그는 단독으로 쓰지 않는다.
상위 태그로 ul(unordered list) 태그나 ol(ordered list) 태그 사이에 들어가서 사용된다.
순서가 중요한 리스트는 ol 태그를, 그렇지 않으면 ul 태그를 사용하자.
<ul> <li>내용1</li> <li>내용2</li> <li>내용3</li> </ul> <ol> <li>내용1</li> <li>내용2</li> <li>내용3</li> </ol>이런 식으로 종류에 맞는 여러 리스트를 만들어 보자.
li 태그 이렇게 보니 ul 태그와 ol 태그의 차이점이 확실히 보인다.
ol 태그는 리스트에 순서를 고려해 숫자를 붙여주지만, ul 태그는 점으로 표현해 준다.
위의 간단한 소제목은 <h3> 태그를 이용해 달아 보았다.
이렇게 단순 글이지만 웹페이지에 원하는 것을 표현해보았다.
슬슬 흥미가 붙지 않는가? 생각보다 따라 하기도 쉽다.
마지막으로 오늘 공부한 태그들을 복습한다 생각하고, 전체 HTML 파일을 확인해보자.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Practice</title> </head> <body> <h1>It just Practice!</h1> <p>I like practice HTML! It's FUN!!</p> <h3>To Do List(Unordered)</h3> <ul> <li>learn html</li> <li>learn css</li> <li>learn javascript</li> </ul> <h3>To Do List(Ordered)</h3> <ol> <li>learn html</li> <li>learn css</li> <li>learn javascript</li> </ol> </body> </html>
다음 글에서는 이미지도 좀 넣어보고 링크도 만들어 보자. 웹페이지가 더 있어 보일 거다.