[웹 개발] HTML 태그 (2)

의미가 없는 컨테이너 요소

태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그입니다.

스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용됩니다.

이런 의미 없는 태그의 사용빈도는 매우 높습니다.

그 이유는 html 태그들은 문서를 웹에 나타내기 위해 제작되어 기본적으로 문서에

최적화되어있는의미를 지니는데,

현재 웹의 형태는 문서 형태에서 많이 벗어났기 때문입니다.

다행히 HTML 버전이 업그레이드되면서 웹에 알맞은 태그들이 많이 생겼습니다.

가장 대표적으로 많이 쓰이는 의미가 없는 태그는 <div>, <span>입니다.

 

<div>태그와 <span>태그

div(division) 태그는 블록 레벨 태그입니다.

블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현합니다.

반면, span 태그는 인라인 레벨 태그입니다.

인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들입니다.

 

이전에 포스팅한 <p>는 블록 레벨 태그이며,

그 안에서 텍스트를 꾸며주는 <b>, <i>, <u>, <s>는 모두 인라인 레벨 태그입니다.

 

<ul>

ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용합니다.

<ul>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용합니다.

 

<ol>

ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용합니다.

<ol>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용합니다.

 

<dl>태그

dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다.

<dl>은 위에서 언급한 <ul>, <ol>과는 구조가 조금 다릅니다.

<ul>, <ol>은 항목을 단순히 나열하는 구조지만,

<dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다.

• <dt> 용어를 나타내는 태그
• <dd> 용어에 대한 정의 또는 설명을 나타내는 태그

<img>

<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그 입니다.

 

src 속성

<img>의 필수 속성으로 이미지의 경로를 나타내는 속성입니다.

 

alt 속성

이미지의 대체 텍스트를 나타내는 속성입니다.

대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성입니다.

src 속성과 더불어 반드시 들어가야 하는 속성입니다.

 

width/height 속성

이미지의 가로/세로 크기를 나타내는 속성입니다.

값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됩니다.

width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인 측면에서 좋습니다.

width/height 속성이 없으면 이미지는 원본 크기대로 노출되며,

둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경됩니다.

반면 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경됩니다.

 

상대경로와 절대경로

src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있습니다.

상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고,

절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다.

 

이미지 파일 형식

• gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식
• jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않는다.)
• png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식

표의 구성 요소

표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있습니다.

표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다.

• <table> : 표를 나타내는 태그
• <tr> : 행을 나타내는 태그
• <th> : 제목 셀을 나타내는 태그
• <td> : 셀을 나타내는 태그

하나의 <table>은 하나 이상의 <tr>로 이루어져 있으며,

<tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 됩니다.

표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 됩니다.

 

표의 구조와 관련된 태그

표가 복잡해지면 표를 해석해서 음성으로 전달해야 하는 스크린 리더기와 같은 보조 기기를 통해서는 표의 내용을 이해하는 것이 더욱 어려워질 것입니다.

따라서 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 합니다.

• <caption>: 표의 제목을 나타내는 태그
• <thead>: 제목 행을 그룹화하는 태그
• <tfoot>: 바닥 행을 그룹화하는 태그
• <tbody>: 본문 행을 그룹화하는 태그

type="text"

주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용합니다.

type="text"에는 placeholder 속성이 존재합니다.

placeholder 속성은 사용자가 입력하기 전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표현할 수 있습니다. 

 

type="password"

암호와 같이 공개할 수 없는 내용을 입력할 때 사용합니다.

화면에는 type="text"와 같게 나타나지만 실제로 입력할 때 값을 노출하지 않습니다.

 

type="radio"

라디오 버튼을 만들 때 사용합니다.

라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 합니다.

 

type="checkbox"

체크박스를 만들 때 사용합니다.

체크박스는 중복 선택이 가능합니다.