Home » 웹 표준 -3. HTML5 와 CSS3

웹 표준 -3. HTML5 와 CSS3

3.1. HTML5(HyperText Markup Language 5) 개요

  • 웹 표준 기관인 월드 와이드 웹 컨소시엄(W3C)이 만들고 있는 차세대 웹 언어 규격이다.
  • HTML5는 문서 작성 중심으로 구성된 기존 표준에 그림, 동영상, 음악 등을 실행하는 기능까지 포함시켰다.
  • HTML5를 이용해 웹사이트를 만들면 국내 전자상거래에서 많이 쓰이는 액티브X, 동영상이나 음악재생에 필요한 어도비 플래시와 같은 플러그인 기반의 각종 프로그램을 별도로 설치할 필요가 없어진다.
  • HTML5는 모바일 환경에서 아이폰이나 안드로이드 등의 운영체제를 가리지 않고 모두 호환된다.

3.2. HTML5에서 추가 된 태그

폼 태그(Forms Tag)

태그 설명
< datalist > 옵션 목록 태그(List of Predefined Options)
< keygen > 키 쌍 생성 태그(Key-pair Generator)
< meter > 스칼라 게이지 태그(Scalar gauge)
< output > 계산 결과 태그(Calculated Result)
< progress > 진행률 표시기 태그(Progress indicator)

텍스트 태그(Text-level semantics Tag)

태그 설명
< bdi > 양방향 분리 태그(Bi-directional Isolate)
< mark > 표시 텍스트 태그(marked text)
< rp > 루비 괄호 태그(Ruby parenthesis)
< rt > 루비 텍스트 태그(Ruby Text)
< ruby > 루비 태그(ruby)
< time > 날짜 또는 시간 태그(Date or Time)
< wbr > 워드 브레이크 태그(Word Break)

컨텐츠 그룹화 태그(Grouping content Tag)

태그 설명
< figcaption > 그림 캡션 태그(Figure Caption)
< figure > 선택 캡션 그림 태그(Figure with optional caption)

임베디드 컨텐츠 태그(Embedded content Tag)

태그 설명
< audio > 오디오 태그(Audio stream)
< canvas > 그래픽 그리기 태그(Dynamic Graphics Drawing Area)
< embed > 개체 포함 태그(Embedded Object)
< source > 미디어 소스 태그(Media source)
< track > 미디어 요소 트랙 태그(tracks for media elements)
< video > 동영상 스트림 태그(Embedded Video Stream)

섹션 태그(Sections Tag)

태그 설명
< article > 구조 태그(Article)
< aside > 사이드 바 태그(Article)
< footer > 페이지의 바닥 글 태그(Footer of the page)
< hgroup > 그룹 제목 태그(Heading group)
< nav > 네비게이션 태그(navigation)
< section > 문서 섹션 태그(Document Outline Section)

대화형 태그(Interactive elements Tag)

태그 설명
< command > 명령 지정 태그(User Action Control)
< details > 추가적인 설명 태그(On-demand Control)
< summary > 세부 요약 태그(Summary of Details)

추가 된 태그 중 자주 사용 되는 태그 및 속성
<audio> : 음악이나 다른 오디오 스트림과 같은 소리를 들려준다.

속성 설명
src 미디어 주소 제공
autoplay 미디어 자동 재생
loop 미디어 반복 재생
controls 사용자 에이전트가 제공하는 기본 컨트롤러를 사용

<canvas> : 스크립트를 제공하여 그래프, 게임 그래픽, 기타 비주얼 이미지를 그릴 수 있다. 좌표 공간에서의 크기를 조절하는 두 가지 속성은 유효한 양의 정수 값이어야 하며, canvas 요소에 동적인 작업을 하려면 스크립트 언어를 사용해야 한다.

속성 설명
width canvas의 너비 지정
height canvas의 높이 지정

<command> : 사용자가 실행할 수 있는 명령을 나타낸다.

속성 설명
type 명령의 종류를 정의. radio, checkbox, command를 지정하며, 기본 값은 command이다.
label command의 이름을 지정하며 값으로 빈 문자열을 쓸 수 없음
title 사용자에게 설명이나 힌트 제공
icon command 요소에 보일 아이콘 지정
disabled 사용 불가능함을 나타냄
checked type 속성이 checkbox나 radio일 때 checked 속성을 선언하면 선택 된 상태로 나타난다.
radiogroup type 속성이 radio일 때 토글 된 커맨드의 이름을 지정할 수 있는 속성

