HTML5 & CSS3

HTML5/CSS3
을수
Understanding

eulsoo.jung@gmail.com
이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.
안녕하세요^^

문서에서 어플리케이션으로

https://developer.apple.com/safaridemos/

http://tympanus.net/Development/AnimatedBooks/index.html

http://christmasexperiments.com/2013/03/
http://www.20thingsilearned.com/en-US/home

https://tinkercad.com/things/
http://madebyevan.com/webgl-water/

https://developer.mozilla.org/en-US/demos/

SEMANTICS PERFORMANCE
INTEGRATION
CONNECTIVITY OFFLINE
STORAGE
DEVICE ACCESS MULTIMEDIA 3D,GRAPHICS
EFFECTS
섹셔닝과 의미구조
새로운 의미의 태그들
폼양식
웹 성능 향상과
하드웨어 지원
더나은 쌍방향 통신
오프라인 DATABASE
더 많은 장치의 사용 오디오와 비디오
3D와 벡터그래픽
STYLING
라운드 박스
그림자
변형과 애니메이션

새로운 의미의 태그들이 등장했습니다.
header
main
footer
section
article
aside
nav
mark
wbr
bdi
ruby
rt
rp
datalist
keygen
output
progress
time
video
audio
source
track
canvas
svg
math
figure
figcaption
details
summary
menu
menuitem
섹션
그룹핑
인라인레벨 폼
Interactiveelements
임베드컨텐츠

새로운 표현도 등장했습니다.
@font-‐face
opacity
rgba
hsla
border-‐image
border-‐radius
transition
transition-‐duration
transition-‐timingfunction
transition-‐delay
웹폰트
애니메이션
컬러와투명도
보더
트랜지션
background-‐origin
background-‐clip
background-‐size
multiple backgrounds
백그라운드
트랜스폼
transform
transform-‐orgin
text-‐overflow
overflow-‐wrap
텍스트
column-‐count
column-‐gap
column-‐width
column-‐count
column-‐gap
column-‐rule-‐width
column-‐rule-‐style
column-‐rule-‐color
column-‐rule
column-‐span
멀티컬럼
animation
animation-‐name
animation-‐duration
animation-‐timing-‐function
animation-‐delay
animation-‐iteration-‐count
animation-‐direction
animation-‐fill-‐mode
@keyframe
그라데이션
:linear-‐gradient
:radial-‐gradient
:repeating-‐linear-‐gradient
:repeating-‐radial-‐gradient
box-‐shadow
text-‐shadow
그림자
display:flex
display:inline-‐flex
flex-‐direction
flex-‐wrap
flex-‐flow
order
flex-‐grow
flex-‐shrink
flex-‐basis
justify-‐content
align-‐items
align-‐self
align-‐content
플렉스박스

새로운 html5 태그라도 브라우저가
똑똑하면 처리합니다.
!doctype…
xhtml 1.0….
section
video
audio
/section
Chrome, Safari, FireFox…
!doctype
html
section
video
audio
/section
ie8

하지만 아직은…
데스크탑 유선기준 2014.02.24
http://gs.statcounter.com

html5.js를 이용하면 아래의 태그들을
사용할 수 있습니다.
!-‐-‐[if lt IE 9]
script src=//html5shiv.googlecode.com/svn/trunk/html5.js/script
![endif]-‐-‐
article
aside
canvas
details
figcaption
figure
footer
header
hgroup
nav
menu
nav
section

CSS3의 경우 브라우저 회사별로 테스트용
접두어(vendor prefix)를 사용합니다.
-‐webkit-‐
-‐moz-‐
-‐o-‐
-‐ms-‐
border-‐radius : 10px;
W3C에 확정이 되면 사용할 수 있도록 가장 마
지막에 원래 이름을 넣어 둡니다.
W3C에 확정되기전의 TEST단계일때 사용할 수
있는 브라우저 밴더들의 표시입니다.
웹킷엔진을
사용하는
사파리, 크롬
모질라재단의
파이어폭스
오페라
마이크로소프트의
익스플로러

쓰지 않아도 되는 속성들
.example {
border-radius:10px;
}
.example {
box-shadow:0 0 5px rgba(0,0,0,0.5);
}
.example {
background-origin:content-box;
background-size:100% auto;
background-clip:content-box;
}
.overkill-example {
background:#f9f9f9;
background:-moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
background:-webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:-o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:-ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
}
.example {
background:#f9f9f9;
background:-webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
}
.example {
background-position:100% 100%;
background-position:-webkit-calc(100% + 30px) -webkit-calc(100% + 16px);
background-position:calc(100% + 30px) calc(100% + 16px);
}
.example {
-webkit-transition:background-position 0.5s;
transition:background-position 0.5s;
}

간결해진 시작
!DOCTYPE html
!DOCTYPE html PUBLIC -‐//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd
meta http-‐equiv=Content-‐Type content=text/html; charset=utf-‐8
meta charset=utf-‐8

link rel=stylesheet href=path/to/stylesheet.css type=text/css /
script type=text/javascript src=path/to/script.js/script
link rel=stylesheet href=path/to/stylesheet.css /
script src=path/to/script.js/script
linkscirptstyle에
type을 쓰지 않아도 됨

!DOCTYPE html
html
head
meta charset=utf-‐8 /
titlehtml5/css3/title
link rel=stylesheet href=reset.css /
script src=ui.js/script
style
p {color:red}
/style
/head
body
phi hello!/p
/body
/html
HTML5 문서를 만들어 보세요.
?

느슨해진 문법
p class=myClass id=someId Start the reactor
xhtml처럼 대소문자를 구분하지 않고, 값에는 “”에 속성값을 넣지
않아도 되며, 반드시 닫지 않아도 됩니다.
http://validator.w3.org/?
html5문서에 위의 코드를 넣고 문법 검사를 해보세요.

컨텐츠 모델
• 메타데이터 콘텐츠
• 흐름 콘텐츠
• 섹션 정의 콘텐츠
• 헤딩 콘텐츠
• 구문 콘텐츠
• 내장 콘텐츠
• 대화형 콘텐츠
html5는 컨텐츠(정보/내용)의 형식에 따라 7가지 범주를 정
해 놓았습니다.
http://www.w3.org/TR/2011/WD-html5-20110525/content-models.html

흐름이 있는 컨텐츠를 위한 태그들
대부분의 태그가 여기에 해당합니다.
a, abbr, address, area,
article, aside, audio, b, bdi,
bdo, blockquote, br, button,
canvas, cite, code,
command ,datalist ,del ,details
, dfn, div, dl, em, embed,
fieldset, figure, footer, form,
h1, h2, h3, h4, h5, h6, header,
hgroup, hr, i, iframe, img,
input, ins, kbd, keygen, label,
map, mark, math, menu, meter,
nav, noscript, object, ol,
output, p, pre, progress, q,
ruby, s, samp, script, section,
select, small, span, strong,
style , sub, sup, svg, table,
textarea,time,u,ul,var,video,wb
r,Text

한가지 주제로 색셔닝을 하기 위한 태그들
section
nav
article
aside

제목을 넣기 위한 태그들
h1
h2
h3
h4
h5
h6

