SlideShare a Scribd company logo
1 of 178
HTML5/CSS3
을수
Understanding
eulsoo.com
 
eulsoo.jung@gmail.com
이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.
안녕하세요^^
1.소개와 준비
문서에서 어플리케이션으로
HTML5 & CSS3
HTML5 & CSS3
HTML5 & CSS3
WEB OS
SMART TV
GLASS
CAR
DEMO
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;  
border-­‐radius  :  10px;  
border-­‐radius  :  10px;  
border-­‐radius  :  10px;  
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;
}
2.HTML5
간결해진 시작
!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  
   h1네이버  캐스트/h1  
   section  
      h1오픈  캐스트/h1  
      p이것은  오픈  캐스트의  내용입니다./p  
      section  
         h1오픈  게임  캐스트/h1  
         p이것은  오픈캐스트의  내용입니다./p  
      /section  
   /section  
/div
• 네이버 캐스트
• 오픈 캐스트
• 오픈 게임 캐스트
xhtml
html5
이런 html문서의 의미구조를 보여주는
툴도 있습니다.
div
h1네이버 캐스트/h1
section
h1오픈 캐스트/h1
p이것은 오픈 캐스트의 내용입니다./p
section
h1오픈 게임 캐스트/h1
p이것은 오픈캐스트의 내용입니다./p
/section
/section
/div
http://gsnedders.html5.org/outliner/
실제로 section안에 제목을 명시해주지
않더라도 암묵적인 제목을 가지게 됩니다.
div
h1네이버 캐스트/h1
section
p이것은 오픈 캐스트의 내용입니다./p
section
p이것은 오픈캐스트의 내용입니다./p
/section
/section
/div
그러므로 접근성을 위해서 명시적으로
넣어 주는 것이 좋습니다.
하지만headermainfooter는
의미구조에 영향을 주지 않습니다.
div  
   h1네이버  캐스트/h1  
          main  
   section  
      header  
         h1오픈  캐스트/h1  
      /header  
      div  
         p이것은  오픈  캐스트의  내용입니다./p  
         section  
            h1오픈  게임  캐스트/h1  
            p이것은  오픈캐스트의  내용입니다./p  
         /section  
      /div  
      footer  
         p작성자  김성민님/p  
      /footer  
   /section  
    /main  
/div
그러므로section은 접근성 측면에서 제목을
가지고 있으면 좋습니다.
section  class=navercast  
   header  
                    h1네이버  캐스트/h1  
          /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  
   h1네이버  캐스트/h1  
   section  
      header  
         h1오픈  캐스트/h1  
         nav  
            a  href=#자동차/a  
            a  href=#유머/a  
            a  href=#만화/a  
         /nav  
      /header  
      div  
         p이것은  오픈  캐스트의  내용입니다./p  
         section  
            h1오픈  게임  캐스트/h1  
            p이것은  오픈캐스트의  내용입니다./p  
         /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    
    source  src=html5video.mp4  type=video/mp4/  
/video
플레이옵션을 지원하는 속성들을
가지고 있습니다.
auto
metadata
자동플레이 반복 음소거
none : 준비해 두지 않음
auto : 기본값이며, 페이지로딩시 함께 로딩해 둠
metadata : 재생시간, 자막리스트등의 메타정보를 미리제공
동영상이 한페이지에 많을 경우 어떤 값이 좋을까요??
video  controls  poster=poster.png  
    source  src=html5video.mp4  type=video/mp4/  
    track  src=html5video.vtt  label=한글  자막  kind=subtitles  srclang=ko  
    /track  
/video
자막 추가 하기
자막이름자막파일 언어=한국종류=자막
크롬의 경우 자막파일은 동영상 파일과
함께 서버에 올려두어야 작동합니다.
자막 아이콘이
표시됩니다.
파이어폭스 지원안함
video  controls  poster=poster.png  
    source  src=html5video.mp4  type=video/mp4/  
    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  
     
   rect  x=35  y=60  height=15  width=0  
      animate  attributeType=XML  
              attributeName=width  
              to=75  
              dur=6s  
                              begin=2s  
              fill=freeze  /  
   /rect  
     
   rect  x=60  y=85  height=15  width=0  
      animate  attributeType=XML  
              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  
   rect  x=10  y=35  height=15  width=0  
      animate  attributeType=XML  
              attributeName=width  
              to=100  
              dur=8s  
                              begin=0s  
              fill=freeze  /  
   /rect  
     
   rect  x=35  y=60  height=15  width=0  
      animate  attributeType=XML  
              attributeName=width  
              to=75  
              dur=6s  
                              begin=2s  
              fill=freeze  /  
   /rect  
     
   rect  x=60  y=85  height=15  width=0  
      animate  attributeType=XML  
              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
svg  width=500px  height=500px            
          viewbox=0  0  600  600
svg  width=500px  height=500px        
          viewbox=0  0  400  400
svg기준 넓이에
항상 꽉 차게 되어있는
가시영역(viewbox)의
넓이 값이 동일하기
때문에 물체가 svg
영역에 꽉차보입니다.
svg기준 넓이에
항상 꽉 차게 되어있는
가시영역(viewbox)의
넓이 값이 증가하면서
그려지는 물체가 상대적으로
축소되어 보입니다.
svg기준 넓이에
항상 꽉 차게 되어있는
가시영역(viewbox)의
넓이 값이 줄어들면서
그려지는 물체가 상대적으로
확대되어 보입니다.
svg상자 가시영역(viewbox)
svg  width=500px  height=500px  viewBox=0  0  500  500
x y width height가시영역
svg  width=500px  height=500px            
          viewbox=0  0  500  500
svg  width=500px  height=500px            
          viewbox=0  -­‐100  500  500
svg상자 가시영역(viewbox)
svg  width=500px  height=500px      
          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;  
border:3px  solid  lime;  
box-­‐shadow:3px  3px  10px  black;
x y blur color
width:100px;  
height:100px;  
border:3px  solid  lime;  
box-­‐shadow:3px  3px  0  black;
x y blue color
width:100px;  
height:100px;  
border:3px  solid  lime;  
box-­‐shadow:inset  3px  3px  10px  black;
x y blur color안쪽으로
width:100px;  
height:100px;  
border:3px  solid  lime;  
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
..at  50px  50px,.. ..at  50px  90px,.. ..at  90px  90px,..
background:radial-­‐gradient(circle  farthest-­‐corner  at  50px  50px,lime,yellow);
5. 가장 먼 쪽의 박스 모서리까지 그라디언트 원을 만들기 위해 원중심의 위치를 결정하는 방식입니다.
90px
50px
50px
50px
90px
90px
..at  50px  50px,.. ..at  50px  90px,.. ..at  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;  
background-­‐repeat:  no-­‐repeat;
속성별로 나누어
각 각 지정할 수
있습니다.
이미지 사이즈를 각 각 지정했습니다.
width:800px;    
height:600px;  
padding:30px;  
border:10px  solid  rgba(0,  0,  0,  0.3);  
background-­‐image:url('images/coffee.jpg'),  
                                  url('images/weather.png'),  
                                  url('images/player.png'),  
                                  url('images/face.png'),  
                                  url('images/radio.png');  
background-­‐position:center  center,  
                                        right  bottom,  
                                        right  top,  
                                        left  bottom,  
                                        right  top;  
background-­‐size:200px  auto,  
                                250px  auto,  
                                300px  auto,  
                                50px  auto,  
                                100px  auto;  
background-­‐repeat:  no-­‐repeat;
weather가 player의 위에 올라옵니다.
먼저 선언한 이미지가
위로 올라오게 됩니다.
아래와 같이 만들어 보세요.?
width:800px;    
height:600px;  
border:30px  solid  rgba(0,  0,  0,  0.3);  
padding:30px;  
background-­‐clip:border-­‐box;  
background-­‐image:url('images/weather.png'),  
                                  url('images/player.png'),  
                                  url('images/face.png'),  
                                  url(‘images/radio.png’),  
                                  url('images/coffee.jpg');  
background-­‐position:right  bottom,  
                                        right  top,  
                                        left  bottom,  
                                        right  top,  
                                        center  center;  
background-­‐size:250px  auto,  
                                300px  auto,  
                                50px  auto,  
                                100px  auto,  
                                auto  auto;  
background-­‐repeat:  no-­‐repeat;
보더가 투명값을 가지고 있을 경우
배경이미지가 비춰 보이게 됩니다.
특별히  지정하지  않아도  
background-­‐clip:border-­‐box가  
기본값으로  되어  있습니다.  
div상자보다  큰  배경이미지가  
가운데를  기준으로  사방으로  넘어가서  
border-­‐box  영역에서  
상자보다 배경이미지가 클 경우 보더영역
까지 보이고 잘리게 됩니다.
width:800px;    
height:600px;  
border:30px  solid  rgba(0,  0,  0,  0.3);  
padding:30px;  
background-­‐clip:border-­‐box;  
background-­‐image:url('images/weather.png'),  
                                  url('images/player.png'),  
                                  url('images/face.png'),  
                                  url(‘images/radio.png’),  
                                  url('images/coffee.jpg');  
background-­‐position:right  bottom,  
                                        right  top,  
                                        left  bottom,  
                                        right  top,  
                                        right  top;  
background-­‐size:250px  auto,  
                                300px  auto,  
                                50px  auto,  
                                100px  auto,  
                                auto  auto;  
background-­‐repeat:  no-­‐repeat;
right  top은  이미지의  배치  위치가  보더
영역  안쪽이기  때문에  배경이미지가  비취
지  않습니다.
넘어가는  좌측과  우측면에는  보더를  
포함해서  자르기  때문에  비춰지게  됩
니다.
width:800px;    
height:600px;  
border:30px  solid  rgba(0,  0,  0,  0.3);  
padding:30px;  
background-­‐clip:padding-­‐box;  
background-­‐image:url('images/weather.png'),  
                                  url('images/player.png'),  
                                  url('images/face.png'),  
                                  url(‘images/radio.png’),  
                                  url('images/coffee.jpg');  
background-­‐position:right  bottom,  
                                        right  top,  
                                        left  bottom,  
                                        right  top,  
                                        right  top;  
background-­‐size:250px  auto,  
                                300px  auto,  
                                50px  auto,  
                                100px  auto,  
                                auto  auto;  
background-­‐repeat:  no-­‐repeat;
padding  영역의  끝을  기준으로  이미  잘렸
으므로  되므로  배경이미지가  보더에  비춰지
지  않습니다.
width:800px;    
height:600px;  
border:30px  solid  rgba(0,  0,  0,  0.3);  
padding:30px;  
background-­‐clip:content-­‐box;  
background-­‐image:url('images/weather.png'),  
                                  url('images/player.png'),  
                                  url('images/face.png'),  
                                  url(‘images/radio.png’),  
                                  url('images/coffee.jpg');  
