HTML5를 기준으로 HTML에서 자주 쓰이는 태그들과 그에 따른 속성들을 살펴보자.
<head>태그 안에서 쓰이는 설정
▶ 문자 인코딩 방식 설정
<meta charset=”utf-8”>
▶ DOCTYPE
해당 페이지가 어떤 페이지인지를 선언
<!DOCTYPE html>
▶ <meta>태그 속성
-
name="description" content="설명"
해당 페이지에 대한 설명을 정의해 놓는 속성으로 검색엔진에서 해당 데이터를 사용할 확률이 높다. -
name="keywords" content="코딩,웹사이트,html"
해당 페이지에 대한 키워드를 정의 -
name="author" content="gb"
해당 페이지를 작성한 사람의 정보를 표기 -
http-equiv="refresh" content="30"
해당 페이지를 자동으로 리프레쉬 시킴, 컨텐츠는 초단위 -
name="viewport" content="width=device-width, initial-scale=1.0"
모바일에 최적화된 페이지로 보여줄 수 있다. ( pc에서의 차이는 없다 )
의미론적 태그
-
<header></header>
해당 페이지를 대표하는 부분을 묶어주며 기능은없다. -
<footer></footer>
해당 페이지에 하단에 위치할 부분들을 묶어준다. -
<nav></nav>
해당 페이지의 컨텐츠들을 탐색할 때 쓰이는 네비게이션에 해당되는 부분들을 묶어준다. -
<article></article>
해당 페이지에서 본문에 해당되는 내용들을 묶어준다. -
<section></section>
하나의 의미론적 태그들을 섹션이라하며 여러개의 태그들을 섹션으로 묶어줄 수 있다.
a태그
텍스트 또는 이미지에 링크를 연결하여 클릭시 해당 URL로 이동할 수 있도록 해주는 태그
▶ <a>태그속성
-
target="_blank"
해당 링크가 새로운 탭에서 열리게 된다. -
title=""
해당 링크에 마우스를 올려놓았을 때 설명이 나온다.
ex) <a href=”https://www.google.com/” target=”_black” title=”구글”>GOOGLE</a>
GOOGLE
목록 태그
목록의 나열이 필요할 때 쓰이는 태그로, li태그는 ul 또는 ol태그의 자식태그로 쓰인다.
- <ul>
순서가 없는 리스트 - <ol>
순서가 있는 리스트 - <li>
각각의 목록태그
ex) ol-li
- 하나
- 둘
- 셋
<img> 태그
브라우저상에 해당 경로의 이미지를 출력해 주는 태그
▶ img태그 속성
-
src=""
이미지의 경로 -
alt=""
이미지가 깨지거나 불러오지 못한 경우 해당 이미지에대한 설명 -
title=""
마우스를 이미지에 올려놓았을 때 설명
ex ) <img src=”\assets\img\pexels\look-out.jpeg” alt=”망원경_alt” title=”망원경_title”>
<table> 태그
tr, th, td등의 태그들을 이용하여 테이블형태를 만들어 주는 태그, 현재는 CSS로 대부분 처리
▶ table태그의 의미론적 태그
-
<thead></thead>
테이블의 제목부분에 해당하는 부분을 지정해준다.
즉, thead로 묶인 <tr><td>항목들은 어느위치에 있던 가장 윗부분으로 배치된다. -
<tbody></tbody>
테이블의 내용부분에 해당하는 부분을 지정해준다. -
<tfoot></tfoot>
합계등의 정보를 표시해주는 부분을 지정해주는 태그로, 가장 아래쪽에 배치된다.
▶ table하위 태그인 td태그 속성
-
colspan="n"
열 합치기 -
rowspan="n"
행 합치기
Form태그
사용자로 부터 입력을 받아줄 수 있는 태그로, 여러개의 input에 대한 정보를 하나의 form태그로 관리하기 때문에 여러개의 form태그가 있을 수 있다.
▶ <textarea>속성
여러줄의 text입력 양식을 제공해주며, 아래 속성들을 통해 인풋창의 크기를 설정할 수 있다.
- cols="n"
-
rows="n"
ex) <textarea cols=”20” rows=”5”></textarea>
▶ <label></label>
폼태그 안에서 인풋데이터의 제목을 설정할 때 쓰는 태그로,
시각적인 변화는 없지만 html의 정보표기를 위해 사용한다.
-
for="태그의id"
input태그와 label태그를 연결시켜 주는속성으로,
레이블을 클릭하더라도 커서가 해당 인풋으로 인동된다.
▶ input태그 타입
-
type="number"
증감하는 숫자만 입력할 수 있는 입력형식제공
( min, max 속성이 있다. ) => 모바일의 경우 숫자판만 나오게 된다.
-
type="color"
색깔선택 인풋타입
-
type="date"
날짜선택 인풋타입
-
type="url"
인터넷주소만 입력가능한 인풋타입으로 모바일 키패드가 그에 맞춰 나오게 된다.
▶ input태그 속성
-
autocomplete="on" or "off"
브라우저에서 제공되는 자동완성 기능을 on/off시킬 수 있다. -
autofocus
포커싱(커서) 이동 -
pattern
정규 표현식을 지정할 수 있다. -
required
해당 input을 입력하지 않고 submit을 시도할 시 데이터를 보내지 않고 메시지를 띄워주는 속성
단, HTML에서 정표현식이나 required 등으로 데이터를 체크 했다 하더라라도,
HTML은 껍데기일 뿐 넘어오는 데이터를 신뢰하지 말자!
▶ 파일 전송
<input type=”file”>태그를 통해 파일을 전송할 수 있다.
단, 주의해야 할점은 파일을 전송하고자 할 때는 form태그의 속성을 method="post" enctype="multipart/form-data" 로 지정해 주어야만 한다.
또한 enctype을 멀티파트로 처리할 시 다른 데이터들을 받아오는 방식도 변경될 수 있음으로
해당 멀티파트를 처리하는 방식에 주의하도록 하자. )
▶ 추가
일반적으로 현재는 <font>태그는 잘 쓰이지 않는다. ( 디플리케이트 )
=> 현재 텍스트 작업은 css로 처리하는것을 권장하고 있다.