텍스트 레벨의 태그들
a, abbr, area, audio, b,
bdi, bdo, br, button,
canvas, cite, code,
command, datalist, del,
dfn, em, embed, i, iframe,
img, input, ins, kbd,
keygen, label, map, mark,
math, meter, noscript,
object, output, progress,
q, ruby, s, samp, script,
select, small, span,
strong, sub, sup, svg,
textarea, time, u, var,
video, wbr, Text

장착(embed)되는 컨텐츠를 위한 태그들
audio
canvas
embed
iframe
img
math
object
svg
video

상호작용을 위한 태그들
a
audio
button
details
embed
iframe
img
input
keygen
label
menu
object
select
textarea
video

메타정보를 제공하는 태그들
base
command
link
meta
noscript
script
style
title

섹셔닝과 의미구조
header
main
footer
section
article
aside
nav

http://www.w3.org/TR/2011/WD-html5-20110525/content-models.html
section
article
aside
nav
이 섹션을 정의하는 4가지 태그들은 특정 주제로 영역을 만들며
그 영역별로 제목과 푸터를 가질수 있습니다.
한가지 주제로 색셔닝을 하기 위한
태그들이 있었습니다.

div는 아무 의미가 없지만 section은
“한가지 주제로 묶는다”라는 의미를 가집니다.
section class=“navercast”
탭메뉴 부분
주요내용 부분
페이지 넘김과 셋팅부분
/section

그렇기 때문에 section은 자신만의
headerfooter를 가질 수 있습니다.
section class=navercast
header.../header
div
div class=game_hot.../div
div class=game_ect.../div
div class=game_more.../div
/div
footer.../footer
/section

header
main
footer
주제나 네비게이션을 사용할 목적으로 그룹핑할 때.
페이지내의 가장 주요한 부분을 그룹핑할 때. 한번만 사용가능.
저작자 관련정보 혹은 해당 내용과 관련된 링크등을 그룹핑 할 때.

section은 html의 의미구조에 새로운
의미구조를 부여하게 됩니다.
div
h1네이버 캐스트/h1
h2오픈 캐스트/h2
p이것은 오픈 캐스트의 내용입니다./p
h3오픈 게임 캐스트/h3
p이것은 오픈캐스트의 내용입니다./p
/div
• 네이버 캐스트
• 오픈 캐스트
• 오픈 게임 캐스트
div
section
section
/section
/section
/div
• 네이버 캐스트
• 오픈 캐스트
• 오픈 게임 캐스트
xhtml
html5

이런 html문서의 의미구조를 보여주는
툴도 있습니다.
div
section
section
/section
/section
/div
http://gsnedders.html5.org/outliner/

실제로 section안에 제목을 명시해주지
않더라도 암묵적인 제목을 가지게 됩니다.
div
section
section
/section
/section
/div
그러므로 접근성을 위해서 명시적으로
넣어 주는 것이 좋습니다.

하지만headermainfooter는
의미구조에 영향을 주지 않습니다.
div
main
section
header
/header
div
section
/section
/div
footer
p작성자 김성민님/p
/footer
/section
/main
/div

그러므로section은 접근성 측면에서 제목을
가지고 있으면 좋습니다.
section class=navercast
header
/header
div
div class=game_hot.../div
div class=game_ect.../div
div class=game_more.../div
/div
footer.../footer
/section
디자인상에 없다면 CSS로
보이지 않게 처리합니다.

section처럼 의미구조에 영향을 미치는
태그는 세가지가 더있습니다.
section
article
aside
nav
정해진 용도는 없고 단지 한가지 주제로 묶을때
컨텐츠를 발행하고 배포할 목적으로 만들어 짐(News, RSS)
의미적으로 부가적인 정보를 제공할 때
웹사이트의 주요 네비게이션 역할을 할 때
정해진 주제가 없음
정해진 주제가 있음

div
section
header
nav
a href=#자동차/a
a href=#유머/a
a href=#만화/a
/nav
/header
div
section
/section
aside
p이것은 배너광고입니다./p
/aside
/div
footer
p작성자 김성민님/p
/footer
/section
/div
aside
section
nav

nav
article
aside
모든 태그들은 태그이름이 갖는 위치의 뉘앙스 보다는
철저하게 컨텐츠가 가지고 있는 의미에 따라
선택해서 사용하면 됩니다.
사이트 전체에 영향을 미치는 네비게이션을
그룹핑하는데 사용하였습니다.
주로 header안에 있게 될 것입니다.
블로그나 뉴스사이트의 발행되는 글 한토막에
주로 사용합니다. 대부분 발행되는 날짜header
와 작성자footer를 가지고 있게 될 것입니다.

추가된 의미들
mark
meter
time
figure
figcaption
progress

mark는 “다른 문맥과 연관성 때문에
강조된 텍스트”라는 의미를 갖습니다.
주로 검색결과 내의 검색어들을 다른 텍스트들
보다 도드라저 보이게 표시할 때 사용합니다.
p이것은 markhtml5/mark와
markCCS3/mark의 특징입니다./p

ㅋ
meter는 “측정 값이 일정한 범위 안에
있을때”를 표시하기 위해 사용합니다.
meter min=0 max=10 value=5/meter
meter min=0 max=4 value=5/meter
?
meter value=0.5/meter
최소값 최대값 현재값
최대값을 넘길 경우 어떻게 표현될까요?
최소값과 최대값을 쓰지 않을경우 min=0, max=1이 기본값이 됩니다.

low,optimum,high 속성도 있습니다.
meter min=0 low=3 optimum=5 high=8 max=10 value=5 /meter
meter min=0 low=3 high=8 max=10 value=2 /meter
meter min=0 low=3 optimum=9 high=8 max=10 value=2 /meter
현재값이 low값보다 작을 경우 약간의 경고의 의미로 색이 바뀝니다.
낮을때 높을때최적값
최적값과 현재값이 low와 high의 보다 높거나 낮게 되었을때 어떤일이 벌어질까요?
?

time는 시간을 표시할 때 사용합니다.
우리들은 흔히 사용하는
시간의 표현을 사용합니다.
p날짜는 time datetime=2001-‐05-‐15 19:00내일 오후7시/time 입니
다./p
브라우저는 ‘YYYY-MM-DDThh:mm:ss’
와 같이 ISO 날짜 표준 형식만을 속성으로
처리합니다.
p날짜는 time datetime=19:00오후7시/time 입니다./p
p날짜는 time datetime=2001-‐05-‐155월 15일/time 입니다./p
p날짜는 time2010-‐05-‐17/time 입니다./p
?
datetime 속성을 쓰지 않을 수 있습니다.
그렇다면 어떤형식으로 날짜를 표기해야 할까요?

figure는 본문중에 참조된 컨텐츠를
나타낼 때 사용합니다.
figure
img src=dotori.jpg alt=도토리 일러스트
figcaption
illustration 도토리 by a href=http://yoonjihae.com윤지혜/a
/figcaption
/figure
illustration 도토리 by 윤지혜
사진
동영상
code
canvas
캡션이 필요할 때 사용할 수 있으며,
사용하지 않아도 괜찮습니다.

progress는 진행률을 표시합니다.
progress value=70 max=10070 %/progress