<datalist> : input 요소에 대한 미리 정의 된 옵션 집합을 나타낸다.

<details> : 사용자가 보거나 숨길 수 있는 추가정보를 지정하고 열고 닫을 수 있는 대화형 도구를 만드는데 사용 되며, summary 요소는 제목을 지정하며 세부 정보보기와 숨기기 클릭이 가능하다.

태그 설명
< open > 세부 사항을 노출

<embed> : HTML이 아닌 외부 어플리케이션이나 대화형 컨텐츠를 포함 할 때 사용 된다.

속성 설명
src 포함하고자 하는 외부 자원의 주소 지정
type 인스턴스화 할 플러그인의 유효한 MIME 타입 지정
width 요소의 너비 정의
height 요소의 높이 정의

<figcaption> : 부모 요소인 figure 요소의 캡션이나 제목을 정의한다.

<figure> : 일러스트레이션, 도표, 사진, 코드 등과 자체 포함된 내용을 지정한다. 이 요소는 보통 문서의 흐름에서 단일 요소로 참조되어 제거되더라도 문서의 주된 흐름에 영향을 미치지 않는다.

<hgroup> : 섹션의 제목을 나타냅니다. 부제목이나 태그영역 h1 ~ h6 요소들을 그룹 짓기 위해 사용한다.

<keygen> : 암호화를 위한 개인 키와 공개 키 쌍을 만들어 낸다. 레이블을 붙일 수 있으며, 폼을 전송할 때 함께 전송된다.

속성 설명
autofocus 페이지를 로드할 때 요소가 자동으로 포커스를 받음
challenge 값과 함께 전달 되는 문자열
disabled 값을 제출하지 않음
form 명시적으로 폼 소유자를 지정
keytype 키의 유형을 정의
name 폼 제출 시에 사용되는 폼 컨트롤의 이름을 나타냄

<mark> : 문서 내에서 다른 문맥과의 관련성을 표시하기 위해 참조 목적으로 마킹, 혹은 하이라이팅 한 텍스트 집합을 나타낸다.
ex) 아 배고파. 치킨이 먹고 싶어.

<meter> : 알려진 범위 내에서의 스칼라 측정 또는 분포 비율을 나타낸다.

속성 설명
value 게이지에 표시하는 측정 값
min 범위의 최소 값
max 범위의 최대 값
low ‘낮음’ 범위의 값
high ‘높음’ 범위의 값
optimum ‘최적’ 범위의 값
form 명시적으로 폼 소유자 정의

ex)


그림 3. meter 예

<output> : 계산의 결과를 나타낸다.

속성 설명
for 계산의 결과와 계산에 사용되었거나 계산에 영향을 미친 값을 나타내는 요소를 명시적으로 연결
form 폼 소유자와 요소를 명시적으로 연결
name 폼 제출 시에 사용되는 폼 컨트롤의 이름

<progress> : 작업의 진행 상황을 나타냄

속성 설명
value 진행 된 작업의 값
max 최대 작업량
form 명시적으로 폼 소유자 정의

<source> : video 요소 및 audio 요소와 같은 미디어 요소에서 사용할 수 있는 대체 미디어 자원을 정의한다.

속성 설명
src 미디어 자원 주소 정의
type 사용할 수 있는 타입의 자원인지 확인
media 사용할 수 있는 타입의 자원인지 확인

<track> : video 요소 및 audio 요소와 같은 미디어 요소에 대한 텍스트 트랙을 지정한다. 이 요소는 자막 파일이나 텍스트를 포함하는 다른 파일을 지정하는 데 사용된다.

속성 설명
kind 텍스트 트랙의 종류 정의
src 텍스트 트랙 데이터의 주소 정의
srclang 텍스트 트랙 데이터의 언어 정의
label 사용자가 읽을 수 있는 트랙 제목 정의
default 기본 트랙 정의

<video> : 비디오나 영화를 재생하는데 사용된다.

