[HTML] 3장: 실무에서 자주 사용하는 HTML 필수 태그 다루기 (2)

개요

이번에 공부해볼 주제는 HTML 태그들이다. 그동안 야매로 HTML을 다뤄봤기 때문에 몇몇 태그는 익숙하지만, 제대로 된 사용법이나 의도까지 완벽하게 이해한 것은 아니었다. 그래서 이번 기회에 정식으로 학습하게 되어 기쁘다. 현재 보고 있는 책에서 3장이 HTML을 다루는 마지막 장인데, 태그 사용법을 모두 익히면 HTML로 웹사이트를 구성하는 기본적인 과정은 마무리된다고 할 수 있다.

3장은 두 번에 나누어 공부할 예정인데, 전반부는 기본적인 문서 작성과 관련된 내용을 다루고, 후반부는 표, 형식, 그리고 멀티미디어처럼 조금 더 심화된 주제를 포함하고 있다. 이를 통해 HTML의 기초부터 심화된 활용까지 체계적으로 이해할 수 있을 것으로 기대된다.

 

폼 구성하기

form 태그

폼 양식을 의미하는 태그. action과 method 속성을 함께 사용한다.
ex) <form action-"서버url" method="get 또는 post"></form>

#action 속성

폼 요소에서 사용자와 상호작용으로 입력받은 값을 전송할 서버 URL 주소.

#method 속성

입력받은 값을 서버에 전송할 방식. get 또는  post를 입력한다.

input 태그

 아이디, 비밀번호 등 입력받는 요소를 생성할 때 사용한다. type 속성은 필수, name, value는 선택이다.
ex) <input type="종류" name="이름" value="초기값">

#type 속성

#name 속성

입력 요소의 이름을 작성한다.

#value 속성

입력 요소의 초기값을 작성한다.

label 태그

form 태그 안에서 상호작용 요소에 이름을 붙일 때 사용한다. 웹 접근성 향상을 위해 필수로 사용하길 권장된다.

fieldset과 legend 태그

form 태그 안에 사용된 다양한 상호작용 요소를 그룹지을 수 있다. 

fieldset 태그 : 박스 모양의 테두리가 생긴다.

legend 태그 : 그룹의 이름을 붙인다.

textarea 태그

여러 줄의 입력요소를 생성할 때 사용한다. input태그와 다르게 초기값을 콘텐츠 영역에 정의한다.

select, option, optgroup 태그

select 태그 : 콤보박스를 생성한다.

option 태그 : 콤보박스 항목 하나를 추가한다.

optgroup 태그 : option 태그들을 그룹으로 묶는다.

#size 속성

콤보박스에서 화면에 노출되는 항목 개수를 지정한다. 기본값은 1이다.

#multiple 속성

콤보박스에서 여러값을 동시에 선택할 수 있게 한다. 사용자는 Ctrl키와 함께 클릭하면 여러 항목을 선택할 수 있다.

#selected 속성

기본 선택 항목을 변경할 수 있다. 

button 태그

input 태그 대신 별도의 button 태그를 사용할 수 있다. input 태그에 비해 더 많은 유연성을 제공한다.

<button type="종류">버튼 내용</button>

type 속성값 - submit : 서버 전송 목적
                    - reset : 입력 내용 초기화
                    - button : 단순 버튼

폼 관련 태그에서 사용할 수 있는 추가 속성

#disabled 속성

상호작용 요소를 비활성화한다. input, textarea, select, button 태그 등에서 사용 가능하며, 사용시 회색으로 변한다.

#readonly 속성

상호작용 요소를 읽기 전용으로 변경한다.

#maxlength 속성

입력할 수 있는 글자 수를 제한한다.

#checked 속성

요소를 선택된 상태로 표시한다. checkbox나 radio 등에만 사용 가능하다.

#placeholder 속성

입력 요소에 어떤 값을 입력하면 되는지 힌트를 적는 용도로 사용된다.

표 만들기

table 태그

표를 생성할 때 사용하는 태그. HTML5 이전에는 summary 속성을 사용했지만, 더 이상 공식적으로 지원하지 않는다.

caption 태그

표의 제목을 지정하는 태그. 표를 만들 때 반드시 사용해야 한다. table에서 가장 처음 사용하는 태그이다.

tr 태그

table row의 약자로, 하나의 행을 생성한다. 

th, td 태그

table header와 table data는 열을 생성할 때 사용한다.

th 태그 : 표에서 제목을 나타내는 열 생성.

td 태그 : 일반적인 데이터를 나타내는 열 생성.

여기까지의 태그들만을 사용하면 위와 같이 테두리 없는 상태로 출력된다.

rowspan과 colspan 속성

행과 행을 병합할 때, 열과 열을 병합할 때 사용한다. td 태그의 병합을 시작할 왼쪽/위쪽 셀에서 병합을 원하는 셀 개수를 입력함으로써 사용한다.

thead, tfoot, tbody 태그

행을 묶어 그룹화시키는 태그들이다. 

thead : 헤더 영역에 해당하는 행을 묶는다.

tfoot : 푸터 영역에 해당하는 행을 묶는다.

tbody : 본문에 해당하는 행을 묶는다.