입력양식
input type=text placeholder=홍길동 autofocus /
requiredautocomplete=onrange
search
url
tel
email
number
date
datetime
datetime-‐local
time
month
color
슬라이더 표시
검색창
웹사이트 주소
전화번호
이메일
스피너 컨트롤로 숫자를 입력
년 , 월 , 일
년 , 월 , 일 , 시 , 분 , 초 , 시간대
년 , 월 , 일 , 시 , 분 , 초
시 , 분 , 초
년 , 월
입력할 예시값 표시 자동포커스
자동완성 기능 입력값 검사
색상선택

type=range로 슬라이더를 사용할
수 있습니다.
input type=range min=0 max=100/

type=search로 검색창을
input type=search/
사파리
크롬
파이어폭스

type=number로 숫자를 입력하기
편리하게 해줍니다.
input type=number/
스마트디바이스에서는
숫자자판으로 바꿔줍니다.
마우스로 클릭하여 숫자를
조절할 수 있습니다.
물론 직접입력할 수 도 있습니다.

다양한 입력값에 따른 키보드 지원
input type=tel/ input type=email/ input type=url/

다양한 날짜와 시간 형식을 지원합니다.
input type=datetime/
input type=datetime-‐local/
input type=date/
input type=month/
input type=time/
시간대시간년.월.일

사파리, ie, 파이어폭스와는
달리 크롬 브라우져에서는
특별한 편의 UI로 보여줍니다.
IOS에서는 기기에 최적화된
UI로 보여줍니다.
type=“datetime”
일때(시간대가 포함된)
형식일때는 지원하지
않습니다.

type=color은 색상을 입력할 수 있
도록 합니다.
input type=color/
사파리, IE, 파이어폭스 지원안함.

placeholder는 입력 예시어를 넣어둡니다.
input type=email placeholder=이메일 입력/
클릭을 하고 입력을 시작하면 없어집니다.

autocomplete는 브라우저의 자동 완성
기능을 끄고 켤수 있습니다.
input type=email autocomplete=off/
on이나 off중 하나의 값만을 가지며
이 속성을 쓰지 않으면 브라우저들은
autocomplete속성을 켜두고 있습니다.

autofocus는 페이지가 로딩되면
그 위치에 커서가 가있게 합니다.
input type=tel autofocus/
불린속성으로서 값을 넣을 필요 없으며
한페이지에 한번만 쓸 수 있습니다.
textareaselect와 같은 모든
form 필드에 사용할 수 있습니다.

required는 입력하지 않았을 경우
서버로 전송하지 않는 역할(검증)을 합니다.
input type=email required/
불린속성으로서 값을 넣을 필요가 없습니다.
존재하는 것만으로도 작동하기 때문입니다.
이메일을 입력해 주세요!

datalist는 제공된 목록중에
하나를 선택할 수 있게 해줍니다.
input list=friends/
datalist id=friends
option value=장동건
option value=사무엘잭슨
option value=원빈
option value=정을수
/datalist
사파리지원안함
지원하지 않는 브라우저에서는
input만 사용할 수 있어서 좋습니다.

video
video src=html5video.mp4 controls/video
http://goo.gl/2n4i9g (샘플비디오파일)
플레이 제어판 표시

video contols
source src=html5video.webm type=video/webm /
source src=html5video.mp4 type=video/mp4/
/video
source를 이용해서 다양한 비디오
포멧을 지원할 수 있습니다.
webm을 지원하지
않으면 아래로!
파이어폭스, 크롬, IE9+ 지원
사파리, 크롬, IE9+ 지원
type을 이용해 브라우저에게
좀 더 자세한 정보를 제공합니다.

video src=html5video.mp4#t10,30 contols/video
특정 부분부터 플레이하기
10초 지점에서 시작해서 30초 지점까지 플레이
10에서 시작해서 마지막까지 플레이
시킬려면 어떻게 해야 할까요?
#t10,30?

video src=html5video.mp4 contols poster=poster.png/video
시작전 이미지를 플레이어에 보여주기.

video autoplay preload=none loop muted
/video
플레이옵션을 지원하는 속성들을
가지고 있습니다.
auto
metadata
자동플레이 반복 음소거
none : 준비해 두지 않음
auto : 기본값이며, 페이지로딩시 함께 로딩해 둠
metadata : 재생시간, 자막리스트등의 메타정보를 미리제공
동영상이 한페이지에 많을 경우 어떤 값이 좋을까요??

video controls poster=poster.png
track src=html5video.vtt label=한글 자막 kind=subtitles srclang=ko
/track
/video
자막 추가 하기
자막이름자막파일 언어=한국종류=자막
크롬의 경우 자막파일은 동영상 파일과
함께 서버에 올려두어야 작동합니다.
자막 아이콘이
표시됩니다.
파이어폭스 지원안함

video controls poster=poster.png
track src=html5video.vtt label=한글 자막 kind=subtitles srclang=ko default/track
track src=html5video-‐en.vtt label=English kind=subtitles srclang=en/track
/video
여러 언어의 자막 추가할 수 있습니다.
사파리 브라우저의
기본 플레이에서
자막옵션을 사용할 수
있습니다.
기본 언어로 설정

WEBVTT FILE
hello1
00:00:00.500 -‐-‐ 00:00:02.000
p안녕하세요 정을수입니다/p
hello2
00:00:02.500 -‐-‐ 00:00:04.300
uhtml이 정말 재미있나요?/u 실력이 바뀌고 있죠?
3
00:00:05.000 -‐-‐ 00:00:07.000
사실 이세상에 재밌는게 많지는 않죠.^^
4
00:00:07.100 -‐-‐ 00:00:11.000
vtt파일이란?
큐 타임(Cue time)
IDs : 고유이름
큐 텍스트(Cue text)
u부분이 밑줄로
처리되어 나옵니다.
00:00:00.500 -‐-‐ 00:00:02.000
시 : 분 : 초 : 밀리초
시작 끝

이런 데이타를 이용해서 새로운 서비스를
만들어 낼 수도 있습니다.
http://www.samdutton.net/mapTrack/
지도와 동영상을 씽크해서 지도에 원
하는 곳을 동영상에서 보여줍니다.

audio
자동시작
audio autoplay controls loop preload=none
source src=audio/animalSounds.ogv type=audio/ogg /
source src=audio/animalSounds.mp3 type=audio/mp3 /
p이 브라우저는 오디오를 제공할 수 없습니다./p
/audio
제어판 표시 반복 반복 auto
metadata
none : 준비해 두지 않음
auto : 기본값이며, 페이지로딩시 함께 로딩해 둠
metadata : 재생시간, 자막리스트등의 메타정보를
미리제공

