Successfully reported this slideshow.
Your SlideShare is downloading. ×

HTML5&CSS3 8장. 눈을 즐겁게

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Html5 시맨틱태그
Html5 시맨틱태그
Loading in …3
×

Check these out next

1 of 22 Ad
Advertisement

More Related Content

Advertisement
Advertisement

Recently uploaded (20)

HTML5&CSS3 8장. 눈을 즐겁게

  1. 1. HTML5 & CSS3 오늘 구현하는 내일의 웹 표준 8장 눈을 즐겁게 이영권 whiletrue0222@gmail.com 아꿈사 http://cafe.naver.com/architect1
  2. 2. 살펴보는 내용 • Border-radius • RGBa • Box-shdow • Transform • Linear-gradient • @font-face
  3. 3. Tip17. 테두리를 둥글게 테두리
  4. 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. 5. 기본 CSS
  6. 6. Border-radius input, fieldset, legend{ border-radius: 5px; /*mozilla*/ -moz-border-radius: 5px; /*webkit */ -webkit-border-radius: 5px; }
  7. 7. 살펴보는 내용 • Border-radius • RGBa • Box-shdow • Transform • Linear-gradient • @font-face
  8. 8. Tip18. 그림자, 그래디언트, 변형 다루기
  9. 9. 기본 css
  10. 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. 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. 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. 13. rgba 알파는 0 ~ 1 #info{ background-color: rgba(255,255,255,0.95); }
  14. 14. 살펴보는 내용 • Border-radius • RGBa • Box-shdow • Transform • Linear-gradient • @font-face
  15. 15. 진짜 서체 사용하기 웹에서는 폰트 선택에 제한이 있다. ‘웹 안전’ 서체는 대부분의 플랫폼에서 지원하 는 것을 말함. http://naradesign.net/wp/2009/06/05/844/
  16. 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. 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. 18. Font-family 사용 @font-face로 정의한 폰트를 사용. body{ font-family: "GarogierRegular"; // 폴백 font-family: "GarogierRegular", Georgia, "Palatino", "Palatino Linotype", "Times", "Times New Roman", serif; }
  19. 19. GarogierRegular 적용 미적용
  20. 20. 살펴보는 내용 • Border-radius • RGBa • Box-shdow • Transform • Linear-gradient • @font-face
  21. 21. 정리 Transform Box-shdow RGBa Border-radius Linear-gradient @font-face
  22. 22. 감사합니다.

×