[TeamH4C_HTML] 주요 태그-1

이번에는 주요한 태그에 대해 정리하겠습니다.

HTML의 변화에 따른 태그의 사용은 http://www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html을 확인하면 태그들의 리스트들을 확인할 수 있습니다.

 

주요 태그

단락 : <p></p> 태그 (paragraph), 줄 바꿈 : <br> 태그

단락을 알리기 위해 문장의 시작과 끝에 아래와 같이 p태그로 감싸주어야 됩니다.

단락을 더 넓이기 위해 CSS언어를 이용하여도 되지만, <br> 태그를 이용하여 간격을 더 넓일 수 있습니다. 여기서, br태그는 줄 바꿈 태그로 Void element입니다.

줄 바꿈 태그는 시각적인 표현일 뿐 어떠한 정보를 가지고 있지 않지만, 단락을 표현하는 p태그는 하나의 단락이라는 정보를 가지고 있습니다.

이미지 : <img src="이미지 파일"> 태그

웹 페이지에 이미지를 포함하는 방법으로 html2부터 시작된 태그입니다. 아래와 같이 img태그와 src속성을 이용하여 웹 페이지에 이미지를 출력할 수 있습니다.

이미지는 https://pixabay.com/ko/사이트에서 받아왔습니다.

이미지 태그도 Void element로 닫는 태그는 필요하지 않습니다. 그림의 크기가 너무 커 조절을 하고자 한다면 폭을 조절하는 속성인 width속성이나 높이를 조절하는 height 속성에 픽셀 값을 설정하여 지정하면 크기를 지정할 수 있습니다.

여기서, 웹 페이지에 이미지를 지정할 때 alt속성을 사용하는 것이 좋습니다. 이미지가 깨져도 어떤 이미지였는지 text로 표현해주기에 alt속성을 대부분 사용하게 됩니다. alt는 alternative의 약자입니다.

title속성을 사용하여 마우스를 올려놓았을 때 이미지가 어떤 이미지인지 도움말로 표현하는 것이 가능합니다.

표 : table 태그

리스트를 표현할 때 <li></li> 리스트 항목들을 묶은 것과 같이 <td></td> 태그로 묶어 테이블을 표현할 수 있습니다. td태그는 항목 하나씩 묶어주어야 하며, td는 table data의 약자로 표의 실제 데이터를 의미합니다.

하나의 행인 같은 행을 그룹화시켜주는 작업을 <ol></ol>과 <ul></ul>처럼 <tr></tr> 태그로 묶어 하나의 행을 나타내 줍니다. tr은 table row의 약자입니다.

행과 열을 모두 표로 나타내기 위해 td태그와 tr태그 부분을 <table></table> 태그로 감싸주면 됩니다. 그대로 출력하면 선이 없는 상태의 표형식으로 출력되기에 table 태그에 border속성 값을 지정하여 선을 만들면 됩니다. 값이 증가할수록 선이 진해집니다.

테이블을 성격에 따라 구분하고자 한다면 <thead></thead> 태그와 <tbody></tbody> 태그, <tfoot></tfoot> 태그로 구분할 수 있을 것입니다. 하나의 행(row)들이 각자 맨 위에 존재하고 본문 내용으로 존재하고, 아래에 고정되어 있고자 할 때 사용되며, thead태그는 테이블의 헤드로 tbody는 테이블의 본문 내용으로, tfoot태그는 맨 아래 고정되어 위치하게 됩니다. 위 3가지 태그는 테이블의 위치를 결정하는 태그들입니다.

표는 표의 병합도 가능합니다. 같은 값들이 존재할 때 행(column)과 열(row)을 각각 병합을 하고자 할 수 있는데, 열(row)은 병합하고자 하는 첫 번째 td태그에 rowspan속성을 추가하여 값만큼의 크기만큼 병합하도록 할 수 있습니다. 행(column)은 반대로 colspan속성을 지정하여 열을 합칠 수 있습니다.

 

이어서 시작하겠습니다.