달력

4

« 2020/4 »

  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  

'시멘틱'에 해당되는 글 3

  1. HTML5 독타입
  2. 웹표준
  3. HTML5 시멘틱 태그


HTML5 독타입

독타입은 간단히 말하면 브라우저 혹은 다른 파서에게 지금 보고 있는 문서의 종류를 알려주는 수단입니다.

   

HTML5이전 독타입

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd>

HTML5 독타입

<!DOCTYPE html>

   

   

head 요소

HTML5이전 문자 인코딩 표시

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5 문자 인코딩 표시

<meta charset="UTF-8">

 

Posted by codedragon codedragon

댓글을 달아 주세요


웹표준

운영체제나 브라우저에 상관없이 같은 결과를 볼 수 있도록, W3C에서 권고한 표준안에 따라 웹 페이지를 만들어 사용하는 것을 말합니다.



   

웹표준 장점

  • 브라우저 간 호환성 증가
  • 마크업 용량 감소
  • 컨텐츠와 CSS 의 분리
  • 검색엔진에 대한 최적화
  • 웹 접근성 용이 등

   

   

   

* 마크업 언어(markup language)

태그등을 이용해 데이터 구조를 명시하는 언어 형태

   

   

* W3C(World Wide Web Consortium)

W3C는 월드 와이드 웹(www)을 위한 표준을 개발하고 장려하는 기관

http://www.w3.org/

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

HTML파일 인코딩 변경하기  (0) 2014.08.27
자바스크립트 소스 파일(.js) 생성 방법  (0) 2014.08.20
웹표준  (0) 2014.06.09
HTML5와 CSS3 사용의 장점  (0) 2014.06.05
HTML5 지원 API  (0) 2014.06.05
Tomcat 설정 및 Dynamic Web Project 생성  (0) 2014.06.05
Posted by codedragon codedragon

댓글을 달아 주세요

시멘틱 태그

페이지의 구조를 더 잘 나타내기 위해 새로운 태그 추가

태그

설명

header

페이지나 절의 헤더 영역을 정의

footer

페이지나 절의 푸터 영역을 정의

nav

페이지나 절의 내비게이션 영역을 정의

section

페이지의 논리적 영역 또는 내용의 그룹을 정의

article

하나의 글 또는 완결된 내용을 정의

aside

부차적인 또는 관련 있는 내용을 정의

meter

특정 범위 내의 측정 값을 나타냄

progress

어떤 목표까지의 진척도를 실시간으로 보여줌

hgroup

제목과 그에 관련된 부제목을 하나로 묶음

figure,figcaption

그림이나 비디오 같은 멀티미디어 콘텐츠에 캡션을 붙일 때

audio,video

멀티미디어 콘텐츠를 표시

embed

플러그인 콘텐츠 표시

mark

텍스트에 형광펜으로 칠한 것과 같은 강조 효과

time

날짜와 시간을 표시

ruby,rt,rp

루비 문자 표시

canvas

웹상에 그래픽을 표시

command

사용자 실행 명령어 표시

details

추가적인 정보나 사용자가 요청하는 정보 표시

datalist

사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 리스트

keygen

양식(form)을 서버로 전송할 때 한 쌍의 키를 만들어 private key(프라이비트 키)는 로컬에 저장하고 public key(퍼블릭 키)는 서버에 저장

output

수학적인 계산의 결과값을 표시

   

   

시맨틱 요소(Semantic Element) 또는 시맨틱 태그

의미 없는 <div> 태그의 사용보다 문서의 내용을 쉽게 이해할 수 있도록 의미를 가지는 새로운 태그 요소

태그

설명

header

사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함

hgroup

제목과 부제목을 묶어주는 역할

nav

사이트의 메뉴나 링크 같은 내비케이션 요소 포함

section

실제 문서 내용

article

문서 내용이 많을 경우 여러 개의 <article> 요소로 분할

aside

문서의 주요 내용 외의 내용들. 문서의 주영역 주변에 배치

footer

작성자 정보나 저작권 정보, 관련 문서 링크 등 부가 정보 배치

 

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

HTML5 지원 API  (0) 2014.06.05
Tomcat 설정 및 Dynamic Web Project 생성  (0) 2014.06.05
02.html-시멘틱 태그 작성  (0) 2014.05.20
01.html-시멘틱 태그  (0) 2014.05.20
HTML5 시멘틱 태그  (0) 2014.05.20
ch01-first / 01.html-Hello World  (0) 2014.05.17
Posted by codedragon codedragon

댓글을 달아 주세요