[HTML5] 기본 태그의 종류와 사용법

0. hr, br, pre 태그

hr 태그와 br 태그는 각각 수평선 과 엔터키 효과를 줄 수 있습니다.

또한 pre 태그는 p 태그와 달리 컨텐츠를 보이는대로 작성 할 수 있는 태그입니다. (잘 안씁니다.)

<p>여기가 첫번째 문단입니다.</p>
    <p>여기가 두번째 문단입니다.</p>
    <br>
    <br>
    <p>여기가 세번째 문단입니다.</p>
    <p>여기가 네번째 문단입니다.</p>
    <hr>
    <hr>
    <pre>
        여기가 
                네번째 
                        문단입니다.
    </pre>

1. div, span, p태그

div와 span, p태그는 html에서 콘텐츠의 내용을 입력하는 대에 대표적으로 사용 되는 태그들입니다. div와 span 태그는 다른 태그들의 원형이 되는 태그들로서 둘의 가장 큰 차이점은 차지하는 공간에 대한 차이점이라고 볼 수 있는데요.

div 태그는 마진이 생성되고 해당 줄 전체를 차지합니다. 그래서 div 태그는 블록 요소라고 불리고요.

반면 span 태그는 마진이 생성되지 않고 해당 전체 줄을 차지 하지 않으면서 차례대로 나열됩니다. 그래서 이 span 태그를 두고 인라인 요소라고 부르는거죠.

마지막 p태그는 컨텐츠의 단락을 의미하며 해당 태그를 활용하여 문장을 표현 하는 대에 사용됩니다. 참고로 이 p 태그도 블록 요소입니다.

2. ul, ol, li태그

리스트(목록)를 형성하는 태그들로서 ul(unordered list)와 ol(ordered list) 안에 li 태그를 삽입하는 형식으로 사용됩니다. 그 중 ul태그와 ol태그는 말 그대로 순서가 정해져 있고 그렇지 않은 차이점이 있습니다.

그리고 li태그는 저 위의 두 태그 중 하나에 무조건 들어가서 사용이 되어야 하는데 이때 li를 자식 요소, 그 위의 상위 태그를 부모 요소라고 부릅니다.

또한 ol 태그는 ul 태그에는 없는 type과 start 속성을 사용해 순서 마크의 종류와 번호가 시작되는 지점을 설정 할 수 있습니다.

3. dl, dt, dd태그

dl(Definition List)과 dt(Definition Term), dd(Definition Description) 태그는 해당 컨텐츠에 대한 개념을 정의하고 설명하는 용도로 사용됩니다.

위에서 설명 드린 ul, ol, li 태그와의 사용법이 비슷하면서도 차이점이라고 한다면, 단순한 리스트 형태로서의 의미로 사용 되는 태그들이 아닌, 해당 용어 및 개념에 대한 정의 및 설명을 나타내는대에 사용 된다는 것에 그 차이점을 둘 수 있습니다.

4. img태그

화면에 이미지를 불러오는 기본적인 태그이며 대표적인 단일 태그 중 하나에 속합니다.

src 속성은 지정된 경로의 이미지 파일을 불러오고, alt 속성은 만약 이미지 불러오기를 실패했을 때 대체할 설명글을 표시하는 용도이며, title 속성은 해당 이미지에 대한 제목을 지정합니다.

마지막으로 width와 height 속성으로 해당 이미지의 가로 및 세로 길이를 지정 할 수 있는데, 두 속성 중 하나만 주게 되면 나머지 하나는 알아서 조정이 되나, 둘 다 지정을 해주면 비율이 깨질 수 있다는 점이 있으며, 왠만해서는 태그 내 인라인 속성으로 지정하는 것보다 CSS에서 해당 속성을 이미지에 적용하는 것을 권장합니다.

<!-- 상대 경로 지정법 -->
<img src="./image.jpg" alt="My Image"> <!-- 현재 디렉토리를 가르킬 때에는 ./생략 가능 -->
<img src="../images/image.jpg" alt="My Image"> <!-- ../는 상위 디렉토리를 의미. -->

