HTML5&CSS3 8장. 눈을 즐겁게

  • 1,415 views
Uploaded on

아꿈사 발표자료

아꿈사 발표자료

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,415
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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-radiusinput, 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-shadowSyntaxbox-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-faceCSS2 명세의 일부였고 IE5에서 구현되었다.ButIE는 EOT만, 다른 브라우저는 TTF/OTFEOT: Embedded OpenType FontTTF: TrueType FontOTF: OpenType FontWOFF: Web Open Font Format지원여부http://caniuse.com/#feat=fontfacehttp://caniuse.com/#search=eothttp://caniuse.com/#search=ttfhttp://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. 감사합니다.