background-­‐position:right  bottom,  
                                        right  top,  
                                        left  bottom,  
                                        right  top,  
                                        right  top;  
background-­‐size:250px  auto,  
                                300px  auto,  
                                50px  auto,  
                                100px  auto,  
                                auto  auto;  
background-­‐repeat:  no-­‐repeat;
content  box  영역을  기준으로  이미  잘렸기  때
문에  
배경이미지가  padding영역에  비춰지지  않습니
다.
width:800px;    
height:600px;  
border:30px  solid  rgba(0,  0,  0,  0.3);  
padding:30px;  
background-­‐origin:padding-­‐box;  
background-­‐clip:content-­‐box;  
background-­‐image:url('images/weather.png'),  
                                  url('images/player.png'),  
                                  url('images/face.png'),  
                                  url(‘images/radio.png’),  
                                  url('images/coffee.jpg');  
background-­‐position:right  bottom,  
                                        right  top,  
                                        left  bottom,  
                                        right  top,  
                                        right  top;  
background-­‐size:250px  auto,  
                                300px  auto,  
                                50px  auto,  
                                100px  auto,  
                                auto  auto;  
background-­‐repeat:  no-­‐repeat;
배경이미지를  배치하는  기준이되는  padding-­‐
box영역이  기본으로  설정되어  있습니다
기준되는 영역(padding-box)을
변경할 수 있습니다.
특별히  지정하지  않아도  
기준이  되는  박스가  padding-­‐box  
로  기본으로  되어  있습니다.  
width:800px;    
height:600px;  
border:30px  solid  rgba(0,  0,  0,  0.3);  
padding:30px;  
background-­‐origin:border-­‐box;  
background-­‐clip:content-­‐box;  
background-­‐image:url('images/weather.png'),  
                                  url('images/player.png'),  
                                  url('images/face.png'),  
                                  url(‘images/radio.png’),  
                                  url('images/coffee.jpg');  
background-­‐position:right  bottom,  
                                        right  top,  
                                        left  bottom,  
                                        right  top,  
                                        right  top;  
background-­‐size:250px  auto,  
                                300px  auto,  
                                50px  auto,  
                                100px  auto,  
                                auto  auto;  
background-­‐repeat:  no-­‐repeat;
기준이되는  padding-­‐box영역에서  
border-­‐box로  이동시켰습니다
width:800px;    
height:600px;  
border:30px  solid  rgba(0,  0,  0,  0.3);  
padding:30px;  
background-­‐origin:content-­‐box;  
background-­‐clip:content-­‐box;  
background-­‐image:url('images/weather.png'),  
                                  url('images/player.png'),  
                                  url('images/face.png'),  
                                  url(‘images/radio.png’),  
                                  url('images/coffee.jpg');  
background-­‐position:right  bottom,  
                                        right  top,  
                                        left  bottom,  
                                        right  top,  
                                        right  top;  
background-­‐size:250px  auto,  
                                300px  auto,  
                                50px  auto,  
                                100px  auto,  
                                auto  auto;  
background-­‐repeat:  no-­‐repeat;
기준이되는  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:2px  solid  lime;  
}
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)  {  
      background-­‐color:#ededed;  
   }
원하는 자식을 숫자로 선택할 수 있습니다.
.list  li:nth-­‐child(3n)  {  
      background-­‐color:#ededed;  
   }
.list  li:nth-­‐child(4)  {  
      background-­‐color:#ededed;  
   }
3의 배수로 선택하게 합니다.
4번째부터 시작해서 3의 배수로 선택.
.list  li:nth-­‐child(3n  +  4)  {  
      background-­‐color:#ededed;  
   }
odd를 사용하지 않고 홀수를 선택해 보세요.
?
.list  li:nth-­‐child(2n  +  1)  {  
      background-­‐color:#ededed;  
   }
뒤에서 부터 계산해서 선택합니다.
.list  li:nth-­‐last-­‐child(2)  {  
      background-­‐color:#ededed;  
   }
.list  li:nth-­‐last-­‐child(3n+1)  {  
      background-­‐color:#ededed;  
   }
뒤에서 첫번째를 선택
3배수로 선택
다른 태그로 형제들이 구성되어
있을때 선택하기
dl  
   dt1제목/dt  
   dd1설명입니다./dd  
   dt2제목/dt  
   dd2설명입니다./dd  
   dt3제목/dt  
   dd3설명입니다./dd  
   dt4제목/dt  
   dd4설명입니다./dd  
   dt5제목/dt  
   dd5설명입니다./dd  
/dl
dl    *  {  
   font-­‐size:14px;  
   padding:5px;  
   border-­‐top:1px  solid  #ededed;  
}  
dl    dd:last-­‐child  {  
   border-­‐bottom:1px  solid  #ededed;  
}
같은 태그안에서 홀수,짝수를 선택합니다.
dl  dt:nth-­‐of-­‐type(even)  {  
      background-­‐color:#ededed;  
   }
dl  dt:nth-­‐of-­‐type(odd)  {  
      background-­‐color:#ededed;  
   }
원하는 태그를 숫자로 선택할 수 있습니다.
dl  dt:nth-­‐of-­‐type(2n)  {  
      background-­‐color:#ededed;  
   }
dl  dt:nth-­‐of-­‐type(3)  {  
      background-­‐color:#ededed;  
   }
2의 배수로 선택하게 합니다.
만일 dt:nth-of-type(2n+1)라면 어떻게 될까요?
?
nth-child는 태그 구분을 하지 않습니다.
dl  dt:nth-­‐child(3)  {  
      background-­‐color:#ededed;  
   }
dl  dt:nth-­‐of-­‐type(3)  {  
      background-­‐color:#ededed;  
   }
VS
만일 dt:nth-child(4)라면 어떻게 될까요?
?
같은 태그중 첫째와 마지막을 선택합니다.
dl  dd:last-­‐of-­‐type  {  
      background-­‐color:#ededed;  
   }
dl  dt:first-­‐of-­‐type  {  
      background-­‐color:#ededed;  
   }
해당 태그가 하나일때만 선택합니다.
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;  
   border-­‐top:1px  solid  #ededed;  
}  
.accordion    dd:last-­‐child  {  
   border-­‐bottom:1px  solid  #ededed;  
}  
.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;  
   border-­‐top:1px  solid  #ededed;  
}  
.todo_list  li:last-­‐child  {  
   border-­‐bottom:1px  solid  #ededed;  
}
체크된 요소를 선택합니다.

.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;  
   border-­‐top:1px  solid  #ededed;  
}  
.input_list  li:last-­‐child  {  
   border-­‐bottom:1px  solid  #ededed;  
}
비활성화
비활성화
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;      
   border-­‐top:1px  solid  #ededed;  
}  
.list2  li:last-­‐child  {  
   border-­‐bottom:1px  solid  #ededed;  
}  
.list2  li.active  {color:red;}
~이 아닐때를 선택합니다.
.list2  li:not(.active)  {  
   background-­‐color:#ededed;  
}
calc( )로 계산하기
ul  class=graph  
   li  class=lank1span1위  100점/span/li  
   li  class=lank2span2위  50점/span/li  
/ul
.graph  {  
   width:500px;    
   padding:20px;    
   background-­‐color:#ededed;  
}  
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;  
   border-­‐radius:10px;  
   border:4px  solid  #911208;  
   box-­‐shadow:0  0  10px  #999;  
   background-­‐color:#f2531c;  
   transition-­‐property:background,box-­‐shadow;  
   transition-­‐duration:0.3s;  
   transition-­‐timing-­‐function:ease;  
  }
변이전
.trans:hover  {  
   background-­‐color:#931309;  
   box-­‐shadow:0  0  10px  yellow;  
  }
변이후
‘무엇을’ ‘몇초안에’ 어떤 ‘속도 느낌’으로.
.trans  {  
   padding:10px  20px;  
   border-­‐radius:10px;  
   border:4px  solid  #911208;  
   box-­‐shadow:0  0  10px  #999;  
   background-­‐color:#f2531c;  
   transition-­‐property:background,box-­‐shadow;  
   transition-­‐duration:0.3s;  
   transition-­‐timing-­‐function:ease;  
  }
배경색과 그림자를
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;  
   border-­‐radius:10px;  
   border:4px  solid  #911208;  
   box-­‐shadow:0  0  10px  #999;  
   background-­‐color:#f2531c;  
   transition-­‐property:background,box-­‐shadow;  
   transition-­‐duration:0.3s;  
   transition-­‐timing-­‐function:ease;  
   transition-­‐delay:0.5s;  
  }
0.5S
마우스가 오버되면
0.5초 있다가
변화가 시작됩니다.
변형시킬 다른 속성을 추가해 볼까요?
.trans  {  
   padding:10px  20px;  
   border-­‐radius:10px;  
   border:4px  solid  #911208;  
   box-­‐shadow:0  0  10px  #999;  
   background-­‐color:#f2531c;  
   transition-­‐property:border,  
                  background,  
                  box-­‐shadow;  
   transition-­‐duration:0.3s;  
   transition-­‐timing-­‐function:ease;  
  }
변이전
.trans:hover  {  
        border:4px  solid  white;  
   background-­‐color:#931309;  
   box-­‐shadow:0  0  10px  yellow;  
  }
변이후
단축된 속성으로
사용할 수 있습니다.
transition:background  0.3s  ease  0.5s;
변이시킬 속성 시간 속도 느낌 지연시간
.trans  {  
   padding:10px  20px;  
   border-­‐radius:10px;  
   border:4px  solid  #911208;  
   box-­‐shadow:0  0  10px  #999;  
   background-­‐color:#f2531c;  
   transition-­‐property:background;  
   transition-­‐duration:0.3s;  
   transition-­‐timing-­‐function:ease;  
        transition-­‐delay:0.5s;  
  }
.trans  {  
   padding:20px  40px;  
   border-­‐radius:20px;  
   border:8px  solid  #911208;  
   box-­‐shadow:0  0  10px  #999;  
   background-­‐color:#f2531c;  
   transition:border  0.3s  ease,  
               box-­‐shadow  0.3s  ease,  
               background  0.3s  ease;  
  }
여러가지 속성일 경우
속성별로 단축할 수 있습니다.
.trans  {  
   padding:20px  40px;  
   border-­‐radius:20px;  
   border:8px  solid  #911208;  
   box-­‐shadow:0  0  10px  #999;  
   background-­‐color:#f2531c;  
   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;  
   border-­‐radius:20px;  
   border:8px  solid  #911208;  
   box-­‐shadow:0  0  10px  #999;  
   background-­‐color:#f2531c;  
   transition:all  0.3s  ease;  
  }