<!-- 절대 경로 지정법 -->
<img src="https://example.com/images/image.jpg" alt="My Image"> // 각 운영 체제에서의 루트 디렉토리, 또는 서버 상의 루트 디렉토리를 의미하며 주로 외부의 URL을 지정할 떄 사용됩니다.

5. table, caption, tr, td태그

표를 생성하는 용도로 사용되는 태그들이며 table 태그 안에 caption과 tr(table row), td(table data cell)를 사용합니다.
caption 태그는 해당 표의 타이틀이나 설명을 나타내는 태그이고, tr 태그는 해당 테이블의 가로행을 생성하는 태그이며 td 태그의 부모 요소입니다.

td 태그는 해당 테이블의 가로행(tr)의 데이터들 입니다. ol 혹은 ul과 li가 같이 사용 되는 것럼 tr과 td또한 한 쌍으로 table 태그 안에서 사용됩니다.

이러한 table 태그에는 하위 태그들에 대한 역할을 보다 명확히 할 수 있는 태그들이 존재하며 각각 thead(테이블의 칼럼의 제목 부분), tbody(셀 데이터 부분), tfoot(테이블의 칼럼의 밑단 부분), th(해당 로우열의 헤더 부분 강조) 태그를 사용해 해당 칼럼이나 로우가 어떠한 값들인지를 보다 명확히 정의 할 수 있습니다.

그래서 이러한 thead, tbody, tfoot 안에 각각 tr과 th, td 태그를 적절히 혼합하여 테이블을 보다 명확하게 표현 할 수 있습니다.

또한 th 태그는는 해당 열과 행의 header 부분이 되기 때문에 속성값(scope)을 row(가로행) 또는 col(세로행)중 하나로 설정하여 그 구분을 명확히 지어주는 것이 좋습니다.

그리고 td 태그의 속성 중에는 colspan, rowspan이 있는데 이 두 속성은 각각 행 병합과 열 병합을 의미하며 colspan 속성 사용시 같은 형제 td를 colspan의 값 만큼 삭제해야하고, rowspan 속성 사용시 같은 tr 태그 안의 td태그를 마찬가지로 rowspan의 값 만큼 tr 당 하나씩 삭제를 해주어야 병합 효과를 낼 수 있으며 두 속성을 동시에 주면 그 두 작업을 동시에 해주어야 합니다.

⭐ 이러한 방식은 플렉스나 그리드가 등장하기 이전, flow 배치와 함께 요소를 배치할 때 사용되던 대표적인 태그인데요.

이러한 테이블 관련 태그는 CSS에서 플렉스 박스나 그리드의 등장으로 그 사용성이 많이 떨어진 상황이므로 개념 정보만 알아가셔도 충분하다고 합니다.

6. a 태그

a태그는 해당 경로로 지정 된 웹페이지를 접근 하도록 해주는데,

기본적으로 href 속성으로 웹페이지의 경로를 지정하게 되고, target 속성으로 웹페이지를 새로 생성할지(_blank), 기존의 웹페이지에서 이동만 할지(_self) 등을 설정 할 수 있습니다.