canvas id=eulsoo width=300px height=200px/canvas
var shadowStyles = {
// http://simurai.com/post/802968365/css3d-‐css3-‐3d-‐text
Stereoscopic: {
color: #000,
background: #fff,
shadow: -‐0.06em 0 0 red, 0.06em 0 0 cyan
},
// http://line25.com/articles/using-‐css-‐text-‐shadow-‐to-‐create-‐cool-‐
text-‐effects
Neon: {
color: #FFF,
background: #000,
shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px
#ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0
script type=text/javascript
/script
cavas로 만든 공간에
자바스크립트를 이용하여 벡터그랙픽으로
그림을 그립니다.
이렇게 만든 글씨를 구글이
검색해 줄 수 있을까요?
?
http://goo.gl/x8yZGu
canvas 벡터그래픽

p네온 그래픽 효과의 글씨입니다./p
canvas id=neon width=300px height=200px
img src=neon.jpg alt=/
/canvas
canvas는 접근성과 단계적인 지원을
고려해야 합니다.
네온 그래픽 효과의 글씨입니다.
자바스크립트를 지원하지 않거나 canvas를 지원하지 않는 경우에 태그 안쪽에 이미지로 표시해 줍니다.
또한 casvas안쪽을 읽어주지 못하는 스크린리더기를 위해 canvas앞이나 뒤쪽에 대체 텍스트를 넣어줍니다.
이미지

캔버스 그래프일 경우에는 표로된
정보를 함께 넣어줍니다.
http://goo.gl/uiBzsH

?xml version=1.0?
svg width=120 height=120 viewBox=0 0 120 120
xmlns=http://www.w3.org/2000/svg version=1.1
rect x=10 y=35 height=15 width=0
animate attributeType=XML
attributeName=width
to=100
dur=8s
begin=0s
fill=freeze /
/rect

attributeName=width
to=75
dur=6s
begin=2s
fill=freeze /
/rect

attributeName=width
to=50
http://goo.gl/g7w6sw
graph.svg
img src=graph.svg /
test.html
svg 벡터그래픽
이미지 태그를 이용해서
svg파일을 불러옵니다.
네모그리기
애니메이션

!DOCTYPE html
html
head
meta charset=utf-‐8 /
title벡터그래픽 테스트/title
/head
body
svg width=120 height=120 viewBox=0 0 120 120
xmlns=http://www.w3.org/2000/svg version=1.1
attributeName=width
to=100
dur=8s
begin=0s
fill=freeze /
/rect

attributeName=width
to=75
dur=6s
begin=2s
fill=freeze /
/rect

attributeName=width
to=50
dur=4s
begin=4s
fill=freeze /
/rect
test.html
html에 직접 마크업해서
벡터그래픽을 만들수 있습
니다.
네모그리기
애니메이션
accent-‐height
accumulate
additive
alignment-‐baseline
allowReorder
alphabetic
amplitude
arabic-‐form
ascent
attributeName
attributeType
azimuth
baseFrequency
baseline-‐shift
baseProfile
bbox
begin
bias
by
calcMode
cap-‐height
class
clip
clipPathUnits
clip-‐path
clip-‐rule
color
color-‐interpolation
color-‐interpolation-‐filters
color-‐profile
color-‐rendering
contentScriptType
edgeMode
elevation
enable-‐background
end
exponent
externalResourcesRequ
fill
fill-‐opacity
fill-‐rule
filter
filterRes
filterUnits
flood-‐color
flood-‐opacity
font-‐family
font-‐size
font-‐size-‐adjust
font-‐stretch
font-‐style
font-‐variant
font-‐weight
format
from
fx
fy
k
k1
k2
k3
k4
kernelMatrix
kernelUnitLength
kerning
keyPoints
keySplines
keyTimes
lang
lengthAdjust
letter-‐spacing
lighting-‐color
limitingConeAngle
local
marker-‐end
marker-‐mid
SVG를 위한 수많은 속성
들이 존재하고 있습니다.

.svg 형식을 지원하는 그래픽
프로그램을 이용할 수 있습니다.
어도비 일러스트레이터에서
.svg파일로 저장할 수 있
습니다.

img {
width:300px;
height:300px;
border:2px solid lime;
}
img src=ywam.svg alt=로고/
?xml version=1.0 encoding=utf-‐8?
!-‐-‐ Generator: Adobe Illustrator 15.1.0, SVG
Export Plug-‐In . SVG Version: 6.00 Build 0) —
!DOCTYPE svg PUBLIC -‐//W3C//DTD SVG 1.1//EN
http://www.w3.org/Graphics/SVG/1.1/DTD/
svg11.dtd
svg version=1.1 id=Layer_1 xmlns=http://
www.w3.org/2000/svg xmlns:xlink=http://
www.w3.org/1999/xlink
width=500px height=500px viewBox=0 0 500 500
enable-‐background=new 0 0 500 500”
xml:space=preserve

path fill=#FFF200
d=M250.15,0C111.97,0,0,111.97,0,250.15c0,138.098,
111.97,250.067,250.15,250.067

c138.18,0,250.149-‐111.97,250.149-‐250.15C500.218,11
1.97,388.248,0,250.15,0z M274.723,442.637

c-‐38.251,0-‐73.718-‐11.222-‐103.124-‐30.471c-‐59.958-‐9.
338-‐109.103-‐51.111-‐129.006-‐106.81c-‐17.447-‐28.013-‐2
7.604-‐61.022-‐27.604-‐96.489

c0-‐92.639,69.131-‐169.06,158.576-‐180.773c17.774-‐6.2
25,36.859-‐9.583,56.763-‐9.583c39.808,0,76.421,13.51
5,105.58,36.285
ywam.svg
최종적으로 svg파일이 담긴 img상자의
크기에 맞추어 축소 됩니다.
300

svg width=500px height=500px
viewbox=0 0 500 500
500 500 500
500 600 400
viewbox=0 0 600 600
viewbox=0 0 400 400
svg기준 넓이에
항상 꽉 차게 되어있는
가시영역(viewbox)의
넓이 값이 동일하기
때문에 물체가 svg
영역에 꽉차보입니다.
svg기준 넓이에
넓이 값이 증가하면서
그려지는 물체가 상대적으로
축소되어 보입니다.
svg기준 넓이에
넓이 값이 줄어들면서
그려지는 물체가 상대적으로
확대되어 보입니다.
svg상자 가시영역(viewbox)
svg width=500px height=500px viewBox=0 0 500 500
x y width height가시영역

viewbox=0 0 500 500
viewbox=0 -‐100 500 500
svg상자 가시영역(viewbox)
viewbox=-‐100 -‐100 500 500
(0,-100) (-100,-100)
svg width=500px height=500px viewBox=0 0 500 500
x y width height가시영역
(0,0) 500 500 500
500 500 500

다양한 크기의 디바이스의 요청에 따라
svg쓰임새가 주목 받고 있습니다.
http://iconmelon.com/
http://www.flaticon.com
http://iconmonstr.com

컬러와 투명도
background: hsla(120, 95%, 29%, 0.7);
color: rgba(98, 33, 128, 0.5);
opacity: 0.7;
투명도

보더
border-‐radius:10px 20px 30px 40px;border-‐radius:10px 30px 20px;
border-‐radius:10px 30px;border-‐radius:10px;
10 10
1010
10 30
30 10
10 30
2030
10 20
3040

20
30 30
3030
20
20
border-‐radius:20px / 30px
20
가로 세로
border-‐radius:10px 20px / 30px 40px
10
30 40
30
20
20
10
40
가로 세로

그림자
width:100px;
height:100px;
box-‐shadow:3px 3px 10px black;
x y blur color
width:100px;
height:100px;
box-‐shadow:3px 3px 0 black;
x y blue color

width:100px;
height:100px;
box-‐shadow:inset 3px 3px 10px black;
x y blur color안쪽으로
width:100px;
height:100px;
box-‐shadow:0 15px 10px -‐12px black;
뿌려지는
반경값
x y blur color

box-‐shadow:0 0 10px 5px black,
40px -‐30px lime,
40px 30px 50px red,
-‐40px 30px yellow,
-‐40px -‐30px 50px blue;
콤마를 이용해 여러개의 그림자를
만들수 있습니다.

글씨에도 그림자를 줄 수 있습니다.
text-‐shadow:2px 2px 5px #000;
text-‐shadow:2px 2px 0 #000;
x y blur color
x y blur color

웹 폰트는 상대방 컴퓨터에 폰트가 없어도
내가 디자인한 서체로 볼 수 있게 해줍니다.
@font-‐face {
font-‐family: Bitstream Vera Serif Bold;
src: url(http:mozilla.org/VeraSeBd.ttf);
}

body { font-‐family: Bitstream Vera Serif Bold, serif }
서버에 올려둘 서체이름
서체를 올려둘 파일과 주소
1. 셋팅하고
2. 사용합니다

그런데 브라우저별로 사용할 수 있는
포멧이 다릅니다.

그렇다면 서체를 포멧별로
만든다음 서버에 올려야 겠죠?
ttf, otf 다운로드
ttf eot 변환
ttf woff 변환
1. 다운로드 2. 변환 3. 사용
@ font-‐face {
ttf, eot, woff
}
브라우저별로 지원하는
포멧들을 모두 셋팅하고
사용합니다.

지원하는 환경마다 쓸 수 있도록
셋팅을 합니다.
@font-‐face {
font-‐family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 */
src: url('webfont.eot?#iefix') format('embedded-‐opentype'), /* IE6-‐IE8 */
url('webfont.woff') format('woff'), /* 크롬, 오페라, 파이어폭스 */
url('webfont.ttf') format('truetype'), /* 사파리, 안드로이드, iOS */
}

좀 더 쉽게 사용할 수 있는 방법도 있습니다.
http://www.google.com/fonts/earlyaccess
정식 제공전 테스트 사이트
http://www.google.com/fonts/
구글 웹폰트

한글도 사용할 수 있게 되었습니다.
정식 제공전 테스트 사이트에 등록된 한글들
@import url(http://fonts.googleapis.com/
earlyaccess/nanumgothic.css);
CSS
.webfont3 {font-‐family: 'Nanum
Gothic', sans-‐serif; font-‐size:50px;}
1.셋팅하고
2.사용합니다

굵기에 맞는 폰트로 사용할 수 있습니다.
@import url(http://fonts.googleapis.com/
earlyaccess/nanumgothic.css);
CSS
.webfont3 {
font-‐family: 'Nanum Gothic’, sans-‐serif;
font-‐weight:700;
}
1.셋팅하고
2.사용합니다
@import CSS
임포트된 CSS에 굵기 별로 만들어진 웹폰트가 셋팅되어 있기 때문에 사용만 하면 됩니다.

그라디언트
background:linear-‐gradient(left,lime,yellow);
시작점 출발색 끝색
background:linear-‐gradient(315deg,lime,yellow);
3. 시작점을 background-position
의 값처럼 다양하게 사용할 수 있습니다
background:linear-‐gradient(lime,yellow);
출발색 끝색
1. 기본방향은 위에서 아래쪽입니다.
2. 시작점을 정해줄 수 있습니다.
315deg

background:repeating-‐linear-‐gradient(blue,lime 18%,yellow 25%);
30%0 100%
6. 그라데이션을 패턴처럼 반복시킬 수 있습니다.
background:linear-‐gradient(-‐45deg,lime,yellow);
4. 325deg는 -45deg와 같습니다.
-‐45deg
background:linear-‐gradient(left,lime,blue 30%,yellow);
5. 중간색과 함께 색상지점을 옵션으로 줄 수 있습니다.
25%
0
18%
(25%이므로 4번 반복됩니다)
중간색
중간색 중간색

background:repeating-‐linear-‐gradient(blue,blue 35px,black 35px,black 70px);
7. 단색 반복 줄무니를 만들 수 있습니다.
blue 0
blue 35px black 35px
black 70px
8. 공책 줄무늬를 만들려면 값을 어떻게 지정해야 할까요?
background:repeating-‐linear-‐gradient(#FFDD00,#FFDD00 39px,#35B818 39px,#35B818 40px);
한칸 : 39px
선굵기 : 1px
공책색 : #FFDD00
선색 : #35B818
?

라운드 그라디언트도 만들수 있습니다.
background:radial-‐gradient(lime,yellow);
1. 기본방향은 안쪽에서 바깥쪽입니다.
background:radial-‐gradient(circle closest-‐side at 50px 50px,lime,yellow);
3. 가장 가까운쪽의 박스면까지 그라디언트 원을 만들기 위해 원중심의 위치값을 정하는 방식입니다.
background:radial-‐gradient(100px,lime,yellow);
2. 반지름으로 원의 크기를 조절할 수 있습니다.
100px
50px
50px
70px
50px
..at 50px 50px,.. ..at 50px 70px,..
70px
..at 70px 70px,..
70px
100px
100px
..at 100px 100px,..
맞닿아 있는 면과의
거리를 기준으로
원크기를 유지합니다.
두값이 같을 경우
두면에 맞닫아
있습니다.
다시 원이 두면에
모두 닫습니다.
100px
50px
(100px 50px,lime,yellow)
직사각 정사각

background:radial-‐gradient(circle closest-‐corner at 50px 50px,lime,yellow);
3. 가장 가까운 쪽의 박스 모서리까지 그라디언트 원을 만들기 위해 원중심의 위치값을 정하게 되는 방식입니다.
90px
50px
50px
50px
90px
90px
..at 50px 50px,.. ..at 50px 90px,.. ..at 90px 90px,..
background:radial-‐gradient(circle farthest-‐side at 50px 50px,lime,yellow);
4. 가장 먼 쪽의 박스면까지 그라디언트 원을 만들기 위해 원중심의 위치값을 정하게 되는 방식입니다.
90px
50px
50px
50px
90px
90px

background:radial-‐gradient(circle farthest-‐corner at 50px 50px,lime,yellow);
5. 가장 먼 쪽의 박스 모서리까지 그라디언트 원을 만들기 위해 원중심의 위치를 결정하는 방식입니다.
90px
50px
50px
50px
90px
90px
background:radial-‐gradient(ellipse farthest-‐corner at 50px 50px,lime,orange 30%,yellow);
6. 타원옵션과 중간색과 색지점 옵션을 추할 수 있습니다.
50px
50px 30%
50px
50px 30%
circle ellipse
위와 같이 넓이 높이가 다른 박스의 경우에
값을 넣지 않아도 그에 맞는 타원형이 됩니다.

background:repeating-‐radial-‐gradient(circle closest-‐side at 50px 50px,
lime,orange 30%,yellow);
5. 그라디언트 원의 파장을 반복시킬 수 있습니다.
6. 원형 줄무늬를 만들려면 값을 어떻게 지정해야 할까요?
background:repeating-‐radial-‐gradient(circle,#FFDD00,#FFDD00 11px,#35B818 11px,#35B818 13px);
간격 : 11px
선굵기 : 2px
바탕색 : #FFDD00
선색 : #35B818
?

텍스트
asdf adsf
asdf asdf
asdf asdf
asdf asdf
asdlkfja;dlskfj;aldf
asdf adsf
asdf asdf
asdf asdf
asdf asdf
as;dlkfja;d
lskfj;aldf
overflow-‐wrap:break-‐word
width:100px width:100px
asdf adsf
asdf asdf
asdf asdf
asdf asdf
asdlkfja;dls
overflow:hidden overflow:hidden
width:100px
text-‐overflow:ellipsis
asdf adsf
asdf asdf
asdf asdf
asdf asdf
asdlkfja;d…
width:100px
띄어쓰기 없이 연속되는
경우 강제로 줄바꿈을
시켜줍니다.
overflow:hidden인
상태에서 잘려나간 글씨가
있다는 것을 알려주기 위해서
… 표시를 넣어줍니다.

백그라운드
.stage {
width:800px;
height:600px;
padding:30px;
border:10px solid black;
background:url('images/coffee.jpg') center center,
url('images/radio.png') left top,
url('images/player.png') right top,
url('images/face.png') left bottom,
url('images/weather.png') right bottom;
background-‐size: 200px auto;
background-‐repeat: no-‐repeat;
}
콤마를 이용해 한상자에
여러개의 배경이미지를
넣을수 있습니다.
모든 배경이미지에 대해
크기와 반복여부를 선언
할 수 있습니다.
200
auto
200
200200
auto
auto auto
200
auto
가로 200px에 대해 세로는
자동으로 조절합니다.
div class=stage/div

width:800px;
height:600px;
padding:30px;
border:10px solid rgba(0, 0, 0, 0.3);
background-‐image:url('images/coffee.jpg'),
url('images/radio.png'),
url('images/player.png'),
url('images/face.png'),
url('images/weather.png');
background-‐position:center center,
left top,
right top,
left bottom,
right bottom;
background-‐size:200px auto,
100px auto,
300px auto,
50px auto,
250px auto;
속성별로 나누어
각 각 지정할 수
있습니다.
이미지 사이즈를 각 각 지정했습니다.

width:800px;
height:600px;
padding:30px;
background-‐image:url('images/coffee.jpg'),
url('images/weather.png'),
url('images/radio.png');
background-‐position:center center,
right bottom,
right top,
left bottom,
right top;
250px auto,
300px auto,
50px auto,
100px auto;
weather가 player의 위에 올라옵니다.
먼저 선언한 이미지가
위로 올라오게 됩니다.

아래와 같이 만들어 보세요.?

width:800px;
height:600px;
padding:30px;
background-‐clip:border-‐box;
background-‐image:url('images/weather.png'),
url(‘images/radio.png’),
url('images/coffee.jpg');
background-‐position:right bottom,
right top,
left bottom,
right top,
center center;
300px auto,
50px auto,
100px auto,
auto auto;
보더가 투명값을 가지고 있을 경우
배경이미지가 비춰 보이게 됩니다.
특별히 지정하지 않아도
background-‐clip:border-‐box가
기본값으로 되어 있습니다.
div상자보다 큰 배경이미지가
가운데를 기준으로 사방으로 넘어가서
border-‐box 영역에서
상자보다 배경이미지가 클 경우 보더영역
까지 보이고 잘리게 됩니다.

width:800px;
height:600px;
padding:30px;
background-‐clip:border-‐box;
right top,
left bottom,
right top,
right top;
300px auto,
50px auto,
100px auto,
auto auto;
right top은 이미지의 배치 위치가 보더
영역 안쪽이기 때문에 배경이미지가 비취
지 않습니다.
넘어가는 좌측과 우측면에는 보더를
포함해서 자르기 때문에 비춰지게 됩
니다.

width:800px;
height:600px;
padding:30px;
background-‐clip:padding-‐box;
right top,
left bottom,
right top,
right top;
300px auto,
50px auto,
100px auto,
auto auto;
padding 영역의 끝을 기준으로 이미 잘렸
으므로 되므로 배경이미지가 보더에 비춰지
지 않습니다.

width:800px;
height:600px;
padding:30px;
background-‐clip:content-‐box;
right top,
left bottom,
right top,
right top;
300px auto,
50px auto,
100px auto,
auto auto;
content box 영역을 기준으로 이미 잘렸기 때
문에
배경이미지가 padding영역에 비춰지지 않습니
다.

width:800px;
height:600px;
padding:30px;
background-‐origin:padding-‐box;
right top,
left bottom,
right top,
right top;
300px auto,
50px auto,
100px auto,
auto auto;
배경이미지를 배치하는 기준이되는 padding-‐
box영역이 기본으로 설정되어 있습니다
기준되는 영역(padding-box)을
변경할 수 있습니다.
특별히 지정하지 않아도
기준이 되는 박스가 padding-‐box
로 기본으로 되어 있습니다.

width:800px;
height:600px;
padding:30px;
background-‐origin:border-‐box;
right top,
left bottom,
right top,
right top;
300px auto,
50px auto,
100px auto,
auto auto;
기준이되는 padding-‐box영역에서
border-‐box로 이동시켰습니다

width:800px;
height:600px;
padding:30px;
background-‐origin:content-‐box;
right top,
left bottom,
right top,
right top;
300px auto,
50px auto,
100px auto,
auto auto;
기준이되는 padding-‐box영역에서
content-‐box로 이동시켰습니다

멀티컬럼
div class=news
pFirefighters worked …중략…/p
pJust after midnight, …중략…/p
pLess than an hour later …중략…/p
ptriggered the explosion …중략…/p
/div
.news {
width:700px;
border:1px solid #ededed;
padding:30px;
column-‐count:3;
column-‐gap:40px;
}
-‐moz-‐(파이어폭스), -‐webkit-‐(사파리/크롬), ie10(정식지원)
auto auto auto40 40

.news {
width:700px;
border:1px solid #ededed;
padding:30px;
column-‐count:3;
column-‐gap:40px;
column-‐rule:1px solid #ededed
}
.news img {width:209px}
div class=news
h3the rescuers had found …중략…/h3
pFirefighters worked …중략…/p
img src=images/coffee.jpg /
pJust after midnight, …중략…/p
pLess than an hour later …중략…/p
ptriggered the explosion …중략…/p
/div
이미지가 하나의 column 넓이를
넘지않도록 width로 지정한다.
이미지가 있을 경우 하나의 컬럼을
넘지 않도록 사이즈를 조절해야 합니다.
이미지 사이즈를 100%로 한다면 어떻게 될까요?
?

박스 넓이 맞추기
.col2 {
width:400px;
border:1px solid black;
overflow:hidden;
}
.col2 div {
float:left;
width:200px;
height:100px;
}
.a {background:red;}
.b {background:blue;}
div class=col2
div class=a/div
div class=b/div
/div
.col2 div {
float:left;
width:200px;
height:100px;
padding:0 10px;
}
양쪽 패딩을 추가하자 넓이가 모자라
아래로 떨어지고 맙니다.

.col2 div {
float:left;
width:200px;
height:100px;
padding:0 10px;
}
.col2 div {
float:left;
width:200px;
height:100px;
padding:0 10px;
box-‐sizing:border-‐box;
}
200px
200px200px
200px
box-‐sizing은 넓이의 기준을 바꿉니다.
패딩영역까지도 width값 안에 포함시켜 버립니다.
421이상 768

.col2 div {
float:left;
width:200px;
height:100px;
padding:0 10px;
box-‐sizing:border-‐box;
}
border-‐box이기 때문에 보더영역까지도
포함됩니다.
200px200px
200px
200px
.col2 div {
float:left;
width:200px;
height:100px;
padding:0 10px;
box-‐sizing:content-‐box;
}
사실 기본값은 content-box이기 때문에
box-sizing을 쓰지 않을때는 넓이의 기준이
컨텐츠 영역이 되는 것입니다.

선택자
ul class=list
li첫번째 글입니다/li
li두번째 글입니다/li
li세번째 글입니다/li
li네번째 글입니다/li
li다섯번째 글입니다/li
li여섯번째 글입니다/li
li일곱번째 글입니다/li
li여덟번째 글입니다/li
/ul
.list li {
padding:5px;
border-‐top:1px solid #ededed;
}
.list li:last-‐child {
border-‐bottom:1px solid #ededed;
}

홀수와 짝수로 선택할 수 있습니다.
.list li:nth-‐child(even) {
background-‐color:#ededed;
}
.list li:nth-‐child(odd) {
}

원하는 자식을 숫자로 선택할 수 있습니다.
.list li:nth-‐child(3n) {
}
.list li:nth-‐child(4) {
}
3의 배수로 선택하게 합니다.

4번째부터 시작해서 3의 배수로 선택.
.list li:nth-‐child(3n + 4) {
}
odd를 사용하지 않고 홀수를 선택해 보세요.
?
.list li:nth-‐child(2n + 1) {
}

뒤에서 부터 계산해서 선택합니다.
.list li:nth-‐last-‐child(2) {
}
.list li:nth-‐last-‐child(3n+1) {
}
뒤에서 첫번째를 선택
3배수로 선택

다른 태그로 형제들이 구성되어
있을때 선택하기
dl
dt1제목/dt
dd1설명입니다./dd
dt2제목/dt
dt3제목/dt
dt4제목/dt
dt5제목/dt
/dl
dl * {
font-‐size:14px;
padding:5px;
}
dl dd:last-‐child {
}

같은 태그안에서 홀수,짝수를 선택합니다.
dl dt:nth-‐of-‐type(even) {
}
dl dt:nth-‐of-‐type(odd) {
}

원하는 태그를 숫자로 선택할 수 있습니다.
dl dt:nth-‐of-‐type(2n) {
}
dl dt:nth-‐of-‐type(3) {
}
2의 배수로 선택하게 합니다.
만일 dt:nth-of-type(2n+1)라면 어떻게 될까요?
?

nth-child는 태그 구분을 하지 않습니다.
dl dt:nth-‐child(3) {
}
dl dt:nth-‐of-‐type(3) {
}
VS
만일 dt:nth-child(4)라면 어떻게 될까요?
?

같은 태그중 첫째와 마지막을 선택합니다.
dl dd:last-‐of-‐type {
}
dl dt:first-‐of-‐type {
}

해당 태그가 하나일때만 선택합니다.
dl dd:only-‐of-‐type {
color:red;
}
dl dt:only-‐of-‐type {
color:red;
}

클릭한 링크의 대상이 되는 요소를 선택합니
다.
dl class=accordion
dta href=#one1제목/a/dt
dd id=one1설명입니다./dd
dta href=#two2제목/a/dt
dd id=two2설명입니다./dd
dta href=#three3제목/a/dt
dd id=three3설명입니다./dd
/dl
.accordion {width:300px;}
.accordion * {
font-‐size:14px;
padding:5px;
}
.accordion dd:last-‐child {
}
.accordion dt a {color:orange;}

.accordion #one:target,
.accordion #two:target,
.accordion #three:target {
background-‐color:orange;
color:white;
}
:target선택자를 이용해서 아코디언 메뉴를 만들어 보세요.?

다양한 상태에 따라 선택할 수 있습니다.
div class=todo_list
strong오늘의 할일/strong
ul
li
input type=checkbox id=todo1/
label for=todo2장보기/label
/li
li
input type=checkbox id=todo2/
label for=todo2공부하기/label
/li
li/li
/ul
/div

.todo_list {width:300px;}
.todo_list li {
font-‐size:18px;
padding:5px;
}
.todo_list li:last-‐child {
}

체크된 요소를 선택합니다.

.todo_list input:checked + label {
color:lime;
}
.todo_list li:empty:before {
content:'할일을 등록하세요!’;
font-‐size:12px;
color:orange;
}
빈 요소를 선택합니다.
비어있음

활성화나 비활성화 일때를 선택합니다.

div class=input_list
strong차례대로 입력하세요./strong
ul
li
label for=name이름/label
input type=text id=name /
/li
li
label for=sex성별/label
input type=text id=sex disabled /
/li
li
label for=old나이/label
input type=text id=old disabled /
/li
/ul
/div
.input_list {width:300px;}
.input_list li {
font-‐size:18px;
padding:5px;
}
.input_list li:last-‐child {
}
비활성화
비활성화
disabled를 넣지 않으면 활성화

.input_list input[type=text]:enabled {
box-‐shadow:0 0 10px lime;
}
.input_list input[type=text]:disabled {
opacity:0.3;
}
자식이 하나일때 선택합니다.
.input_list li:only-‐child:after {
content:'마지막 한개가 남았습니다';
display:block;
font-‐size:12px;
color:orange;
margin:10px 0 0 40px;
}
li가 하나가 남았을때 :after선택자
이용해서 메세지를 출력합니다.

ul class=list2
li class=active첫번째 글입니다 /li
li두번째 글입니다 /li
li세번째 글입니다 /li
li네번째 글입니다 /li
/ul
.list2 {width:300px;}
.list2 li {
padding:5px;
font-‐size: 18px;
letter-‐spacing:-‐2px;
}
.list2 li:last-‐child {
}
.list2 li.active {color:red;}
~이 아닐때를 선택합니다.
.list2 li:not(.active) {
}

calc( )로 계산하기
ul class=graph
li class=lank1span1위 100점/span/li
li class=lank2span2위 50점/span/li
/ul
.graph {
width:500px;
padding:20px;
}
li {
padding:10px;
background-‐color:orange;
}
li:first-‐child {margin-‐bottom:10px;}
.lank1 {width:100%;}
.lank2 {width:50%;}
.lank1 {width:calc(100% -‐ 20px);}
.lank2 {width:calc(50% -‐ 20px);}
li의 속패딩의 합인 20을 100%에서 빼주었습니다.

트랜지션
변이전
변이후
trasition은 중간과정의
변이를 자동으로 만들어
줍니다.
-‐webkit-‐(사파리/크롬), firefox(정식지원), ie10(정식지원)

먼저 변이전과 변이후를 만들어 둡니다.
.trans {
padding:10px 20px;
border-‐radius:10px;
border:4px solid #911208;
background-‐color:#f2531c;
box-‐shadow:0 0 10px #999;
}
변이전
a href=# class=transClick me!/a
.trans:hover {
background-‐color:#931309;
box-‐shadow:0 0 10px yellow;
}
변이후

어떤것이 어떤과정을 통해 변형시킬지를
변형전에 셋팅해 둡니다.
.trans {
padding:10px 20px;
transition-‐property:background,box-‐shadow;
transition-‐duration:0.3s;
transition-‐timing-‐function:ease;
}
변이전
.trans:hover {
}
변이후

‘무엇을’ ‘몇초안에’ 어떤 ‘속도 느낌’으로.
.trans {
padding:10px 20px;
}
배경색과 그림자를
0.3초 동안에
ease라는 속도 느낌으로

중간과정의 변화는 자동으로 만듭니다.
변이전
변이후
0.3S

다양한 느낌의 속도 변화를 줄 수 있습니다.
0.3S
linear
ease

0.3S
ease-out
ease-in-out
0.3S
ease-in

시간을 지연 시킬수도 있습니다.
변이전
변이후
0.3S
.trans {
padding:10px 20px;
transition-‐delay:0.5s;
}
0.5S
마우스가 오버되면
0.5초 있다가
변화가 시작됩니다.

변형시킬 다른 속성을 추가해 볼까요?
.trans {
padding:10px 20px;
transition-‐property:border,
background,
box-‐shadow;
}
변이전
.trans:hover {
border:4px solid white;
}
변이후

단축된 속성으로
transition:background 0.3s ease 0.5s;
변이시킬 속성 시간 속도 느낌 지연시간
.trans {
padding:10px 20px;
transition-‐property:background;
transition-‐delay:0.5s;
}

.trans {
padding:20px 40px;
transition:border 0.3s ease,
box-‐shadow 0.3s ease,
background 0.3s ease;
}
여러가지 속성일 경우
속성별로 단축할 수 있습니다.

.trans {
padding:20px 40px;
transition:padding 0.3s ease,
border-‐radius 0.3s ease,
border 0.3s ease,
box-‐shadow 0.3s ease,
background 0.3s ease;
}
all을 이용해서 변화시킬 전체속성을
선택할 수 있습니다.
.trans {
padding:20px 40px;
transition:all 0.3s ease;
}

아무래도 간편하게 all을 많이 사용하겠죠?
.trans {
padding:10px 20px;
transition:all 0.3s ease;
}
변이전
.trans:hover {
border:4px solid white;
}
변이후

트랜스폼
rotate scale
translateskew

div class=icons
a href=#img src=player2.png//a
a href=#img src=jack2.png//a
a href=#img src=radio2.png//a
/div
실험할 재료를 준비합니다.
.icons {
width:800px;
height:300px;
padding-‐top:100px;
text-‐align:center;
background:url('coffee2.jpg');
}
.icons a {
display:inline-‐block;
margin:0 20px;
}
.icons a img {
width:200px;
height:200px;
}

:hover 했을때 크기조절을 시켜봅시다.
.icons a:hover img {
transform:scale(1.5);
}
크기 조절
scale(2,3)
scaleX(2)
scaleY(3)
가로,세로
가로만
세로만
가로세로 모두
해당 이미지의 가운데를 기준으로 1.5배 확대됩니다.
transform:scale(1.5);
transform-‐origin:right bottom;
}
해당 이미지의 우측/하단 기준으로 1.5배 확대됩니다.
left top
left bottom
right top
right center
…
…

:hover 했을때 회전을 시켜봅시다.
transform:rotate(315deg);
}
회전
해당 이미지의 가운데를 기준으로 315deg로 회전합니다.
transform:rotate(315);
transform-‐origin:right center;
}
해당 이미지의 우측 중간을 기준으로 315deg로 회전합니다.

