Semantic Tag
기존 HTML 의 한계
•
웹 문서 구조를 표현하는 태그가 존재하지 않는다.
•
<div> 태그나 <table> 태그로 구조화하여 작성하였다.
•
때문에 HTML 페이지의 소스를 보면 문서 구조 파악이 불가능하다.
왜 문서 구조화가 중요할까?
•
검색 엔진이 좋아하는 웹 페이지 작성의 필요성이 대두되었다.
•
정보 탐색이 중요해졌으며, 사물인터넷으로 IT 장치들이 스스로 정보를 검색하는 시대가 왔다.
•
때문에 사용자가 만든 웹 페이지의 가치가 증가했으며, 탐색이 쉽도록 작성될 필요가 생겼다.
시맨틱 웹
•
웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹을 말한다.
◦
기존에는 <p>, <div>, <h1>, <h2> 등의 태그를 사용했기 때문에 문서의 구조나 의미 전달이 어려웠다.
•
시맨틱 태그는 문서의 구조와 의미를 전달하는 태그이다.
•
<header>, <section>, <article>, <main>, <summary>, <mark>, <time> 등이 있다.
시맨틱 태그
<header>
•
페이지나 섹션의 머리말을 표현한다.
•
페이지 제목, 페이지를 소개하는 간단한 설명이 담겨있다.
<nav>
•
하이퍼링크들을 모아 놓은 특별한 섹션이다.
•
페이지 내 목차를 만드는 용도이다.
<section>
•
문서의 장 혹은 절을 구성하는 역할을 한다.
•
<h1> 등을 사용하여 절 혹은 섹션의 주제를 기입한다.
<article>
•
본문에서 약간 벗어난 노트나 팁을 말한다.
•
신문, 잡지에서 주요 기사 옆 관련 기사, 삽입 어구로 표시된 논평 등을 예로 들 수 있다.
•
페이지의 오른쪽이나 왼쪽에 주로 배치된다.
<footer>
•
꼬리말 영역이다.
•
주로 저자나 저작권 정보가 쓰인다.
<figure>
•
책이나 보고서 등 본문에 삽입하는 사진, 차트, 삽화, 소스 코드등을 통상적으로 그림으로 표현한다.
<details>
•
시맨틱 블록 태그이다.
•
상세 정보를 담는 시맨틱 블록 태그이다.
<summary>
•
시맨틱 블록 태그이다.
•
<details> 로 구성되는 블록의 제목을 표현한다.
<mark>
•
시맨틱 인라인 태그이다.
•
중요한 텍스트임을 표시한다.
<time>
•
시맨틱 인라인 태그이다.
•
텍스트의 내용이 시간임을 표시한다.
<meter>
•
시맨틱 인라인 태그이다.
•
주어진 범위나 % 의 데이터의 양을 표시한다.
<progress>
•
작업의 진행 정도를 표시한다.
제거된 태그
<big>, <center>, <dir>, <font>, <tt>, <u>, <xmp>, <acronym>, <applet>, <basefont>, <frame>, <frameset>, <noframes>, <strike>
웹 폼
•
웹페이지에서 사용자 입력을 받는 폼을 말한다.
•
폼을 만드는 다양한 태그가 있으며, 이를 폼 요소라고한다.
폼 작성
<form action="웹서버 응용 프로그램의 URL"
enctype="데이터의 인코딩 타입"
method="GET|POST"
name="폼이름"
target="웹 서버 응용프로그램으로 부터 전송받은 데이터를 출력할 윈도우 이름">
...
</form>
HTML
복사
name 속성
•
폼의 이름을 지정한다.
action 속성
•
폼 데이터를 처리할 웹 서버 응용 프로그램의 이름이다.
•
submit 버튼이 눌리면 브라우저는 action 에 지정된 웹 서버 응용프로그램의 실행을 요청한다.
•
웹 서버 응용프로그램은 Java, JSP, PHP, C/C++ 등 다양한 언어로 작성한다.
method 속성
•
폼 데이터를 웹 서버로 전송하는 형식이다.
•
대표적인 전송 방식은 GET, POST 이다.
폼 요소의 종류
•
placeholder 속성으로 사용자가 입력할 데이터의 힌트를 줄 수 있다.
폼 요소 | 설명 |
<input type=”text”> | 한 줄 텍스트 입력 창 |
<input type=”password”> | 암호 입력을 위한 한 줄 텍스트 입력 창 |
<input type=”button”> | 단순 버튼 |
<input type=”submit”> | 웹 서버로 폼 데이터를 전송시키는 버튼 |
<input type=”reset”> | 입력된 폼 데이터를 초기화 시키는 버튼 |
<input type=”image”> | 이미지 버튼 |
<input type=”checkbox|radio”> | 체크박스와 라디오 버튼 |
<select> | 드롭 다운 리스트를 가진 콤보박스 |
<input type=”month|week|date|time|datetime-local> | 년, 월, 일, 시간 등의 시간 정보 입력 창 |
<input type=”number|range”> | 스핀 버튼과 슬라이드바로 편리한 숫자 입력 창 |
<input type=”color”> | 색 입력을 쉽게 하는 컬러 다이얼로그 |
<input type=”email|url|tel|search”> | 이메일, URL, 전화번호, 검색키워드 등 형식 검사 기능을 가진 텍스트 입력 창 |
<input type=”file”> | 로컬 컴퓨터의 파일을 선택하는 폼 요소 |
<button type=”button|reset|submit”> | 단순 버튼, reset, submit 버튼 |
<textarea> | 여러 줄의 텍스트 입력 창 |
<datalist>
•
데이터 목록을 가진 텍스트 입력창이다.
•
목록 리스트를 작성한다.
•
<option> 태그로 항목 하나를 표현한다.
형식을 가진 텍스트
•
<input type=”email”>
•
<input type=”url”>
•
<input type=”tel”>
•
<input type=”search”>
form 요소의 그룹핑
<form>
<fieldset>
<legend>회원 정보</legend>
...
</fieldset>
</form>
HTML
복사
HTML 에서의 색 표현
•
#rrggbb
•
8 비트 범위로 16 진수로 표기한다.
•
예시
