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
임베드컨텐츠
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단계일때 사용할 수
있는 브라우저 밴더들의 표시입니다.
웹킷엔진을
사용하는
사파리, 크롬
모질라재단의
파이어폭스
오페라
마이크로소프트의
익스플로러
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
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를 가지고 있게 될 것입니다.
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
캡션이 필요할 때 사용할 수 있으며,
사용하지 않아도 괜찮습니다.
58. 입력양식
input type=text placeholder=홍길동 autofocus /
requiredautocomplete=onrange
search
url
tel
email
number
date
datetime
datetime-‐local
time
month
color
슬라이더 표시
검색창
웹사이트 주소
전화번호
이메일
스피너 컨트롤로 숫자를 입력
년 , 월 , 일
년 , 월 , 일 , 시 , 분 , 초 , 시간대
년 , 월 , 일 , 시 , 분 , 초
시 , 분 , 초
년 , 월
입력할 예시값 표시 자동포커스
자동완성 기능 입력값 검사
색상선택
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만 사용할 수 있어서 좋습니다.
72. video contols
source src=html5video.webm type=video/webm /
source src=html5video.mp4 type=video/mp4/
/video
source를 이용해서 다양한 비디오
포멧을 지원할 수 있습니다.
webm을 지원하지
않으면 아래로!
파이어폭스, 크롬, IE9+ 지원
사파리, 크롬, IE9+ 지원
type을 이용해 브라우저에게
좀 더 자세한 정보를 제공합니다.
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
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
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. 사용합니다
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에 굵기 별로 만들어진 웹폰트가 셋팅되어 있기 때문에 사용만 하면 됩니다.
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을 쓰지 않을때는 넓이의 기준이
컨텐츠 영역이 되는 것입니다.
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배수로 선택
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)라면 어떻게 될까요?
?
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를 넣지 않으면 활성화
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)
가로만
세로만
가로, 세로
기준을 좌측 하단으로 하면 어떻게 될까요?
?
169. 여기에 부드러운 과정(transition)을 넣어
확대할 수 있습니다.
.icons a img {
width:200px;
height:200px;
transition:transform 0.3s ease-‐in;
}
.icons a:hover img {
transform:scale(2);
}
변이전
변이후
0.3S
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}
이름
시간
속도의 느낌
지연시간
반복횟수