뿐만 아니라 같은 페이지 내에서 특정 id, 혹은 class 값을 가지고 있는 태그로 이동시에도 a 태그에 해당 경로를 설정 할 수 있습니다. 이 경우 경로에 해당 id(#) 와 class(.)을 적어주면 웹페이지 내에서 링크(a 태그가 걸린)를 클릭시 해당 경로로 설정 된 요소로 이동이 가능합니다.

이러한 a태그는 텍스트에 링크를 걸 수 있을 뿐만 아니라 이미지에도 링크를 걸 수 있는데, 이럴 경우 a 태그 안에 img 태그를 작성 해주면 됩니다.

마지막으로 href 속성에는 특정 스키마를 이용해 메일을 발신하거나(mailto:) 전화를 거는(tel:) 링크로 접근 할 수도 있습니다. 근데 거의 사용 안하니 참고 정도만 해도 무방합니다.

7. form, input, lable, button, fieldset, legend 태그

form 태그는 사용자로부터 입력을 받는 전체 영역을 정의하며, 데이터를 수집한 후 action 속성의 경로를 지정해 해당 데이터를 처리하고 method 값에 따라 데이터 값을 포함한 url 전체가 전송 될지(GET), 요청의 본문 부분에 데이터(name)이 포함 될지(POST) 지정하여 서버에서 제공 받을 방법을 설정합니다. 또한 autocomplete 속성을 활용해 사용자가 입력한 이전의 데이터 값(캐시값)을 보여줄지 말지를 지정해줄 수 있습니다. 참고로 default 값은 on입니다.

input 태그는 사용자로부터 값을 입력 받는 필드입니다. type 속성을 통해 input 필드의 유형을 지정 할 수 있으며 name 속성을 통해 input 필드의 유형(이름)을 지정하게 됩니다. 이 이름의 값은 서버로 데이터가 전송 되는대에 사용 되거나 특정 input들을 그룹화 해주는 대에 사용됩니다.

또한 이 input 태그의 타입 속성은 정말 다양하게 입력을 받아 처리하는 양식이 있는데, 이와 관련해서는 다음 공식 문서 를 참조하시기 바랍니다.

label 태그는 입력 필드(input)와 관련된 이름이나 설명 등을 텍스트로 제공하는데, 해당 레이블을 클릭 하면 연결 된 input 필드가 활성화 되게 되어 가시성을 보다 확보 할 수 있게 됩니다. 이 태그는 하나 하나의 개별 input을 생성 할때 부모 요소의 역할을 수행합니다.

button 태그는 사용자의 버튼 클릭 등의 액션에 반응해서 스크립트를 실행하거나 폼 데이터 제출 등의 동작을 수행합니다. 또한 type 속성을 통해 폼을 제출하거나(submit) 폼을 초기화 하는 용도(reset) 등의 목적을 정할 수 있습니다.

fieldset 태그는 폼 안의 요소들을 각각 그룹화 함으로서 시각적으로 사용자의 가독성을 높여주고 관련 있는 요소들을 묶어 주는대에 사용합니다. 또한 disabled 속성을 단독으로 지정하면 해당 fieldset 영역의 input 창이 비활성화 됩니다.

legend 태그는 해당 fieldset 영역의 캡션을 의미합니다. 이 태그에는 택스트 뿐만 아니라 기타 인라인 태그 요소를 포함 할 수 있습니다.

모든 입력폼 구성은 form > fieldset > input(다양한 형식), textarea 등으로 구성이 됩니다.

8. textarea, optgroup, details태그

이러한 input 태그는 html에서 정말 다양한 속성으로 사용이 될 수 있는데, 비단 input 태그만 활용하여 데이터를 입력 받을 수 있는 것은 아닙니다.

textarea 태그를 이용하면 사용자가 입력한 여러줄의 문장을 입력 받는 것도 가능하며 cols와 rows를 이용하여 해당 frame의 표시 되는 입력값을 가로 크기와 세로 크기로 지정이 가능합니다. 여기서 input과 차별화 되는 점은 value값이 컨텐츠의 값이 되는 input에 반해 textarea는 입력 되는 컨텐츠의 값이 전달 될 value값이 됩니다. 그 외에 input에서 사용하는 대부분의 속성은 공용 가능합니다.

여기에 optgroup 태그를 사용하여 각 option들을 그룹화 해주는 것도 가능하 details 태그를 활용하여 option 값들을 지정시 사용자가 해당 option 값들을 선택 할 수 있을 뿐만 아니라 그 option값 이외의 값을 직접 입력 하는 것도 가능합니다.

9. b, i, sup, sub, ins, del 태그

설명을 안드리려 하였으나, 소개해 드리는 위의 인라인 태그들은 각각 글꼴을 부여할 수 있는 태그들입니다.

각각 (굵게, 기울이기, 윗쪽, 아래쪽, 언더라인, 가운데 라인)으로 생각해 주시면 됩니다.

<p>이 곳은 <b>1번째</b> 문단입니다.</p>
  <p>이 곳은 <i>2번째</i> 문단입니다.</p>
  <p>이 곳은 <sup>3번째</sup> 문단입니다.</p>
  <p>이 곳은 <sub>4번째</sub> 문단입니다.</p>
  <p>이 곳은 <ins>5번째</ins> 문단입니다.</p>  
  <p>이 곳은 <del>6번째</del> 문단입니다.</p>