HTML5 개념 잡기(3)

<주요 시맨틱 태그>

영역 구분 태그

<header> : 사이트의 머리말, 소개 영역

<nav> : 사이트의 메뉴가 포함되는 영역

<section> : 사이트 콘텐츠 영역

<article> : 문서의 내용 표시하는 실제 콘텐츠 태그

<aside> :  사이트와 독립적으로 떨어져 표현되는 영역

<footer> : 사이트 하단의 제작자의 정보 표시 영역

가장 기본적인 주요 태그들만 몇개 적어봤다. 

이해를 돕기위해 하단에 이미지로 영역을 나뉘어 봤으니 참고하면 좋겠다.

html5 기본 구조 영역 태그

기존에 주로 사용하던 div 태그는  HTML5에서도 사용하는데 주로 구역을 나누거나 컨텐츠의 원하는 곳에 CSS를 사용하여 스타일을 적용하고자 할 때 사용한다.  

참고로 내부 스타일시트(CSS)는 </head> 태그 앞에 <style> css 내용 </style>을 삽입하면 된다.

이밖에도

<table> 테이블을 만들 때 사용

<figure>설명 붙일 대상 / <figcaption> 태그로 정의한 대상의 설명글

<mark> 문장의 하이라이트 표시 형광펜 효과

<progress> 프로그래스바 표시 .... 

등 여러 태그들이 있다.

---

지금까지 HTML5에서 사용되는 몇 가지 주요 태그들을 간단히 확인했다.

그럼 이제 모든 브라우저에서 정리된 사이트를 볼 수 있는걸까? 아쉽게도 그렇지 않다. 

크롬을 비롯한 대부분의 브라우저들은 이를 지원하고 있으나 일부 오래된 브라우저에서는 지원이 안된다.

인터넷 익스플로러의 경우 최신 버전 11 또는 윈도우 10의 Microsoft Edge는 가능하나 익스플로러 8.0 이하 버전은 안된다. 

그럼 OS 업데이트가 불가한 환경에서는 어떻게 할까?

web browser

아하! 방법을 찾아보니 자바스크립트를 이용한 방법이 있었다. 

JS 폴더에 HTML5 Shiv 라는 파일을 저장하면 된다고 한다.

아래와 같이 html5 shiv.js 는 IE 8.0이하 버전에서 시맨틱태그를 지원하지 않을 때 사용된다.

그리고 위의 태그를 보면 respond.js 라는 파일이 있는데 이 파일은 미디어 쿼리의 분석을 가능하게 해주는 자바스크립트 파일이다. 

위와 같이 if절을 사용한 것을 조건부 주석이라고 한다.

<입력 폼을 구성하는 웹 폼 태그>

(Web Form Tag) 웹 폼 태그란? 

사용자가 정보를 입력하기 위한 방법들을 표현하는 것으로 예를 들어 입력란, 라이오버튼, 체크박스, 버튼 등으로 생각하면 되겠다.

<form>...</form> 으로 정의한다.

* 폼 태그를 사용하지 않는 경우도 있는데 그 때는 <div>로 영역을 구분하고 버튼 등을 이용해 페이지 이동을 한다. 이 때 사용하는 자바스크립는 다음과 같다.

<script>

$(doucument).ready(funtion(){

$("button").click(funtion() //버튼 역할});

});

</script>

폼 태그의 종류는 대략 다음과 같다.

<input>: 이름을 입력하세요.

<input type="checkbox"> : 해당되면 체크

<select>:  비행기 기차

<input type="button"> : 

<textarea>: 

내용

<datalist>: html5에 추가된 폼 태그, 미리 정의된 목록값을 보여주는 것으로 표현하면 아래와 같다.

음식 선택 

다음에는 좀 더 자세한 웹 폼 태그에 대해 정리해 보려고 한다.