:hover 했을때 비틀어 봅시다.
transform:skew(30deg,0);
}
비틀기
해당 이미지의 가운데를 기준으로 x축 30deg, y축 0deg 회전합니다.
transform:skew(30deg,0);
transform-‐origin:left bottom;
}
skew(30deg)
skewX(30deg)
skewY(20deg)
가로,세로
가로만
세로만
가로세로 모두
가로세로 모두
해당 이미지의 왼쪽/하단를 기준으로 x축 30deg, y축 0deg 회전합니다.

:hover 했을때 이동시켜 봅시다.
transform:translate(0,-‐30px);
}
비틀기
해당 이미지의 가운데를 기준으로 y축으로 -30px이동했습니다.
transform:translate(0,-‐30px);
transform-‐origin:left bottom;
}
translateX(-‐30px)
translateY(-‐30px)
가로만
세로만
가로, 세로
기준을 좌측 하단으로 하면 어떻게 될까요?
?

여러가지를 동시에…
transform:rotate(315deg) scale(2);
} 회전 크기

여기에 부드러운 과정(transition)을 넣어
확대할 수 있습니다.
.icons a img {
width:200px;
height:200px;
transition:transform 0.3s ease-‐in;
}
transform:scale(2);
}
변이전
변이후
0.3S

애니메이션
0%(opacity:1) 50%(opacity:0) 100%(opacity:1)
@@@
@keyframes를 이용해 trainsition보다
자세한 움직임을 만듭니다.