아무래도 간편하게 all을 많이 사용하겠죠?
.trans  {  
   padding:10px  20px;  
   border-­‐radius:10px;  
   border:4px  solid  #911208;  
   box-­‐shadow:0  0  10px  #999;  
   background-­‐color:#f2531c;  
   transition:all  0.3s  ease;  
  }
변이전
.trans:hover  {  
        border:4px  solid  white;  
   background-­‐color:#931309;  
   box-­‐shadow:0  0  10px  yellow;  
  }
변이후
트랜스폼
rotate scale
translateskew
-­‐webkit-­‐(사파리/크롬),  firefox(정식지원),  ie10(정식지원)
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;  
   border-­‐radius:10px;  
   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배 확대됩니다.
.icons  a:hover  img  {  
   transform:scale(1.5);  
   transform-­‐origin:right  bottom;  
}
해당 이미지의 우측/하단 기준으로 1.5배 확대됩니다.
left    top  
left    bottom  
right  top  
right  center  
…  
…
:hover 했을때 회전을 시켜봅시다.
.icons  a:hover  img  {  
   transform:rotate(315deg);  
}
회전
해당 이미지의 가운데를 기준으로 315deg로 회전합니다.
.icons  a:hover  img  {  
   transform:rotate(315);  
   transform-­‐origin:right  center;  
}
해당 이미지의 우측 중간을 기준으로 315deg로 회전합니다.
:hover 했을때 비틀어 봅시다.
.icons  a:hover  img  {  
   transform:skew(30deg,0);  
}
비틀기
해당 이미지의 가운데를 기준으로 x축 30deg, y축 0deg 회전합니다.
.icons  a:hover  img  {  
   transform:skew(30deg,0);  
   transform-­‐origin:left  bottom;  
}
skew(30deg)  
skewX(30deg)  
skewY(20deg)
가로,세로
가로만
세로만
가로세로 모두
가로세로 모두
해당 이미지의 왼쪽/하단를 기준으로 x축 30deg, y축 0deg 회전합니다.
:hover 했을때 이동시켜 봅시다.
.icons  a:hover  img  {  
   transform:translate(0,-­‐30px);  
}
비틀기
해당 이미지의 가운데를 기준으로 y축으로 -30px이동했습니다.
.icons  a:hover  img  {  
   transform:translate(0,-­‐30px);  
   transform-­‐origin:left  bottom;  
}
translateX(-­‐30px)  
translateY(-­‐30px)
가로만
세로만
가로, 세로
기준을 좌측 하단으로 하면 어떻게 될까요?
?
여러가지를 동시에…
.icons  a:hover  img  {  
   transform:rotate(315deg)  scale(2);  
} 회전 크기
여기에 부드러운 과정(transition)을 넣어
확대할 수 있습니다.
.icons  a  img  {  
   width:200px;  
   height:200px;  
   transition:transform  0.3s  ease-­‐in;  
}
.icons  a:hover  img  {  
   transform:scale(2);  
}
변이전
변이후
0.3S
애니메이션
-­‐webkit-­‐(사파리/크롬),  firefox(정식지원),  ie10(정식지원)
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;  
   border-­‐radius:10px;  
   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)
@@@
@keyframes  fade_ani  {  
   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)
@@@
@keyframes  fade_ani  {  
   from  {opacity:1;}  
   50%  {opacity:0;}  
   to  {opacity:1;}  
}
.ani  a:hover  img  {  
   animation-­‐name:fade_ani;  
   animation-­‐duration:1s;  
   animation-­‐timing-­‐function:ease;  
   animation-­‐iteration-­‐count:infinite;  
}
키프레임별로 속도의
느낌을 추가할 수 있습니다.
from (opacity:1) 50% (opacity:0) to (opacity:0)
@@@
@keyframes  fade_ani  {  
   from  {opacity:1;}  
   50%  {opacity:0;  animation-­‐timing-­‐function:ease-­‐out}  
   to  {opacity:1;}  
}
transform을 이용해 아래 그림과
같이 크기를 키워보세요
from (opacity:1) 50% (opacity:0) to (opacity:0)
@@@
@keyframes  fade_ani  {  
   from  {opacity:1;}  
   50%  {opacity:0;}  
   to  {opacity:1;}  
}
?
.ani  a:hover  img  {  
   animation-­‐name:fade_ani;  
   animation-­‐duration:1s;  
   animation-­‐timing-­‐function:ease;  
   animation-­‐iteration-­‐count:infinite;  
}
from (opacity:1) 50% (opacity:0) to (opacity:0)
@@@
@keyframes  fade_ani  {  
   from  {opacity:1;}  
   50%  {opacity:0;}  
   to  {opacity:1;}  
}
.ani  a:hover  img  {  
   animation-­‐name:fade_ani;  
   animation-­‐duration:1s;  
   animation-­‐timing-­‐function:ease;  
   animation-­‐delay:3s;  
   animation-­‐iteration-­‐count:infinite;  
}
시작시간을 지연 시킬 수 있습니다.
3S
단축된 속성으로
사용할 수 있습니다.
.ani  a:hover  img  {  
   animation-­‐name:fade_ani;  
   animation-­‐duration:1s;  
   animation-­‐timing-­‐function:ease;  
   animation-­‐delay:3s;  
   animation-­‐iteration-­‐count:infinite;  
}
.ani  a:hover  img  {animation:fade_ani  1s  ease  3s  infinite}
이름
시간
속도의 느낌
지연시간
반복횟수

More Related Content

What's hot

