해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
이번에는 HTML lesson 7~10의 내용인 목록 및 표 태그, 이미지 및 미디어 지원 태그, 폼 태그, 공간 분할 태그에 대해 알아보겠습니다.
6. HTML5 Tag - List & Table
목록(List)
목록 태그는 내비게이션 메뉴를 만들 때 자주 사용되며, 중첩으로 사용할 수 있습니다.
순서가 없는 목록은 <ul> 태그를, 순서가 있는 목록은 <ol> 태그를 사용합니다.
type 어트리뷰트로 순서를 나타내는 문자를 지정할 수 있으며 가능한 값으로는 1, A, a, I, i 가 있습니다.
start 어트리뷰트로 리스트의 시작값을 지정할 수 있습니다.
reversed 어트리뷰트로 리스트의 순서값을 역으로 표현할 수 있습니다.
테이블(Table)
테이블 태그는 표를 만들 때 사용합니다.
<table>: 표를 감싸는 태그
<tr>: 행(table row)
<th>: 행 내부의 제목 셀(table heading)
<td>: 행 내부의 일반 셀(table data)
테이블 태그의 어트리뷰트는 다음과 같습니다.
border: 표 테두리 두께 지정
rowspan: 해당 셀이 차지하는 행의 수 지정
colspan: 해당 셀이 차지하는 열의 수 지정
7. HTML5 Tag - Image & Multimedia
이미지
<img> 를 사용하며, 어트리뷰트는 다음과 같습니다.
src: 파일 경로
alt: 파일이 없을 경우 표시되는 문장
width,height: 이미지 사이즈 - css에서 지정하는 것이 일반적
미디어
<audio> 태그는 HTML5에서 새롭게 추가 되었으며, 어트리뷰트는 다음과 같습니다.
src: 음악 파일 경로
preload: 재생 전 음악 파일을 모두 불러올 것인지 지정
autoplay: 자동 재생 개시할 것인지 지정
loop: 반복 재생할 것인지 지정
controls: 재생 도구 표시 여부 지정
웹 브라우저 별로 지원하는 음악 파일 형식이 다릅니다.
파일 형식 차이를 해결하기 위해 <source> 를 사용합니다.
<audio controls>
<source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
<source src="assets/audio/Kalimba.ogg" type="audio/ogg">
</audio>
비디오
<video> 태그도 HTML5에서 새롭게 추가 되었으며, 어트리뷰트는 다음과 같습니다.
poster: 동영상 준비 중 표시될 이미지 경로
width,height: 동영상 사이즈 지정
그 외의 어트리뷰트는 <audio> 속성과 동일합니다.
<audio>와 마찬가지로 <source>를 사용해 브라우저 별 형식 차이 문제 해결할 수 있습니다.
8. HTML5 Tag - Forms
form
사용자가 입력한 데이터를 수집하기 위해 사용됩니다.
input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함하며 어트리뷰트는 다음과 같습니다.
action: 입력 데이터가 전송될 URL 지정
method: 입력 데이터 전달 방식 지정(GET or POST)
GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타냅니다. HTTP request method라고 합니다.
GET
해당 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식입니다.
- http://jsonplaceholder.typicode.com/posts
?userId=1&id=1
전송 URL 바로 뒤 ?’를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가합니다.
1개 이상의 전송 데이터는 ‘&’로 구분합니다.
URL에 전송 데이터가 노출되기 때문에 보안 이슈가 있으며 전송 데이터의 한계가 있습니다.
REST API에서 GET 메소드는 리소스의 조회를 요청합니다.
POST
해당 방식은 입력 데이터를 Request Body에 담아 보내는 방식입니다.
- http://jsonplaceholder.typicode.com/posts
URL에 전송 데이터가 노출되지 않지만 GET 방식에 비해 속도가 느립니다.
REST API에서 POST 메소드는 특정 리소스의 생성을 요청합니다.
input
form 태그 중에서 가장 중요한 태그며, 사용자로부터 데이터를 입력받기 위해 사용됩니다.
type 어트리뷰트에 의해 종류가 구분됩니다.
<form> 내에 존재해야 데이터를 전송할 수 있으나 ajax 사용 시 <form> 내에 존재하지 않아도 됩니다.
서버에 전송할 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로 하여 전송됩니다.
select
여러 목록에서 여러 개의 항목을 선택할 때 사용됩니다.
서버 전송할 데이터는 select 요소의 name 어트리뷰트를 키로, option 요소의 value 어트리뷰트를 값으로 하여 전송됩니다.
textarea
여러 줄의 글자를 입력할 때 사용됩니다.
button
클릭할 수 있는 버튼을 생성합니다.
<input type="button"> 과 달리 텍스트나 이미지 같은 콘텐츠를 사용할 수 있습니다.
type 어트리뷰트를 반드시 지정하는 것이 바람직하며 button, reset, submit을 지정할 수 있습니다.
오래된 IE를 지원해야 한다면 input 태그를 사용하는 것이 바람직합니다.
fieldset / legend
fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용합니다.
legend 태그는 <fieldset> 내에서 사용하며 그룹화된 fieldset의 제목을 정의합니다.
9. 레이아웃을 구성하기 위해 공간을 분할하는 태그
웹 페이지의 레이아웃을 구성하기 위해 공간을 분할할 수 있는 태그는 div, span, table 가 있습니다.
모던 웹에서는 주로 div 를 사용하여 레이아웃을 구성합니다.
하지만 어떠한 의미를 가지고 있지 않기에 시맨틱 태그인 header, nav, aside, section, article, footer 등을 사용하는 것이 권장됩니다.
여기까지 HTML에 대해 열심히 정리해보았습니다.
다음은 CSS에 대해 살펴보겠습니다.