HTML의 다양한 태그에 대해서 알아보자. 아래 태그는 body태그 안에 포함된다.
1. p
p태그는 문단을 나타내는 태그입니다.
2. h
h태그는 1~6까지 폰트크기를 설정할 수 있습니다. 숫자가 작을 수록 폰트 크기가 큽니다.
3. ul, li
ul과 ol은 각각의 요소를 li태그로 표현하며, 리스트를 만듭니다.
4. table
table태그를 이용해 표를 표현할 수 있습니다. thead, tbody를 가지고 있을 수 있고, tr을 이용해 행을 표현합니다.
그리고 th와 td를 이용해 각 행의 컬럼을 표현합니다. th는 가운데 정렬과 굵은 글씨체를 만듭니다.
5. input, button
input태그와 button태그는 데이터를 넣는 폼과 페이지 조작 버튼을 만듭니다. input은 type, name, value와 같은 속성이 있으며, type을 button으로 넣어주면 input태그로도 버튼을 만들 수 있습니다. input태그는 닫는 태그가 존재하지 않습니다.
6. select
select태그를 이용하여 선택 리스트를 만들 수 있습니다. 또한, select를 누르면 option태그로 감싼 리스트의 아이템의 띄워집니다.
7. a
a태그를 이용하면 다른 페이지로 이동할 수 있습니다. a태그는 href속성을 가지고 있습니다. href는 클릭 시 이동되는 링크입니다.
링크를 만드는 방법은 세 가지가 있습니다. 첫 번째 주소전체 작성, 두 번째 상대경로 작성, 세 번째 절대경로 작성입니다.
상대경로란 내가 있는 경로부터의 경로이며, 절대경로는 어느 페이지에서 이동을 하던 항상 같은 url를 요청하며 맨 앞에 슬래시(/) 붙입니다.
8. img
img태그를 이용하면 이미지를 띄울 수 있습니다. img태그는 src속성을 이용해 이미지를 불러옵니다. img태그는 alt속성도 가지는데 이 속성은 해당 이미지가 정상적으로 불러올 수 없을 때 이미지를 대체하는 글입니다. img태그의 src값을 가져와 해당 이미지를 다운 받는 코드 작성도 가능합니다.
9. span
span태그를 이용하여 p태그처럼 글을 넣을 수 있습니다. 이 태그로 내용추가가 가능합니다. p태그와 다른 점은 p태그는 문단을 만드는 태그여서 엔터가 태그 간 자동 적용이지만, span 태그는 옆으로 나열됩니다. 이것을 CSS에서는 display: block과 display:inline이라고 표현합니다.
만약 span태그로 p태그 처럼 사용하고 싶으면 br태그를 사용하면 됩니다. br태그도 input태그처럼 닫는 태그가 없습니다. <br>,</br> 둘다 가능합니다.
10. div
div태그는 가장 많이 사용되는 태그입니다. div태그는 화면 레이아웃을 잡는 역할로 많이 사용가능합니다. div태그를 이용하면 눈에 보이지는 않지만 그 하위 태그들의 영역을 잡아주는 역할을 합니다. 또한 태그를 중첩할 수도 있습니다. 태그를 중첩하는 경우 밖에 있는 태그를 상위태그 또는 부모태그라고 하며, 안에 있는 태그를 하위태그 또는 자식태그라고 합니다.