실험할 재료를 준비합니다.
div class=ani
a href=#img src=jack2.png//a
/div
.ani {
width:400px;
height:300px;
padding-‐top:100px;
box-‐shadow:;
text-‐align:center;
background:url('coffee2.jpg');
}
.ani a {
display:inline-‐block;
}
.ani a img {
width:200px;
height:200px;
}

먼저 키프레임으로 변화지점을 설정합니다.
0% (opacity:1) 50% (opacity:0) 100% (opacity:1)
@@@
@keyframes fade_ani {
0% {opacity:1;}
50% {opacity:0;}
100% {opacity:1;}
}
해당 움직임의 이름을 정해줍니다.

움직임의 규격을 설정합니다.
0% (opacity:1) 50% (opacity:0) 100% (opacity:0)
@@@
0% {opacity:1;}
50% {opacity:0;}
100% {opacity:1;}
}
.ani a:hover img {
animation-‐name:fade_ani;
animation-‐duration:1s;
animation-‐timing-‐function:ease;
animation-‐iteration-‐count:infinite;
}
반복횟수
무한대, 혹은 숫자값
움직임을 시작할 대상에 셋팅을 합니다.

from과 to로 사용하기도 합니다.
from (opacity:1) 50% (opacity:0) to (opacity:0)
@@@
from {opacity:1;}
50% {opacity:0;}
to {opacity:1;}
}
.ani a:hover img {
}

키프레임별로 속도의
느낌을 추가할 수 있습니다.
@@@
from {opacity:1;}
50% {opacity:0; animation-‐timing-‐function:ease-‐out}
to {opacity:1;}
}

transform을 이용해 아래 그림과
같이 크기를 키워보세요
@@@
from {opacity:1;}
50% {opacity:0;}
to {opacity:1;}
}
?
.ani a:hover img {
}

@@@
from {opacity:1;}
50% {opacity:0;}
to {opacity:1;}
}
.ani a:hover img {
animation-‐delay:3s;
}
시작시간을 지연 시킬 수 있습니다.
3S

단축된 속성으로
.ani a:hover img {
animation-‐delay:3s;
}
.ani a:hover img {animation:fade_ani 1s ease 3s infinite}
이름
시간
속도의 느낌
지연시간
반복횟수

HTML5 & CSS3

More Related Content

What's hot

Viewers also liked

Similar to HTML5 & CSS3

HTML5 & CSS3