아꿈사 발표자료

1. HTML5 & CSS3
오늘 구현하는 내일의 웹 표준
8장 눈을 즐겁게
이영권
whiletrue0222@gmail.com
아꿈사
http://cafe.naver.com/architect1

2. 살펴보는 내용
• Border-radius
• RGBa
• Box-shdow
• Transform
• Linear-gradient
• @font-face

3. Tip17. 테두리를 둥글게
테두리

4. 기본 폼
<form action="/login" method="post">
<fieldset id="login">
<legend>
로그인
</legend>
<ol>
<li>
<label for="email">
이메일 주소
</label>
<input id="email" type="email" name="email">
</li>
<li>
<label for="password">
비밀번호
</label>
<input id="password" type="password"
name="password" value="" autocomplete="off"/>
</li>
<li><input type="submit" value="로그인"></li>
</ol>
</fieldset>
</form>

5. 기본 CSS

6. Border-radius
input, fieldset, legend{
border-radius: 5px;
/*mozilla*/
-moz-border-radius: 5px;
/*webkit */
-webkit-border-radius: 5px;
}

7. 살펴보는 내용
• Border-radius
• RGBa
• Box-shdow
• Transform
• Linear-gradient
• @font-face

8. Tip18. 그림자, 그래디언트, 변형 다루기

9. 기본 css

10. linear-gradient
#badge{
background-image: linear-gradient(
top, #fff, #efefef
);
background-image: -moz-linear-gradient(
top, #fff, #efefef
);
처음제안된 문법
background-image: -webkit-gradient(
linear,left top, left bottom,
color-stop(0, #fff),
color-stop(1, #efefef)
);
}

11. box-shadow
Syntax
box-shadow: h-shadow v-shadow blur spread color inset;
#badge{
box-shadow: 5px 5px 5px #333;
-moz-box-shadow: 5px 5px 5px #333;
-webkit-box-shadow: 5px 5px 5px #333;
-o-box-shadow: 5px 5px 5px #333;
}
http://www.w3schools.com/cssref/playit.asp?filename=playcss_box-
shadow&preval=10px%2010px%2050px%2020px%20pink%20inset

12. transform
#badge{
transform: rotate(-7.5deg);
-moz-transform: rotate(-7.5deg);
-o-transform: rotate(-7.5deg);
-webkit-transform: rotate(-7.5deg);
-ms-transform: rotate(-7.5deg);
}
http://www.w3schools.com/cssref/css3_pr_transform.asp

13. rgba
알파는 0 ~ 1
#info{
background-color: rgba(255,255,255,0.95);
}

14. 살펴보는 내용
• Border-radius
• RGBa
• Box-shdow
• Transform
• Linear-gradient
• @font-face

15. 진짜 서체 사용하기
웹에서는 폰트 선택에 제한이 있다.
‘웹 안전’ 서체는 대부분의 플랫폼에서 지원하
는 것을 말함.
http://naradesign.net/wp/2009/06/05/844/

16. @font-face
CSS2 명세의 일부였고 IE5에서 구현되었다.
But
IE는 EOT만, 다른 브라우저는 TTF/OTF
EOT: Embedded OpenType Font
TTF: TrueType Font
OTF: OpenType Font
WOFF: Web Open Font Format
지원여부
http://caniuse.com/#feat=fontface
http://caniuse.com/#search=eot
http://caniuse.com/#search=ttf
http://caniuse.com/#search=woff

17. Font-family 정의
사용할 폰트를 정의하는 것. 이 선언만으로는 적용되지 않음.
브라우저는 자신이 쓸 수 있는 형식을 찾을 때까지 순서대로 시도함.
@font-face {
font-family: 'GarogierRegular';
src: url('fonts/Garogier_unhinted-webfont.eot');
src: url('fonts/Garogier_unhinted-webfont.woff')
format('woff'),
url('fonts/Garogier_unhinted-webfont.ttf')
format('truetype'),
url('fonts/Garogier_unhinted-webfont.svg')
format('svg');
font-weight: normal;
}

18. Font-family 사용
@font-face로 정의한 폰트를 사용.
body{
font-family: "GarogierRegular";
// 폴백
font-family: "GarogierRegular", Georgia,
"Palatino", "Palatino Linotype",
"Times", "Times New Roman",
serif;
}

19. GarogierRegular 적용
미적용

20. 살펴보는 내용
• Border-radius
• RGBa
• Box-shdow
• Transform
• Linear-gradient
• @font-face

21. 정리
Transform
Box-shdow RGBa
Border-radius
Linear-gradient
@font-face

22. 감사합니다.