HTML5 에서는 새롭게 " 시맨틱 태그 " 라고 하는 것이 생겨 났습니다.
- 시맨틱 태그 : 컴퓨터가 사람이 이해하는 것처럼 태그를 이해할 수 있도록 지원해주는 것
1. 시맨트 태그를 이용한 문서 구조
2. 시맨트 태그 종류
- <header> : 머릿말 ( <head></head> 와 다름. )
- <hgroup> : 제목과 부제목을 묶음.
- <nav> : 문서 안 혹은 다른 문서로 링크하기 위한 내비게이션 링크를 표현
- <article> : 사이트의 내용 , 코멘트 , 콘텐츠 등 표시할 때 사용
- <section> : 이 태그 이용시 웹창 배포 불가능
- <aside> : 광고나 링크가 나온 사이트 바 를 표시할 때 사용
- <footer> : 저작권 정보 혹은 제작자 정보 입력
- <figure> 와 <figcaption> : 그림이나 도표 , 소스 코드등에 설명글을 붙일 수 있다.
- <mark> :텍스트에 강조 표시를 할 수 있다.
- <time> : 날짜와 시간 정보를 기록
- <address> : " 주소입력 x " 제작자 이름 , 웹페이지 주소 , 메일주소 등 연락처 정보
- <input> : 여러가지 type을 지정하여 사용할 수 있다.
웹 개발 편집기
1. Notepad++
- 한번도 사용해 보진 않았지만 많이 알려진 웹 개발 편집기 입니다.
- 다운로드는 [ 자료 다운로드 ]에 올리겠습니다.
2. Chrome dev editor
- 2년동안 사용하던 프로그램 입니다.
- Chrome 의 확장 프로그램으로 설치가 매우 간편합니다.
- 다운로드는 [ 자료 다운로드 ]에 올리겠습니다.
3. Brackets
- 최근 사용하게 된 프로그램 입니다.
- Adobe에서 개발된 프로그램 입니다.
- 여러 플러그인을 설치하여 사용할 수 있으며 플러그인 중 ftp를 사용할 수 있는 플러그인이 있습니다.
- html , css 등 소스코드가 수정이 되면 실시간으로 변화를 관찰할 수 있습니다.
- 다운로드는 [ 자료 다운로드 ]에 올리겠습니다.
4. Dream Weaver
- 한번도 사용해 보진 않았지만 많이 알려진 웹 개발 편집기 입니다.
- 다운로드는 [ 자료 다운로드 ]에 올리겠습니다.
'엄청 과거 이야기 > HTML 강좌' 카테고리의 다른 글
| [ 본격 ] input 태그에 대하여 ( email , button , checkbox ) (0) | 2015.12.20 |
|---|---|
| [ 본격 ] input 태그에 대하여 ( text , password , submit ) (0) | 2015.12.17 |
| [ 기초 ] css, js 링크 (0) | 2015.10.26 |
| [기초] HTML5 에 대한 설명과 기본 구조 (1) | 2015.10.21 |