[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?Nts Nuli
 
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XpressEngine
 
CSS 실무테크닉
CSS 실무테크닉CSS 실무테크닉
CSS 실무테크닉Eun Cho
 
Best practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupBest practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupToby Yun
 
문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시동현 조
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차Michael Yang
 
[2012널리세미나] Front-End 최적화의 끝판왕, CSM + Markup Complexity
[2012널리세미나]  Front-End 최적화의 끝판왕, CSM + Markup Complexity[2012널리세미나]  Front-End 최적화의 끝판왕, CSM + Markup Complexity
[2012널리세미나] Front-End 최적화의 끝판왕, CSM + Markup ComplexityNts Nuli
 
3주 CSS Basic
3주 CSS Basic3주 CSS Basic
3주 CSS Basic지수 윤
 
웹 개발 스터디 01 - HTML, CSS
웹 개발 스터디 01 - HTML, CSS웹 개발 스터디 01 - HTML, CSS
웹 개발 스터디 01 - HTML, CSSYu Yongwoo
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차Michael Yang
 
[APM] Homepage bbs
[APM] Homepage bbs[APM] Homepage bbs
[APM] Homepage bbsKim Heejin
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그은심 강
 

What's hot (20)

[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
 
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
 
Web_01 HTML
Web_01 HTMLWeb_01 HTML
Web_01 HTML
 
CSS 실무테크닉
CSS 실무테크닉CSS 실무테크닉
CSS 실무테크닉
 
Best practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupBest practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic Markup
 
문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
 
웹표준 교육
웹표준 교육웹표준 교육
웹표준 교육
 
[2012널리세미나] Front-End 최적화의 끝판왕, CSM + Markup Complexity
[2012널리세미나]  Front-End 최적화의 끝판왕, CSM + Markup Complexity[2012널리세미나]  Front-End 최적화의 끝판왕, CSM + Markup Complexity
[2012널리세미나] Front-End 최적화의 끝판왕, CSM + Markup Complexity
 
3주 CSS Basic
3주 CSS Basic3주 CSS Basic
3주 CSS Basic
 
웹 개발 스터디 01 - HTML, CSS
웹 개발 스터디 01 - HTML, CSS웹 개발 스터디 01 - HTML, CSS
웹 개발 스터디 01 - HTML, CSS
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
 
2-2. html5
2-2. html52-2. html5
2-2. html5
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
 
[APM] Homepage bbs
[APM] Homepage bbs[APM] Homepage bbs
[APM] Homepage bbs
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그
 

Viewers also liked

WebStandards-Basic 6.table & form
WebStandards-Basic 6.table & formWebStandards-Basic 6.table & form
WebStandards-Basic 6.table & formEulsoo Jung
 
Mike Walton Exec Search Resume
Mike Walton Exec Search ResumeMike Walton Exec Search Resume
Mike Walton Exec Search ResumeMike Walton
 
7serie goingto-100329200728-phpapp01
7serie goingto-100329200728-phpapp017serie goingto-100329200728-phpapp01
7serie goingto-100329200728-phpapp01v3_ronik
 
Going Paperless in Payroll
Going Paperless in PayrollGoing Paperless in Payroll
Going Paperless in PayrollMichael Johnson
 
Anteprima modulo 5
Anteprima modulo 5Anteprima modulo 5
Anteprima modulo 5eAgisco
 
Chapter 1 active learning
Chapter 1 active learningChapter 1 active learning
Chapter 1 active learningbldenigma
 
151202 教育評価論(三田)第9講
151202 教育評価論(三田)第9講151202 教育評価論(三田)第9講
151202 教育評価論(三田)第9講Koyo Yamamori
 
Grant proposal presentation
Grant proposal presentationGrant proposal presentation
Grant proposal presentationJason Stauffer
 
Anteprima modulo 7
Anteprima modulo 7Anteprima modulo 7
Anteprima modulo 7eAgisco
 
Municipalities and Districts Brochure
Municipalities and Districts Brochure Municipalities and Districts Brochure
Municipalities and Districts Brochure Henry Ka
 
Angina pektoris
Angina pektoris Angina pektoris
Angina pektoris saffaatifah
 
July 19, 2012: Market Outlook and Strategy Update for CPGs and Entrepreneurs
July 19, 2012: Market Outlook and Strategy Update for CPGs and EntrepreneursJuly 19, 2012: Market Outlook and Strategy Update for CPGs and Entrepreneurs
July 19, 2012: Market Outlook and Strategy Update for CPGs and EntrepreneursNutrcapnetwork
 
Killer food obesity
Killer food   obesityKiller food   obesity
Killer food obesityAdnan Abbas
 
151021 教育評価論(三田)第4講
151021 教育評価論(三田)第4講151021 教育評価論(三田)第4講
151021 教育評価論(三田)第4講Koyo Yamamori
 
Social mediaformarketeers kintinblog
Social mediaformarketeers kintinblogSocial mediaformarketeers kintinblog
Social mediaformarketeers kintinblogMinh Thắng Hoàng
 
Professional Practice in Assistive Techology
Professional Practice in Assistive TechologyProfessional Practice in Assistive Techology
Professional Practice in Assistive TechologyLarry Cobb
 
Virtual + Magazine (2012 vEN)
Virtual + Magazine (2012 vEN)Virtual + Magazine (2012 vEN)
Virtual + Magazine (2012 vEN)michaelhandforth
 

Viewers also liked (20)

WebStandards-Basic 6.table & form
WebStandards-Basic 6.table & formWebStandards-Basic 6.table & form
WebStandards-Basic 6.table & form
 
Mike baker r ecuerda
Mike baker r ecuerdaMike baker r ecuerda
Mike baker r ecuerda
 
คู่มือ Wordpress
คู่มือ Wordpressคู่มือ Wordpress
คู่มือ Wordpress
 
Mike Walton Exec Search Resume
Mike Walton Exec Search ResumeMike Walton Exec Search Resume
Mike Walton Exec Search Resume
 
Charts
ChartsCharts
Charts
 
7serie goingto-100329200728-phpapp01
7serie goingto-100329200728-phpapp017serie goingto-100329200728-phpapp01
7serie goingto-100329200728-phpapp01
 
Going Paperless in Payroll
Going Paperless in PayrollGoing Paperless in Payroll
Going Paperless in Payroll
 
Anteprima modulo 5
Anteprima modulo 5Anteprima modulo 5
Anteprima modulo 5
 
Chapter 1 active learning
Chapter 1 active learningChapter 1 active learning
Chapter 1 active learning
 
151202 教育評価論(三田)第9講
151202 教育評価論(三田)第9講151202 教育評価論(三田)第9講
151202 教育評価論(三田)第9講
 
Grant proposal presentation
Grant proposal presentationGrant proposal presentation
Grant proposal presentation
 
Anteprima modulo 7
Anteprima modulo 7Anteprima modulo 7
Anteprima modulo 7
 
Municipalities and Districts Brochure
Municipalities and Districts Brochure Municipalities and Districts Brochure
Municipalities and Districts Brochure
 
Angina pektoris
Angina pektoris Angina pektoris
Angina pektoris
 
July 19, 2012: Market Outlook and Strategy Update for CPGs and Entrepreneurs
July 19, 2012: Market Outlook and Strategy Update for CPGs and EntrepreneursJuly 19, 2012: Market Outlook and Strategy Update for CPGs and Entrepreneurs
July 19, 2012: Market Outlook and Strategy Update for CPGs and Entrepreneurs
 
Killer food obesity
Killer food   obesityKiller food   obesity
Killer food obesity
 
151021 教育評価論(三田)第4講
151021 教育評価論(三田)第4講151021 教育評価論(三田)第4講
151021 教育評価論(三田)第4講
 
Social mediaformarketeers kintinblog
Social mediaformarketeers kintinblogSocial mediaformarketeers kintinblog
Social mediaformarketeers kintinblog
 
Professional Practice in Assistive Techology
Professional Practice in Assistive TechologyProfessional Practice in Assistive Techology
Professional Practice in Assistive Techology
 
Virtual + Magazine (2012 vEN)
Virtual + Magazine (2012 vEN)Virtual + Magazine (2012 vEN)
Virtual + Magazine (2012 vEN)
 

Similar to HTML5 & CSS3

2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그은심 강
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드Jong-hyun Park
 
Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료joonseokkim11
 
XE Open seminar 테마만들기
XE Open seminar 테마만들기XE Open seminar 테마만들기
XE Open seminar 테마만들기Sungbum Hong
 
응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrapredribbon1307
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나JeongHun Byeon
 
웹표준(XHTML+CSS)
웹표준(XHTML+CSS)웹표준(XHTML+CSS)
웹표준(XHTML+CSS)ymtech
 
Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기Kyoung Up Jung
 
프론트엔드스터디 E02 css dom
프론트엔드스터디 E02 css dom프론트엔드스터디 E02 css dom
프론트엔드스터디 E02 css domYoung-Beom Rhee
 
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)ymtech
 
웹개발자가 알아야할 기술
웹개발자가 알아야할 기술웹개발자가 알아야할 기술
웹개발자가 알아야할 기술jaypi Ko
 
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Jeado Ko
 
더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components정호 전
 
HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게Youngkwon Lee
 
HTML5 & CSS3 - Video,Audio
HTML5 & CSS3 - Video,AudioHTML5 & CSS3 - Video,Audio
HTML5 & CSS3 - Video,Audiohyun soomyung
 
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4성일 한
 

Similar to HTML5 & CSS3 (20)

2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드
 
Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료
 
XE Open seminar 테마만들기
XE Open seminar 테마만들기XE Open seminar 테마만들기
XE Open seminar 테마만들기
 
응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
Pp3 devweb
Pp3 devwebPp3 devweb
Pp3 devweb
 
Mongo db 최범균
Mongo db 최범균Mongo db 최범균
Mongo db 최범균
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
웹표준(XHTML+CSS)
웹표준(XHTML+CSS)웹표준(XHTML+CSS)
웹표준(XHTML+CSS)
 
Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기
 
프론트엔드스터디 E02 css dom
프론트엔드스터디 E02 css dom프론트엔드스터디 E02 css dom
프론트엔드스터디 E02 css dom
 
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
 
2 1. html4.01
2 1. html4.012 1. html4.01
2 1. html4.01
 
웹개발자가 알아야할 기술
웹개발자가 알아야할 기술웹개발자가 알아야할 기술
웹개발자가 알아야할 기술
 
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션
 
더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components
 
HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게
 
HTML5 & CSS3 - Video,Audio
HTML5 & CSS3 - Video,AudioHTML5 & CSS3 - Video,Audio
HTML5 & CSS3 - Video,Audio
 
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4
 

HTML5 & CSS3

  • 3.   eulsoo.jung@gmail.com 이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다. 안녕하세요^^
  • 11. DEMO
  • 17. SEMANTICS PERFORMANCE INTEGRATION CONNECTIVITY OFFLINE STORAGE DEVICE ACCESS MULTIMEDIA 3D,GRAPHICS EFFECTS 섹셔닝과 의미구조 새로운 의미의 태그들 폼양식 웹 성능 향상과 하드웨어 지원 더나은 쌍방향 통신 오프라인 DATABASE 더 많은 장치의 사용 오디오와 비디오 3D와 벡터그래픽 STYLING 라운드 박스 그림자 변형과 애니메이션
  • 18. 새로운 의미의 태그들이 등장했습니다. 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 임베드컨텐츠
  • 19. 새로운 표현도 등장했습니다. @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 플렉스박스
  • 20. 새로운 html5 태그라도 브라우저가 똑똑하면 처리합니다. !doctype… xhtml  1.0…. section     video     audio   /section Chrome, Safari, FireFox… !doctype   html section     video     audio   /section ie8
  • 21. 하지만 아직은… 데스크탑 유선기준 2014.02.24 http://gs.statcounter.com
  • 22. 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
  • 23. CSS3의 경우 브라우저 회사별로 테스트용 접두어(vendor prefix)를 사용합니다. -­‐webkit-­‐   -­‐moz-­‐   -­‐o-­‐   -­‐ms-­‐ border-­‐radius  :  10px;   border-­‐radius  :  10px;   border-­‐radius  :  10px;   border-­‐radius  :  10px;   border-­‐radius  :  10px; W3C에 확정이 되면 사용할 수 있도록 가장 마 지막에 원래 이름을 넣어 둡니다. W3C에 확정되기전의 TEST단계일때 사용할 수 있는 브라우저 밴더들의 표시입니다. 웹킷엔진을 사용하는 사파리, 크롬 모질라재단의 파이어폭스 오페라 마이크로소프트의 익스플로러
  • 24. 쓰지 않아도 되는 속성들 .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; }
  • 26. 간결해진 시작 !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
  • 27. 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을 쓰지 않아도 됨
  • 28. !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 문서를 만들어 보세요. ?
  • 29. 느슨해진 문법 p  class=myClass  id=someId  Start  the  reactor xhtml처럼 대소문자를 구분하지 않고, 값에는 “”에 속성값을 넣지 않아도 되며, 반드시 닫지 않아도 됩니다. http://validator.w3.org/? html5문서에 위의 코드를 넣고 문법 검사를 해보세요.
  • 30. 컨텐츠 모델 • 메타데이터 콘텐츠 • 흐름 콘텐츠 • 섹션 정의 콘텐츠 • 헤딩 콘텐츠 • 구문 콘텐츠 • 내장 콘텐츠 • 대화형 콘텐츠 html5는 컨텐츠(정보/내용)의 형식에 따라 7가지 범주를 정 해 놓았습니다. http://www.w3.org/TR/2011/WD-html5-20110525/content-models.html
  • 31. 흐름이 있는 컨텐츠를 위한 태그들 대부분의 태그가 여기에 해당합니다. 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
  • 32. 한가지 주제로 색셔닝을 하기 위한 태그들 section   nav   article   aside
  • 33. 제목을 넣기 위한 태그들 h1   h2   h3   h4   h5   h6
  • 34. 텍스트 레벨의 태그들 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
  • 35. 장착(embed)되는 컨텐츠를 위한 태그들 audio   canvas   embed   iframe   img   math   object   svg   video  
  • 36. 상호작용을 위한 태그들 a   audio   button   details   embed   iframe   img   input   keygen   label   menu   object   select   textarea   video  
  • 37. 메타정보를 제공하는 태그들 base   command   link   meta   noscript   script   style   title  
  • 38. 섹셔닝과 의미구조 header   main   footer   section   article   aside   nav
  • 39. http://www.w3.org/TR/2011/WD-html5-20110525/content-models.html section   article   aside   nav 이 섹션을 정의하는 4가지 태그들은 특정 주제로 영역을 만들며 그 영역별로 제목과 푸터를 가질수 있습니다. 한가지 주제로 색셔닝을 하기 위한 태그들이 있었습니다.
  • 40. div는 아무 의미가 없지만 section은 “한가지 주제로 묶는다”라는 의미를 가집니다. section class=“navercast” 탭메뉴 부분 주요내용 부분 페이지 넘김과 셋팅부분 /section
  • 41. 그렇기 때문에 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
  • 42. header   main   footer 주제나 네비게이션을 사용할 목적으로 그룹핑할 때. 페이지내의 가장 주요한 부분을 그룹핑할 때. 한번만 사용가능. 저작자 관련정보 혹은 해당 내용과 관련된 링크등을 그룹핑 할 때.
  • 43. section은 html의 의미구조에 새로운 의미구조를 부여하게 됩니다. div     h1네이버  캐스트/h1     h2오픈  캐스트/h2     p이것은  오픈  캐스트의  내용입니다./p     h3오픈  게임  캐스트/h3     p이것은  오픈캐스트의  내용입니다./p   /div • 네이버 캐스트 • 오픈 캐스트 • 오픈 게임 캐스트 div     h1네이버  캐스트/h1     section       h1오픈  캐스트/h1       p이것은  오픈  캐스트의  내용입니다./p       section         h1오픈  게임  캐스트/h1         p이것은  오픈캐스트의  내용입니다./p       /section     /section   /div • 네이버 캐스트 • 오픈 캐스트 • 오픈 게임 캐스트 xhtml html5
  • 44. 이런 html문서의 의미구조를 보여주는 툴도 있습니다. div h1네이버 캐스트/h1 section h1오픈 캐스트/h1 p이것은 오픈 캐스트의 내용입니다./p section h1오픈 게임 캐스트/h1 p이것은 오픈캐스트의 내용입니다./p /section /section /div http://gsnedders.html5.org/outliner/
  • 45. 실제로 section안에 제목을 명시해주지 않더라도 암묵적인 제목을 가지게 됩니다. div h1네이버 캐스트/h1 section p이것은 오픈 캐스트의 내용입니다./p section p이것은 오픈캐스트의 내용입니다./p /section /section /div 그러므로 접근성을 위해서 명시적으로 넣어 주는 것이 좋습니다.
  • 46. 하지만headermainfooter는 의미구조에 영향을 주지 않습니다. div     h1네이버  캐스트/h1            main     section       header         h1오픈  캐스트/h1       /header       div         p이것은  오픈  캐스트의  내용입니다./p         section           h1오픈  게임  캐스트/h1           p이것은  오픈캐스트의  내용입니다./p         /section       /div       footer         p작성자  김성민님/p       /footer     /section      /main   /div
  • 47. 그러므로section은 접근성 측면에서 제목을 가지고 있으면 좋습니다. section  class=navercast     header                      h1네이버  캐스트/h1            /header     div       div  class=game_hot.../div       div  class=game_ect.../div       div  class=game_more.../div     /div     footer.../footer   /section 디자인상에 없다면 CSS로 보이지 않게 처리합니다.
  • 48. section처럼 의미구조에 영향을 미치는 태그는 세가지가 더있습니다. section   article   aside   nav 정해진 용도는 없고 단지 한가지 주제로 묶을때 컨텐츠를 발행하고 배포할 목적으로 만들어 짐(News, RSS) 의미적으로 부가적인 정보를 제공할 때 웹사이트의 주요 네비게이션 역할을 할 때 정해진 주제가 없음 정해진 주제가 있음
  • 49. div     h1네이버  캐스트/h1     section       header         h1오픈  캐스트/h1         nav           a  href=#자동차/a           a  href=#유머/a           a  href=#만화/a         /nav       /header       div         p이것은  오픈  캐스트의  내용입니다./p         section           h1오픈  게임  캐스트/h1           p이것은  오픈캐스트의  내용입니다./p         /section         aside           p이것은  배너광고입니다./p         /aside       /div       footer         p작성자  김성민님/p       /footer     /section   /div aside section nav
  • 50. nav article aside 모든 태그들은 태그이름이 갖는 위치의 뉘앙스 보다는 철저하게 컨텐츠가 가지고 있는 의미에 따라 선택해서 사용하면 됩니다. 사이트 전체에 영향을 미치는 네비게이션을 그룹핑하는데 사용하였습니다. 주로 header안에 있게 될 것입니다. 블로그나 뉴스사이트의 발행되는 글 한토막에 주로 사용합니다. 대부분 발행되는 날짜header 와 작성자footer를 가지고 있게 될 것입니다.
  • 51. 추가된 의미들 mark   meter   time   figure   figcaption   progress
  • 52. mark는 “다른 문맥과 연관성 때문에 강조된 텍스트”라는 의미를 갖습니다. 주로 검색결과 내의 검색어들을 다른 텍스트들 보다 도드라저 보이게 표시할 때 사용합니다. p이것은  markhtml5/mark와          markCCS3/mark의  특징입니다./p
  • 53. ㅋ 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이 기본값이 됩니다.
  • 54. 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의 보다 높거나 낮게 되었을때 어떤일이 벌어질까요? ?
  • 55. 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 속성을 쓰지 않을 수 있습니다. 그렇다면 어떤형식으로 날짜를 표기해야 할까요?
  • 56. figure는 본문중에 참조된 컨텐츠를 나타낼 때 사용합니다. figure      img  src=dotori.jpg  alt=도토리  일러스트      figcaption            illustration  도토리  by  a  href=http://yoonjihae.com윤지혜/a      /figcaption   /figure illustration 도토리 by 윤지혜 사진 동영상 code canvas 캡션이 필요할 때 사용할 수 있으며, 사용하지 않아도 괜찮습니다.
  • 57. progress는 진행률을 표시합니다. progress  value=70  max=10070  %/progress
  • 58. 입력양식 input  type=text  placeholder=홍길동  autofocus  / requiredautocomplete=onrange   search   url   tel   email   number   date   datetime   datetime-­‐local   time   month   color 슬라이더 표시 검색창 웹사이트 주소 전화번호 이메일 스피너 컨트롤로 숫자를 입력 년 , 월 , 일 년 , 월 , 일 , 시 , 분 , 초 , 시간대 년 , 월 , 일 , 시 , 분 , 초 시 , 분 , 초 년 , 월 입력할 예시값 표시 자동포커스 자동완성 기능 입력값 검사 색상선택
  • 59. type=range로 슬라이더를 사용할 수 있습니다. input  type=range  min=0  max=100/
  • 60. type=search로 검색창을 사용할 수 있습니다. input  type=search/ 사파리 크롬 파이어폭스
  • 61. type=number로 숫자를 입력하기 편리하게 해줍니다. input  type=number/ 스마트디바이스에서는 숫자자판으로 바꿔줍니다. 마우스로 클릭하여 숫자를 조절할 수 있습니다. 물론 직접입력할 수 도 있습니다.
  • 62. 다양한 입력값에 따른 키보드 지원 input  type=tel/ input  type=email/ input  type=url/
  • 63. 다양한 날짜와 시간 형식을 지원합니다. input  type=datetime/   input  type=datetime-­‐local/   input  type=date/   input  type=month/   input  type=time/ 시간대시간년.월.일
  • 64. 사파리, ie, 파이어폭스와는 달리 크롬 브라우져에서는 특별한 편의 UI로 보여줍니다. IOS에서는 기기에 최적화된 UI로 보여줍니다. type=“datetime” 일때(시간대가 포함된) 형식일때는 지원하지 않습니다.
  • 65. type=color은 색상을 입력할 수 있 도록 합니다. input  type=color/ 사파리, IE, 파이어폭스 지원안함.
  • 66. placeholder는 입력 예시어를 넣어둡니다. input  type=email  placeholder=이메일  입력/ 클릭을 하고 입력을 시작하면 없어집니다.
  • 67. autocomplete는 브라우저의 자동 완성 기능을 끄고 켤수 있습니다. input  type=email  autocomplete=off/ on이나 off중 하나의 값만을 가지며 이 속성을 쓰지 않으면 브라우저들은 autocomplete속성을 켜두고 있습니다.
  • 68. autofocus는 페이지가 로딩되면 그 위치에 커서가 가있게 합니다. input  type=tel  autofocus/ 불린속성으로서 값을 넣을 필요 없으며 한페이지에 한번만 쓸 수 있습니다. textareaselect와 같은 모든 form 필드에 사용할 수 있습니다.
  • 69. required는 입력하지 않았을 경우 서버로 전송하지 않는 역할(검증)을 합니다. input  type=email  required/ 불린속성으로서 값을 넣을 필요가 없습니다. 존재하는 것만으로도 작동하기 때문입니다. 이메일을 입력해 주세요!
  • 70. datalist는 제공된 목록중에 하나를 선택할 수 있게 해줍니다. input  list=friends/   datalist  id=friends      option  value=장동건      option  value=사무엘잭슨      option  value=원빈      option  value=정을수   /datalist 사파리지원안함 지원하지 않는 브라우저에서는 input만 사용할 수 있어서 좋습니다.
  • 71. video video  src=html5video.mp4  controls/video http://goo.gl/2n4i9g (샘플비디오파일) 플레이 제어판 표시
  • 72. video  contols      source  src=html5video.webm  type=video/webm  /      source  src=html5video.mp4  type=video/mp4/   /video source를 이용해서 다양한 비디오 포멧을 지원할 수 있습니다. webm을 지원하지 않으면 아래로! 파이어폭스, 크롬, IE9+ 지원 사파리, 크롬, IE9+ 지원 type을 이용해 브라우저에게 좀 더 자세한 정보를 제공합니다.
  • 73. video  src=html5video.mp4#t10,30  contols/video 특정 부분부터 플레이하기 10초 지점에서 시작해서 30초 지점까지 플레이 10에서 시작해서 마지막까지 플레이 시킬려면 어떻게 해야 할까요? #t10,30?
  • 74. video  src=html5video.mp4  contols  poster=poster.png/video 시작전 이미지를 플레이어에 보여주기.
  • 75. video  autoplay  preload=none  loop  muted        source  src=html5video.mp4  type=video/mp4/   /video 플레이옵션을 지원하는 속성들을 가지고 있습니다. auto metadata 자동플레이 반복 음소거 none : 준비해 두지 않음 auto : 기본값이며, 페이지로딩시 함께 로딩해 둠 metadata : 재생시간, 자막리스트등의 메타정보를 미리제공 동영상이 한페이지에 많을 경우 어떤 값이 좋을까요??
  • 76. video  controls  poster=poster.png      source  src=html5video.mp4  type=video/mp4/      track  src=html5video.vtt  label=한글  자막  kind=subtitles  srclang=ko      /track   /video 자막 추가 하기 자막이름자막파일 언어=한국종류=자막 크롬의 경우 자막파일은 동영상 파일과 함께 서버에 올려두어야 작동합니다. 자막 아이콘이 표시됩니다. 파이어폭스 지원안함
  • 77. video  controls  poster=poster.png      source  src=html5video.mp4  type=video/mp4/      track  src=html5video.vtt  label=한글  자막  kind=subtitles  srclang=ko  default/track      track  src=html5video-­‐en.vtt  label=English  kind=subtitles  srclang=en/track   /video 여러 언어의 자막 추가할 수 있습니다. 사파리 브라우저의 기본 플레이에서 자막옵션을 사용할 수 있습니다. 기본 언어로 설정
  • 78. 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 시 : 분 : 초 : 밀리초 시작 끝
  • 79. 이런 데이타를 이용해서 새로운 서비스를 만들어 낼 수도 있습니다. http://www.samdutton.net/mapTrack/ 지도와 동영상을 씽크해서 지도에 원 하는 곳을 동영상에서 보여줍니다.
  • 80. 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 : 재생시간, 자막리스트등의 메타정보를 미리제공
  • 81. 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 벡터그래픽
  • 82. p네온  그래픽  효과의  글씨입니다./p   canvas  id=neon  width=300px  height=200px     img  src=neon.jpg  alt=/   /canvas canvas는 접근성과 단계적인 지원을 고려해야 합니다. 네온  그래픽  효과의  글씨입니다. 자바스크립트를 지원하지 않거나 canvas를 지원하지 않는 경우에 태그 안쪽에 이미지로 표시해 줍니다. 또한 casvas안쪽을 읽어주지 못하는 스크린리더기를 위해 canvas앞이나 뒤쪽에 대체 텍스트를 넣어줍니다. 이미지
  • 83. 캔버스 그래프일 경우에는 표로된 정보를 함께 넣어줍니다. http://goo.gl/uiBzsH
  • 84. ?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         rect  x=35  y=60  height=15  width=0       animate  attributeType=XML            attributeName=width            to=75            dur=6s                              begin=2s            fill=freeze  /     /rect         rect  x=60  y=85  height=15  width=0       animate  attributeType=XML            attributeName=width            to=50   http://goo.gl/g7w6sw graph.svg img  src=graph.svg  / test.html svg 벡터그래픽 이미지 태그를 이용해서 svg파일을 불러옵니다. 네모그리기 애니메이션
  • 85. !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     rect  x=10  y=35  height=15  width=0       animate  attributeType=XML            attributeName=width            to=100            dur=8s                              begin=0s            fill=freeze  /     /rect         rect  x=35  y=60  height=15  width=0       animate  attributeType=XML            attributeName=width            to=75            dur=6s                              begin=2s            fill=freeze  /     /rect         rect  x=60  y=85  height=15  width=0       animate  attributeType=XML            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를 위한 수많은 속성 들이 존재하고 있습니다.
  • 86. .svg 형식을 지원하는 그래픽 프로그램을 이용할 수 있습니다. 어도비 일러스트레이터에서 .svg파일로 저장할 수 있 습니다.
  • 87. 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
  • 88. svg  width=500px  height=500px                      viewbox=0  0  500  500 500 500 500 500 600 400 svg  width=500px  height=500px                      viewbox=0  0  600  600 svg  width=500px  height=500px                  viewbox=0  0  400  400 svg기준 넓이에 항상 꽉 차게 되어있는 가시영역(viewbox)의 넓이 값이 동일하기 때문에 물체가 svg 영역에 꽉차보입니다. svg기준 넓이에 항상 꽉 차게 되어있는 가시영역(viewbox)의 넓이 값이 증가하면서 그려지는 물체가 상대적으로 축소되어 보입니다. svg기준 넓이에 항상 꽉 차게 되어있는 가시영역(viewbox)의 넓이 값이 줄어들면서 그려지는 물체가 상대적으로 확대되어 보입니다. svg상자 가시영역(viewbox) svg  width=500px  height=500px  viewBox=0  0  500  500 x y width height가시영역
  • 89. svg  width=500px  height=500px                      viewbox=0  0  500  500 svg  width=500px  height=500px                      viewbox=0  -­‐100  500  500 svg상자 가시영역(viewbox) svg  width=500px  height=500px                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
  • 90. 다양한 크기의 디바이스의 요청에 따라 svg쓰임새가 주목 받고 있습니다. http://iconmelon.com/ http://www.flaticon.com http://iconmonstr.com
  • 91. 컬러와 투명도 background:  hsla(120,  95%,  29%,  0.7);   color:  rgba(98,  33,  128,  0.5);   opacity:  0.7; 투명도
  • 92. 보더 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
  • 93. 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 가로 세로
  • 94. 그림자 width:100px;   height:100px;   border:3px  solid  lime;   box-­‐shadow:3px  3px  10px  black; x y blur color width:100px;   height:100px;   border:3px  solid  lime;   box-­‐shadow:3px  3px  0  black; x y blue color
  • 95. width:100px;   height:100px;   border:3px  solid  lime;   box-­‐shadow:inset  3px  3px  10px  black; x y blur color안쪽으로 width:100px;   height:100px;   border:3px  solid  lime;   box-­‐shadow:0  15px  10px  -­‐12px  black; 뿌려지는 반경값 x y blur color
  • 96. box-­‐shadow:0  0  10px  5px  black,                        40px  -­‐30px  lime,                        40px  30px  50px  red,                      -­‐40px  30px  yellow,                      -­‐40px  -­‐30px  50px  blue; 콤마를 이용해 여러개의 그림자를 만들수 있습니다.
  • 97. 글씨에도 그림자를 줄 수 있습니다. text-­‐shadow:2px  2px  5px  #000; text-­‐shadow:2px  2px  0  #000; x y blur color x y blur color
  • 99. 웹 폰트는 상대방 컴퓨터에 폰트가 없어도 내가 디자인한 서체로 볼 수 있게 해줍니다. @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. 사용합니다
  • 100. 그런데 브라우저별로 사용할 수 있는 포멧이 다릅니다.
  • 101. 그렇다면 서체를 포멧별로 만든다음 서버에 올려야 겠죠? ttf, otf 다운로드 ttf eot 변환 ttf woff 변환 1. 다운로드 2. 변환 3. 사용 @  font-­‐face  {     ttf,  eot,  woff   } 브라우저별로 지원하는 포멧들을 모두 셋팅하고 사용합니다.
  • 102. 지원하는 환경마다 쓸 수 있도록 셋팅을 합니다. @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  */          }
  • 103. 좀 더 쉽게 사용할 수 있는 방법도 있습니다. http://www.google.com/fonts/earlyaccess 정식 제공전 테스트 사이트 http://www.google.com/fonts/ 구글 웹폰트
  • 104. 한글도 사용할 수 있게 되었습니다. 정식 제공전 테스트 사이트에 등록된 한글들 @import  url(http://fonts.googleapis.com/                              earlyaccess/nanumgothic.css); CSS .webfont3  {font-­‐family:  'Nanum                Gothic',  sans-­‐serif;  font-­‐size:50px;} 1.셋팅하고 2.사용합니다
  • 105. 굵기에 맞는 폰트로 사용할 수 있습니다. @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에 굵기 별로 만들어진 웹폰트가 셋팅되어 있기 때문에 사용만 하면 됩니다.
  • 106. 그라디언트 background:linear-­‐gradient(left,lime,yellow); 시작점 출발색 끝색 background:linear-­‐gradient(315deg,lime,yellow); 3. 시작점을 background-position 의 값처럼 다양하게 사용할 수 있습니다 background:linear-­‐gradient(lime,yellow); 출발색 끝색 1. 기본방향은 위에서 아래쪽입니다. 2. 시작점을 정해줄 수 있습니다. 315deg
  • 107. 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번 반복됩니다) 중간색 중간색 중간색
  • 108. 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 ?
  • 109. 라운드 그라디언트도 만들수 있습니다. 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) 직사각 정사각
  • 110. 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 ..at  50px  50px,.. ..at  50px  90px,.. ..at  90px  90px,..
  • 111. background:radial-­‐gradient(circle  farthest-­‐corner  at  50px  50px,lime,yellow); 5. 가장 먼 쪽의 박스 모서리까지 그라디언트 원을 만들기 위해 원중심의 위치를 결정하는 방식입니다. 90px 50px 50px 50px 90px 90px ..at  50px  50px,.. ..at  50px  90px,.. ..at  90px  90px,.. background:radial-­‐gradient(ellipse  farthest-­‐corner  at  50px  50px,lime,orange  30%,yellow); 6. 타원옵션과 중간색과 색지점 옵션을 추할 수 있습니다. 50px 50px 30% 50px 50px 30% circle ellipse 위와 같이 넓이 높이가 다른 박스의 경우에 값을 넣지 않아도 그에 맞는 타원형이 됩니다.
  • 112. 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 ?
  • 113. 텍스트 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인 상태에서 잘려나간 글씨가 있다는 것을 알려주기 위해서 … 표시를 넣어줍니다.
  • 114. 백그라운드 .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
  • 115. 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;   background-­‐repeat:  no-­‐repeat; 속성별로 나누어 각 각 지정할 수 있습니다. 이미지 사이즈를 각 각 지정했습니다.
  • 116. width:800px;     height:600px;   padding:30px;   border:10px  solid  rgba(0,  0,  0,  0.3);   background-­‐image:url('images/coffee.jpg'),                                    url('images/weather.png'),                                    url('images/player.png'),                                    url('images/face.png'),                                    url('images/radio.png');   background-­‐position:center  center,                                          right  bottom,                                          right  top,                                          left  bottom,                                          right  top;   background-­‐size:200px  auto,                                  250px  auto,                                  300px  auto,                                  50px  auto,                                  100px  auto;   background-­‐repeat:  no-­‐repeat; weather가 player의 위에 올라옵니다. 먼저 선언한 이미지가 위로 올라오게 됩니다.
  • 118. width:800px;     height:600px;   border:30px  solid  rgba(0,  0,  0,  0.3);   padding:30px;   background-­‐clip:border-­‐box;   background-­‐image:url('images/weather.png'),                                    url('images/player.png'),                                    url('images/face.png'),                                    url(‘images/radio.png’),                                    url('images/coffee.jpg');   background-­‐position:right  bottom,                                          right  top,                                          left  bottom,                                          right  top,                                          center  center;   background-­‐size:250px  auto,                                  300px  auto,                                  50px  auto,                                  100px  auto,                                  auto  auto;   background-­‐repeat:  no-­‐repeat; 보더가 투명값을 가지고 있을 경우 배경이미지가 비춰 보이게 됩니다. 특별히  지정하지  않아도   background-­‐clip:border-­‐box가   기본값으로  되어  있습니다.   div상자보다  큰  배경이미지가   가운데를  기준으로  사방으로  넘어가서   border-­‐box  영역에서   상자보다 배경이미지가 클 경우 보더영역 까지 보이고 잘리게 됩니다.
  • 119. width:800px;     height:600px;   border:30px  solid  rgba(0,  0,  0,  0.3);   padding:30px;   background-­‐clip:border-­‐box;   background-­‐image:url('images/weather.png'),                                    url('images/player.png'),                                    url('images/face.png'),                                    url(‘images/radio.png’),                                    url('images/coffee.jpg');   background-­‐position:right  bottom,                                          right  top,                                          left  bottom,                                          right  top,                                          right  top;   background-­‐size:250px  auto,                                  300px  auto,                                  50px  auto,                                  100px  auto,                                  auto  auto;   background-­‐repeat:  no-­‐repeat; right  top은  이미지의  배치  위치가  보더 영역  안쪽이기  때문에  배경이미지가  비취 지  않습니다. 넘어가는  좌측과  우측면에는  보더를   포함해서  자르기  때문에  비춰지게  됩 니다.
  • 120. width:800px;     height:600px;   border:30px  solid  rgba(0,  0,  0,  0.3);   padding:30px;   background-­‐clip:padding-­‐box;   background-­‐image:url('images/weather.png'),                                    url('images/player.png'),                                    url('images/face.png'),                                    url(‘images/radio.png’),                                    url('images/coffee.jpg');   background-­‐position:right  bottom,                                          right  top,                                          left  bottom,                                          right  top,                                          right  top;   background-­‐size:250px  auto,                                  300px  auto,                                  50px  auto,                                  100px  auto,                                  auto  auto;   background-­‐repeat:  no-­‐repeat; padding  영역의  끝을  기준으로  이미  잘렸 으므로  되므로  배경이미지가  보더에  비춰지 지  않습니다.
  • 121. width:800px;     height:600px;   border:30px  solid  rgba(0,  0,  0,  0.3);   padding:30px;   background-­‐clip:content-­‐box;   background-­‐image:url('images/weather.png'),                                    url('images/player.png'),                                    url('images/face.png'),                                    url(‘images/radio.png’),                                    url('images/coffee.jpg');   background-­‐position:right  bottom,                                          right  top,                                          left  bottom,                                          right  top,                                          right  top;   background-­‐size:250px  auto,                                  300px  auto,                                  50px  auto,                                  100px  auto,                                  auto  auto;   background-­‐repeat:  no-­‐repeat; content  box  영역을  기준으로  이미  잘렸기  때 문에   배경이미지가  padding영역에  비춰지지  않습니 다.
  • 122. width:800px;     height:600px;   border:30px  solid  rgba(0,  0,  0,  0.3);   padding:30px;   background-­‐origin:padding-­‐box;   background-­‐clip:content-­‐box;   background-­‐image:url('images/weather.png'),                                    url('images/player.png'),                                    url('images/face.png'),                                    url(‘images/radio.png’),                                    url('images/coffee.jpg');   background-­‐position:right  bottom,                                          right  top,                                          left  bottom,                                          right  top,                                          right  top;   background-­‐size:250px  auto,                                  300px  auto,                                  50px  auto,                                  100px  auto,                                  auto  auto;   background-­‐repeat:  no-­‐repeat; 배경이미지를  배치하는  기준이되는  padding-­‐ box영역이  기본으로  설정되어  있습니다 기준되는 영역(padding-box)을 변경할 수 있습니다. 특별히  지정하지  않아도   기준이  되는  박스가  padding-­‐box   로  기본으로  되어  있습니다.  
  • 123. width:800px;     height:600px;   border:30px  solid  rgba(0,  0,  0,  0.3);   padding:30px;   background-­‐origin:border-­‐box;   background-­‐clip:content-­‐box;   background-­‐image:url('images/weather.png'),                                    url('images/player.png'),                                    url('images/face.png'),                                    url(‘images/radio.png’),                                    url('images/coffee.jpg');   background-­‐position:right  bottom,                                          right  top,                                          left  bottom,                                          right  top,                                          right  top;   background-­‐size:250px  auto,                                  300px  auto,                                  50px  auto,                                  100px  auto,                                  auto  auto;   background-­‐repeat:  no-­‐repeat; 기준이되는  padding-­‐box영역에서   border-­‐box로  이동시켰습니다
  • 124. width:800px;     height:600px;   border:30px  solid  rgba(0,  0,  0,  0.3);   padding:30px;   background-­‐origin:content-­‐box;   background-­‐clip:content-­‐box;   background-­‐image:url('images/weather.png'),                                    url('images/player.png'),                                    url('images/face.png'),                                    url(‘images/radio.png’),                                    url('images/coffee.jpg');   background-­‐position:right  bottom,                                          right  top,                                          left  bottom,                                          right  top,                                          right  top;   background-­‐size:250px  auto,                                  300px  auto,                                  50px  auto,                                  100px  auto,                                  auto  auto;   background-­‐repeat:  no-­‐repeat; 기준이되는  padding-­‐box영역에서   content-­‐box로  이동시켰습니다
  • 125. 멀티컬럼 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
  • 126. .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%로 한다면 어떻게 될까요? ?
  • 127. 박스 넓이 맞추기 .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;   } 양쪽 패딩을 추가하자 넓이가 모자라 아래로 떨어지고 맙니다.
  • 128. .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
  • 129. .col2    div  {     float:left;       width:200px;       height:100px;    padding:0  10px;    box-­‐sizing:border-­‐box;    border:2px  solid  lime;   } border-­‐box이기 때문에 보더영역까지도 포함됩니다. 200px200px 200px 200px .col2    div  {     float:left;       width:200px;       height:100px;    padding:0  10px;    box-­‐sizing:content-­‐box;   } 사실 기본값은 content-box이기 때문에 box-sizing을 쓰지 않을때는 넓이의 기준이 컨텐츠 영역이 되는 것입니다.
  • 130. 선택자 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;   }
  • 131. 홀수와 짝수로 선택할 수 있습니다. .list  li:nth-­‐child(even)  {       background-­‐color:#ededed;     } .list  li:nth-­‐child(odd)  {       background-­‐color:#ededed;     }
  • 132. 원하는 자식을 숫자로 선택할 수 있습니다. .list  li:nth-­‐child(3n)  {       background-­‐color:#ededed;     } .list  li:nth-­‐child(4)  {       background-­‐color:#ededed;     } 3의 배수로 선택하게 합니다.
  • 133. 4번째부터 시작해서 3의 배수로 선택. .list  li:nth-­‐child(3n  +  4)  {       background-­‐color:#ededed;     } odd를 사용하지 않고 홀수를 선택해 보세요. ? .list  li:nth-­‐child(2n  +  1)  {       background-­‐color:#ededed;     }
  • 134. 뒤에서 부터 계산해서 선택합니다. .list  li:nth-­‐last-­‐child(2)  {       background-­‐color:#ededed;     } .list  li:nth-­‐last-­‐child(3n+1)  {       background-­‐color:#ededed;     } 뒤에서 첫번째를 선택 3배수로 선택
  • 135. 다른 태그로 형제들이 구성되어 있을때 선택하기 dl     dt1제목/dt     dd1설명입니다./dd     dt2제목/dt     dd2설명입니다./dd     dt3제목/dt     dd3설명입니다./dd     dt4제목/dt     dd4설명입니다./dd     dt5제목/dt     dd5설명입니다./dd   /dl dl    *  {     font-­‐size:14px;     padding:5px;     border-­‐top:1px  solid  #ededed;   }   dl    dd:last-­‐child  {     border-­‐bottom:1px  solid  #ededed;   }
  • 136. 같은 태그안에서 홀수,짝수를 선택합니다. dl  dt:nth-­‐of-­‐type(even)  {       background-­‐color:#ededed;     } dl  dt:nth-­‐of-­‐type(odd)  {       background-­‐color:#ededed;     }
  • 137. 원하는 태그를 숫자로 선택할 수 있습니다. dl  dt:nth-­‐of-­‐type(2n)  {       background-­‐color:#ededed;     } dl  dt:nth-­‐of-­‐type(3)  {       background-­‐color:#ededed;     } 2의 배수로 선택하게 합니다. 만일 dt:nth-of-type(2n+1)라면 어떻게 될까요? ?
  • 138. nth-child는 태그 구분을 하지 않습니다. dl  dt:nth-­‐child(3)  {       background-­‐color:#ededed;     } dl  dt:nth-­‐of-­‐type(3)  {       background-­‐color:#ededed;     } VS 만일 dt:nth-child(4)라면 어떻게 될까요? ?
  • 139. 같은 태그중 첫째와 마지막을 선택합니다. dl  dd:last-­‐of-­‐type  {       background-­‐color:#ededed;     } dl  dt:first-­‐of-­‐type  {       background-­‐color:#ededed;     }
  • 140. 해당 태그가 하나일때만 선택합니다. dl  dd:only-­‐of-­‐type  {       color:red;     } dl  dt:only-­‐of-­‐type  {       color:red;     }
  • 141. 클릭한 링크의 대상이 되는 요소를 선택합니 다. 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;     border-­‐top:1px  solid  #ededed;   }   .accordion    dd:last-­‐child  {     border-­‐bottom:1px  solid  #ededed;   }   .accordion  dt  a  {color:orange;}
  • 142. .accordion  #one:target,   .accordion  #two:target,   .accordion  #three:target  {     background-­‐color:orange;     color:white;   } :target선택자를 이용해서 아코디언 메뉴를 만들어 보세요.?
  • 143. 다양한 상태에 따라 선택할 수 있습니다. 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;     border-­‐top:1px  solid  #ededed;   }   .todo_list  li:last-­‐child  {     border-­‐bottom:1px  solid  #ededed;   }
  • 144. 체크된 요소를 선택합니다. .todo_list  input:checked  +  label  {     color:lime;   } .todo_list  li:empty:before  {     content:'할일을  등록하세요!’;     font-­‐size:12px;     color:orange;   } 빈 요소를 선택합니다. 비어있음
  • 145. 활성화나 비활성화 일때를 선택합니다. 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;     border-­‐top:1px  solid  #ededed;   }   .input_list  li:last-­‐child  {     border-­‐bottom:1px  solid  #ededed;   } 비활성화 비활성화 disabled를 넣지 않으면 활성화
  • 146. .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선택자 이용해서 메세지를 출력합니다.
  • 147. 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;         border-­‐top:1px  solid  #ededed;   }   .list2  li:last-­‐child  {     border-­‐bottom:1px  solid  #ededed;   }   .list2  li.active  {color:red;} ~이 아닐때를 선택합니다. .list2  li:not(.active)  {     background-­‐color:#ededed;   }
  • 148. calc( )로 계산하기 ul  class=graph     li  class=lank1span1위  100점/span/li     li  class=lank2span2위  50점/span/li   /ul .graph  {     width:500px;       padding:20px;       background-­‐color:#ededed;   }   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%에서 빼주었습니다.
  • 149. 트랜지션 변이전 변이후 trasition은 중간과정의 변이를 자동으로 만들어 줍니다. -­‐webkit-­‐(사파리/크롬),  firefox(정식지원),  ie10(정식지원)
  • 150. 먼저 변이전과 변이후를 만들어 둡니다. .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;    } 변이후
  • 151. 어떤것이 어떤과정을 통해 변형시킬지를 변형전에 셋팅해 둡니다. .trans  {     padding:10px  20px;     border-­‐radius:10px;     border:4px  solid  #911208;     box-­‐shadow:0  0  10px  #999;     background-­‐color:#f2531c;     transition-­‐property:background,box-­‐shadow;     transition-­‐duration:0.3s;     transition-­‐timing-­‐function:ease;    } 변이전 .trans:hover  {     background-­‐color:#931309;     box-­‐shadow:0  0  10px  yellow;    } 변이후
  • 152. ‘무엇을’ ‘몇초안에’ 어떤 ‘속도 느낌’으로. .trans  {     padding:10px  20px;     border-­‐radius:10px;     border:4px  solid  #911208;     box-­‐shadow:0  0  10px  #999;     background-­‐color:#f2531c;     transition-­‐property:background,box-­‐shadow;     transition-­‐duration:0.3s;     transition-­‐timing-­‐function:ease;    } 배경색과 그림자를 0.3초 동안에 ease라는 속도 느낌으로
  • 153. 중간과정의 변화는 자동으로 만듭니다. 변이전 변이후 0.3S
  • 154. 다양한 느낌의 속도 변화를 줄 수 있습니다. 0.3S linear ease
  • 156. 시간을 지연 시킬수도 있습니다. 변이전 변이후 0.3S .trans  {     padding:10px  20px;     border-­‐radius:10px;     border:4px  solid  #911208;     box-­‐shadow:0  0  10px  #999;     background-­‐color:#f2531c;     transition-­‐property:background,box-­‐shadow;     transition-­‐duration:0.3s;     transition-­‐timing-­‐function:ease;     transition-­‐delay:0.5s;    } 0.5S 마우스가 오버되면 0.5초 있다가 변화가 시작됩니다.
  • 157. 변형시킬 다른 속성을 추가해 볼까요? .trans  {     padding:10px  20px;     border-­‐radius:10px;     border:4px  solid  #911208;     box-­‐shadow:0  0  10px  #999;     background-­‐color:#f2531c;     transition-­‐property:border,               background,               box-­‐shadow;     transition-­‐duration:0.3s;     transition-­‐timing-­‐function:ease;    } 변이전 .trans:hover  {          border:4px  solid  white;     background-­‐color:#931309;     box-­‐shadow:0  0  10px  yellow;    } 변이후
  • 158. 단축된 속성으로 사용할 수 있습니다. transition:background  0.3s  ease  0.5s; 변이시킬 속성 시간 속도 느낌 지연시간 .trans  {     padding:10px  20px;     border-­‐radius:10px;     border:4px  solid  #911208;     box-­‐shadow:0  0  10px  #999;     background-­‐color:#f2531c;     transition-­‐property:background;     transition-­‐duration:0.3s;     transition-­‐timing-­‐function:ease;          transition-­‐delay:0.5s;    }
  • 159. .trans  {     padding:20px  40px;     border-­‐radius:20px;     border:8px  solid  #911208;     box-­‐shadow:0  0  10px  #999;     background-­‐color:#f2531c;     transition:border  0.3s  ease,              box-­‐shadow  0.3s  ease,              background  0.3s  ease;    } 여러가지 속성일 경우 속성별로 단축할 수 있습니다.
  • 160. .trans  {     padding:20px  40px;     border-­‐radius:20px;     border:8px  solid  #911208;     box-­‐shadow:0  0  10px  #999;     background-­‐color:#f2531c;     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;     border-­‐radius:20px;     border:8px  solid  #911208;     box-­‐shadow:0  0  10px  #999;     background-­‐color:#f2531c;     transition:all  0.3s  ease;    }
  • 161. 아무래도 간편하게 all을 많이 사용하겠죠? .trans  {     padding:10px  20px;     border-­‐radius:10px;     border:4px  solid  #911208;     box-­‐shadow:0  0  10px  #999;     background-­‐color:#f2531c;     transition:all  0.3s  ease;    } 변이전 .trans:hover  {          border:4px  solid  white;     background-­‐color:#931309;     box-­‐shadow:0  0  10px  yellow;    } 변이후
  • 163. 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;     border-­‐radius:10px;     text-­‐align:center;     background:url('coffee2.jpg');   }   .icons  a  {     display:inline-­‐block;     margin:0  20px;   }   .icons  a  img  {     width:200px;     height:200px;   }
  • 164. :hover 했을때 크기조절을 시켜봅시다. .icons  a:hover  img  {     transform:scale(1.5);   } 크기 조절 scale(2,3)   scaleX(2)   scaleY(3) 가로,세로 가로만 세로만 가로세로 모두 해당 이미지의 가운데를 기준으로 1.5배 확대됩니다. .icons  a:hover  img  {     transform:scale(1.5);     transform-­‐origin:right  bottom;   } 해당 이미지의 우측/하단 기준으로 1.5배 확대됩니다. left    top   left    bottom   right  top   right  center   …   …
  • 165. :hover 했을때 회전을 시켜봅시다. .icons  a:hover  img  {     transform:rotate(315deg);   } 회전 해당 이미지의 가운데를 기준으로 315deg로 회전합니다. .icons  a:hover  img  {     transform:rotate(315);     transform-­‐origin:right  center;   } 해당 이미지의 우측 중간을 기준으로 315deg로 회전합니다.
  • 166. :hover 했을때 비틀어 봅시다. .icons  a:hover  img  {     transform:skew(30deg,0);   } 비틀기 해당 이미지의 가운데를 기준으로 x축 30deg, y축 0deg 회전합니다. .icons  a:hover  img  {     transform:skew(30deg,0);     transform-­‐origin:left  bottom;   } skew(30deg)   skewX(30deg)   skewY(20deg) 가로,세로 가로만 세로만 가로세로 모두 가로세로 모두 해당 이미지의 왼쪽/하단를 기준으로 x축 30deg, y축 0deg 회전합니다.
  • 167. :hover 했을때 이동시켜 봅시다. .icons  a:hover  img  {     transform:translate(0,-­‐30px);   } 비틀기 해당 이미지의 가운데를 기준으로 y축으로 -30px이동했습니다. .icons  a:hover  img  {     transform:translate(0,-­‐30px);     transform-­‐origin:left  bottom;   } translateX(-­‐30px)   translateY(-­‐30px) 가로만 세로만 가로, 세로 기준을 좌측 하단으로 하면 어떻게 될까요? ?
  • 168. 여러가지를 동시에… .icons  a:hover  img  {     transform:rotate(315deg)  scale(2);   } 회전 크기
  • 169. 여기에 부드러운 과정(transition)을 넣어 확대할 수 있습니다. .icons  a  img  {     width:200px;     height:200px;     transition:transform  0.3s  ease-­‐in;   } .icons  a:hover  img  {     transform:scale(2);   } 변이전 변이후 0.3S
  • 170. 애니메이션 -­‐webkit-­‐(사파리/크롬),  firefox(정식지원),  ie10(정식지원) 0%(opacity:1) 50%(opacity:0) 100%(opacity:1) @@@ @keyframes를 이용해 trainsition보다 자세한 움직임을 만듭니다.
  • 171. 실험할 재료를 준비합니다. div  class=ani          a  href=#img  src=jack2.png//a   /div .ani  {     width:400px;     height:300px;     padding-­‐top:100px;     border-­‐radius:10px;     box-­‐shadow:;     text-­‐align:center;     background:url('coffee2.jpg');   }   .ani  a  {     display:inline-­‐block;   }   .ani  a  img  {     width:200px;     height:200px;   }
  • 172. 먼저 키프레임으로 변화지점을 설정합니다. 0% (opacity:1) 50% (opacity:0) 100% (opacity:1) @@@ @keyframes  fade_ani  {     0%  {opacity:1;}     50%  {opacity:0;}     100%  {opacity:1;}   } 해당 움직임의 이름을 정해줍니다.
  • 173. 움직임의 규격을 설정합니다. 0% (opacity:1) 50% (opacity:0) 100% (opacity:0) @@@ @keyframes  fade_ani  {     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;   } 반복횟수 무한대, 혹은 숫자값 움직임을 시작할 대상에 셋팅을 합니다.
  • 174. from과 to로 사용하기도 합니다. from (opacity:1) 50% (opacity:0) to (opacity:0) @@@ @keyframes  fade_ani  {     from  {opacity:1;}     50%  {opacity:0;}     to  {opacity:1;}   } .ani  a:hover  img  {     animation-­‐name:fade_ani;     animation-­‐duration:1s;     animation-­‐timing-­‐function:ease;     animation-­‐iteration-­‐count:infinite;   }
  • 175. 키프레임별로 속도의 느낌을 추가할 수 있습니다. from (opacity:1) 50% (opacity:0) to (opacity:0) @@@ @keyframes  fade_ani  {     from  {opacity:1;}     50%  {opacity:0;  animation-­‐timing-­‐function:ease-­‐out}     to  {opacity:1;}   }
  • 176. transform을 이용해 아래 그림과 같이 크기를 키워보세요 from (opacity:1) 50% (opacity:0) to (opacity:0) @@@ @keyframes  fade_ani  {     from  {opacity:1;}     50%  {opacity:0;}     to  {opacity:1;}   } ? .ani  a:hover  img  {     animation-­‐name:fade_ani;     animation-­‐duration:1s;     animation-­‐timing-­‐function:ease;     animation-­‐iteration-­‐count:infinite;   }
  • 177. from (opacity:1) 50% (opacity:0) to (opacity:0) @@@ @keyframes  fade_ani  {     from  {opacity:1;}     50%  {opacity:0;}     to  {opacity:1;}   } .ani  a:hover  img  {     animation-­‐name:fade_ani;     animation-­‐duration:1s;     animation-­‐timing-­‐function:ease;     animation-­‐delay:3s;     animation-­‐iteration-­‐count:infinite;   } 시작시간을 지연 시킬 수 있습니다. 3S
  • 178. 단축된 속성으로 사용할 수 있습니다. .ani  a:hover  img  {     animation-­‐name:fade_ani;     animation-­‐duration:1s;     animation-­‐timing-­‐function:ease;     animation-­‐delay:3s;     animation-­‐iteration-­‐count:infinite;   } .ani  a:hover  img  {animation:fade_ani  1s  ease  3s  infinite} 이름 시간 속도의 느낌 지연시간 반복횟수
  • 180.   eulsoo.jung@gmail.com 이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.