이 태그들은 html 문서의 외관상 차이보다는 웹 접근성 향상을 위해 사용된다. 표가 여러 장에 걸쳐 있더라도, 이 태그를 통해 표가 어떤 표인지 쉽게 파악할 수 있다.

col과 colgroup 태그

열을 그룹화할 때 사용된다.

col 태그 : 하나의 열을 그룹화한다.

colgroup 태그 : span 속성과 함께 사용해 2개 이상의 열을 그룹화한다.

caption 태그 다음, tr 태그 이전에 미리 사용된다. width 속성을 사용하면 열의 너비를 지정할 수 있다.

scope 속성

웹 접근성 향상을 목적으로 사용하는 속성이다. th 속성에서만 사용 가능하다.

멀티미디어 설정하기

audio 태그

오디오 파일을 손쉽게 삽입할 수 있게 해준다.

<audio src="오디오 파일 경로" controls></audio>

 controls 속성을 통해 오디오 컨트롤 패널이 웹 브라우저에 노출될 수 있도록 할 수 있다.

video 태그

비디오 파일을 손쉽게 삽입할 수 있게 해준다.

<video src="비디오 파일 경로" controls></video>

source 태그

audio 태그와 video 태그에서 리소스의 경로와 미디어 타입을 명시하는 데 사용한다. 필수는 아니지만, 함께 사용하는 것이 권장된다. 웹 접근성을 고려하면 특정 웹 브라우저에서 지원하지 않는 포맷에 대한 예외처리가 가능하기 때문이다.

웹 페이지 구조를 설계하는 시멘틱 태그

시맨틱 웹 : 더 의미있게 웹 페이지를 설계하는 웹 트렌드. 이 트렌드에 의해 시맨틱 태그를 사용하기 시작했다.

header 태그

웹페이지에서 헤더 영역을 구분하는 데 사용된다.

헤더 영역은 웹사이트의 최상단이나 좌측에 위치하고 로고, 검색, 메뉴와 같은 요소들을 포함한다.

ex) 네이버 검색창과 그 아래의 네비게이터.

nav 태그

웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는 데 사용된다.

ex) 네이버 -> 카페, 블로그, 쇼핑 등으로 이동 가능한 네비게이터 바, 블로그의 목차 등.

section 태그

웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용한다. 주로 hn 태그 중 하나를 포함한다.

article 태그

웹 페이지에 독립적인 영역을 구분할 대 사용한다. 

section 태그와의 차이점 : 페이지 안에서 관련이 있으면 section, 없으면 article. 

ex) 네이버의 로그인 창.

aside 태그

주력 내용(section)이나 독립적인 내용(aside) 모두 아닐 때 사용한다.

footer 태그

웹페이지의 푸터 영역을 구분할 때 사용한다. 일반적으로 웹페이지의 최하단에 있고 저작권 정보, 연락처, 사이트 맵 등의 요소를 포함한다.

main 태그

웹 페이지의 주요 내용을 지정할 때 사용한다. 반복해서 등장하는 요소를 포함해선 안된다. 또한, article, aside, footer, header, nav 태그의 하위에 포함해서도 안된다.

태그 종류에 상관없이 사용하는 글로벌 속성

• class : 요소에 클래스 값을 지정한다. CSS에서 클래스 선택자로 활용한다. 같은 클래스는 여러 요소가 중복 가능하다.
• id : 요소에 아이디 값을 지정한다. CSS에서 아이디 선택자로 활용한다. 중복 불가능하다.
• style : 요소에 인라인 스타일을 지정한다.
• title : 요소에 추가 정보를 지정한다. 툴팁으로 추가정보가 표시된다.
• lang : 요소에 사용한 텍스트의 언어 정보를 지정한다. 일반적으로는 html 태그에 작성한다.
• hidden : 요소를 화면에서 감춘다.
• data-* : 사용자가 임의의 속성을 만들 수 있다.

마무리

오늘 배운 내용들은 당장은 직접 활용할 일이 많지 않겠지만, 언젠가 필요할 때 다시 찾아보며 손쉽게 사용할 수 있는 밑거름이 될 것이다. 만약 HTML로 문서 작성이 익숙해진다면, 그때는 마치 내 손끝에 닿은 일상처럼 자연스럽게 다룰 수 있게 되겠지. 지금은 그저 작은 씨앗을 심는 과정일 뿐, 미래의 어느 날 이 지식이 내 몸의 일부처럼 익숙해지기를 기대한다.

사실, 처음엔 웹 디자인을 배운다고 생각했지만, 알고 보니 HTML은 그보다 더 근본적인 역할을 맡고 있었다. CSS가 웹의 미학을 담당한다면, HTML은 그 토대를 쌓아가는 과정, 정보의 흐름을 조직하고 접근성을 높이는 기초 작업이었다는 걸 알게 되었다. 이런 깨달음은 마치 새로운 세상을 들여다보는 창문 같았다.

비록 모든 것을 외울 수는 없겠지만, 한 걸음씩 쌓아가는 과정에서 언젠가 이 모든 지식이 빛을 발할 순간을 기대하며 오늘의 배움을 여기에 잠시 남겨 둔다.