속성 설명
src 미디어 자원의 주소를 제공
poster 비디오를 사용할 수 없을 때 보여줄 이미지
preload none, metadata, auto 키워드를 지정하여 미디어의 다운로드 상태 결정
autoplay 미디어를 자동 재생
loop 미디어를 반복 재생
audio 오디오 채널을 제어
controls 사용자 에이전트가 제공하는 기본 컨트롤러를 사용
width 미디어의 가로 크기를 정의
height 미디어의 세로 크기를 정의

3.3. CSS3 개요

  • 앞서, 스타일 시트의 표준안이 바로 CSS라고 했는데, CSS3는 가장 최신의 스타일 시트 표준안으로 기본적인 개념과 사용법은 같다. 다만, 이전 CSS2와의 가장 큰 차이점은 CSS3가 모듈로 분할이 되어있다는 점이다.
  • CSS3는 text, fonts, color, backgrounds & borders, transforms, transitions, animations와 같은 종류의 모듈들을 추가로 개발되었고, 기존의 CSS2가 갖지 못했던 화려하고 역동적인 면모를 추가하여 포토샵과 자바스크립트 및 서버 측 기술에만 완전히 의존하던 영역들을 개척했다.
  • 상자의 크기에 따른 말 줄임 표시, 투명한 배경, 그림자 효과, 둥근 모서리, 그라디언트, 도형의 회전과 비틀기, 애니메이션 효과 등이 가능해진 것이다. 특히 그래픽 디자인에만 의존하던 영역이 CSS3만으로도 상당부분 가능해지면서 웹 사이트의 성능 향상에 크게 기여할 수 있게 되었다.

3.4. CSS3를 이용한 간단한 예제

[week1/css3.html]

번호 설명
(1) 텍스트에 그림자 효과를 지정. (x, y축의 거리 지정 / 진한 정도 / 색상 지정)

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week1메뉴 -> CSS3


그림 4. CSS3를 이용한 텍스트 그림자 효과

자주 쓰이는 CSS 속성 목록

속성 설명
color 글자 색상 설정 (ex) color:red or color:#FFFFFF
font-size 글자 크기 설정 (ex) font-size:15pt
text-align 글자 정렬하기 (ex) text-align:center or left or right
background-color 배경 색 설정 (ex) background-color:red or #FFFFFF
background-image 배경 이미지 설정 (ex) background-image:url(“image.png”);
width 가로 길이 설정 (ex)width:100px
height 세로 길이 설정 (ex)height:100px
padding 여백 설정(바깥쪽) (ex)padding:5px 10px 5px 10px
top, right bottom, left 순서이며, padding-top, padding-left 등으로 사용 할 수도 있다.
margin 여백 설정(안쪽) (ex)margin:5px 10px 5px 10px
top, right bottom, left 순서이며, margin-top, margin-left 등으로 한 곳만 설정 할 수도 있다.
border 테두리 설정 (ex)border:1px red solid
두께, 색상, 선의 종류의 순서로 기입하며, 선의 종류에는 실선, 점선, 대시선 등 다양하게 적용할 수 있다.
display 요소를 나타내는 방식을 지정 (ex) display:block, inline, none 등
block : 요소를 줄 바꿈하는 박스로 나타낸다.
none : 요소를 보이지 않게 한다.
inline : 요소를 줄 안에 나타낸다.
position 요소의 위치를 정할 때 어디를 기준으로 할 지 정해준다.
top, right, left 등의 속성 값과 연계하여 위치를 조정한다.
(ex) position:relative; top:20px;
relative : 자신의 현재 위치를 기준으로 이동, 자신이 있던 공간을 다른 Element가 침범하지 못한다.
fixed : 웹 브라우저 화면을 기준으로 위치를 이동, 스크롤 해도 화면에 고정 된다.
absolute : 자신을 포함하는 상위 Element 중에서 기본 위치가 아닌 포지션 설정 값을 가진 가장 가까운 Element를 기준으로 한다.
static : 모든 Element에 기본적으로 설정 된 값으로 별다른 특징이 없다.
float 부유 속성이라고도 하며, 이미지와 텍스트를 쉽게 배치 시키기 위한 속성
(ex) float:left
inherit : 요소를 감사는 부모 요소의 float 속성을 상속
left : 요소를 왼쪽으로 이동
right : 요소를 오른쪽으로 이동
none : 요소를 부유 시키지 않는다.