CSS3 천기누설

CSS3 천기누설
Toby
2010.12.04

Toby
Widget Front-end Engineer @Obigo
WebDevMobileStaff
Twitter : @headvoy
Email : headvoy@gmail.com
Blog : headvoy.net

CSS3가 뭔가요?
먹는건가요

CSS는 아시죠?
Cascading Style Sheet- HTML 문서에 스타일을 주기 위해 사용
<div style=“border: 1px solid #000”>
<style type="text/css"> .header { width: 200px; } </style>
<link type="text/css" href=“style.css" rel="stylesheet">

CSS3는 최신 버전의 CSS입니다
기존 CSS2.1에서 부족한 부분을 보완/개선CSS는 지속적으로 새로운 버전이 나오고 있다.1996년에 도입된 CSS 1은 CSS의 바탕이 되었다.CSS의 표준으로는 CSS 2.1이 있으며 이전 버전에 비하여 새로운 기능과 도구가 추가되었다.대다수의 웹브라우저는CSS 2.1를 잘 지원한다.현재 W3C에서는 CSS3을 표준으로 만들고 있다.출처 : wikipedia

CSS3 Demo
http://css3maker.com/
CSS3의 주요 기능들을
지원하는 브라우저에서
확인할 수 있습니다
Safari
Chrome
Firefox
Opera
IE 9
etc

CSS3는 뭐가 좋은가요?
바쁘니까 요점만 알려주세요

이미지 사용을 줄일 수 있습니다
웹페이지 로딩시간의대부분은 이미지를불러오는데 사용
이미지를 줄이면모바일사용성이 향상
서버단의 튜닝보다저비용 고효율http://www.hoons.kr/Lecture/LectureMain.aspx?idx=42

HTML 마크업을 간결하게 합니다
내용에 따라 Layout이 맞춰져야 한다면?
The StarCraft II: Wings of Liberty multiplayer scene continues to evolve as more and more players bring their knowledge and skill sets to Battle.net, and we regularly see strategies to employ
battlefield?
The StarCraft II: Wings of Liberty multiplayer scene continues to evolve as more and more players bring their knowledge and skill sets to Battle.net, and we regularly see new and unique tactics being tested in all the brackets.
But, what about you? Even after annihilating your enemies for months, are you still finding new strategies to employ on the battlefield? If so, how? Are you inspired by pro-player tactics in tournaments, forum discussions with your peers, or perhaps the
replays you see online?

HTML 마크업을 간결하게 합니다
기존의 방식은 복잡한 마크업이 필요<div class=“flexible“> <div class="top”> <div class="left"></div> <div class="right"></div> </div> <div class=“contents“>내용이 들어가는 곳 </div> <div class="bottom“> <div class="left"></div> <div class="right"></div> </div></div>
<div class=“flexible">
내용이 들어가는 곳
</div>
표현을 위해 추가한
의미 없는 Mark up 걷어내기

동적인 웹을 만들어줍니다
Flash, Javascript없이…
http://www.webdesignerwall.com/demo/css3-dropdown-menu/

동적인 웹을 만들어줍니다
Out side http://outsideapp.com

저도 CSS3를 쓸 수 있나요?
못 써먹는건 배우고 싶지 않아요

IE6~8은 어떻게 하죠?
기능상 문제만 없으면 됩니다
Youtube : border-radius 사용

Twitter : border-radius, box-shadow사용

IE6~8은 어떻게 하죠?
모바일 사이트라면 그냥 쓰세요WinMo사용자들도 Opera를 씁니다
CSS3 Pie를 이용하세요 (pie.htc)http://css3pie.com/
클라이언트를 설득해야 한다면 사용하지 마세요굳이 그렇게 할 필요까진 없어요

언제 표준이 되나요?
CSS는 속성별로 표준화 시기가 다릅니다http://www.w3.org/TR/css3-roadmap/http://www.w3.org/Style/CSS/current-work
브라우저 지원이 먼저 된 후에 표준이 됩니다

표준(권고안)을 기다리지 마세요
대부분의 브라우저가 공통 지원하는 속성은 곧 표준이 됩니다
한가지 예로,그 동안 사용해오던 embed는 HTML5 입니다

Toby는 CSS3를 씁니다
전 소중하니까요

CSS3를 사용하는 이유
저는 모바일WebApp작업을 합니다(Android, iPhone, Blackberry…)
코드를 간결화 하여 유지보수를 쉽게 하기 위해
용량을 줄이기 위해
다국어 번역 처리를 위해
동작 속도 향상을 위해 (performance)
나 자신과 회사의 발전을 위해

좋군요어떻게 시작하면 되나요?
책 사보면 되나요

여기서 코드를 긁어다 쓰세요
http://css3maker.com/
여기에 있는 기능들이가장 일반적이고활용할만한 것들입니다
다른 속성들은천천히 배워도 됩니다

Vendor prefix를 사용하세요
Vendor prefix는 hack이 아닙니다
Vendor prefix는 표준이 바뀌어도 계속 지원됩니다
Safari,Chrome
Firefox
Opera
IE
-webkit-
-moz-
-o-
-ms-

CSS3 Selectors
향상된 선택자들
자식 선택자E > F , 인접형제 선택자E + F
첫째 :first-child, 셋째 :nth-child(3), 막내 :last-child
속성 선택 input[type=checkbox]
책갈피(#idanchor)사용시에 발동 :target
정찬명님 자료 http://naradesign.net/wp/2010/06/17/1343/후리자님 자료 http://bit.ly/g00grF

CSS3 media query
@media all and (min-width: 640px) { /* 640px 이하일 때는 이하 속성이 적용 됩니다 */ #media-queries-1 { background-color: #0f0; }}@media screen and (max-width: 2000px) { /* 2000px 이상일 때는 이하 속성이 적용 됩니다 */ #media-queries-2 { background-color: #0f0; }}
Flexible Grid - 각 사이즈별로 적절하게 대응되는 화면http://j.mp/css3flexible

디자이너가 개떡같은PSD를 줬어요
난 그 사람이 싫어요

CSS3 스타일로 디자인해야 하나요?
이런 스타일만 만들 수 있는 것은 아닙니다
button
Gradient

물론 너무 복잡하면 어렵죠
쉬운 경우
어려운 경우

CSS3로 만든 멋진 디자인을 보세요
Things we left on the moon (CSS3 demo page)http://css3exp.com/moon/

잘 응용하면 멋지게 쓸 수 있어요
FarukAteşhttp://farukat.es/

PSD와 웹이 비슷하게 됐지요?

사용된 image file 4개

Layer Style은 변환 가능합니다
붓질까지 변환할 순 없지만,Layer Style은 코드로 변환할 수 있습니다.

포토샵과CSS는메커니즘이 달라요
두 방식 모두에 대한 이해가 필요합니다
120도 위치의 광원
물체와의 거리 5px
투명도75%, 흐림 5px, 색상(0,0,0)
4px 5px 5pxrgba(0,0,0,.75)
x
y
투명도
흐림
색상

모든 속성이 되지는 않아요
미지원 속성은 디자이너와 상의하세요

Gradient가 조금 까다로워요
사실 복잡해 보이지만 원리를 이해하면 쉬워요
.class-style-gloss {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,.33)),
color-stop(0.49, rgba(47,47,47,.226)),
color-stop(0.5, rgba(0,0,0,.225)),
color-stop(0.7, rgba(37,37,37,.183)),
color-stop(1, rgba(255,255,255,.12))
);
border-top: 1px solid rgba(255,255,255,.33);
border-bottom: 1px solid rgba(37,39,57,.7);
border-left: 0px;
border-right: 0px;
}

눈대중도 필요합니다
당신의 감각과 스포이드를 믿으세요

근데 브라우저별로테스트 해야 하는거 아닌가요?
일일이 테스트하기 귀찮은데

Android 기준으로 맞추면 됩니다
Android에서 동작하는 CSS3 속성은 대부분Desktop 브라우저에서도 동작하고,iPhone에서도 동작합니다
따라서, 하위 호환의 기준을 Android로 잡으면적당합니다
각 버전별 결과는 크게 다르지 않습니다(1.6, 2.1, 2.2 결과가 유사합니다)

정확하게 알고 싶으시면...
Can I use.com 을 참조하세요http://caniuse.com/#cats=CSS
CSS3 info Selector test tool을 참조하세요http://tools.css3.info/selectors-test/test.html
직접 타겟브라우저에서 테스트 해보세요

시간 다 돼가요정리하세요
저 끝나고 약속 있거든요

CSS3를 시작해 봅시다
모바일 작업을 한다면, 적극적으로 사용하세요
말 없이 적용해 보세요IE에서 예전처럼 보인다면 큰 문제는 없을거에요
스터디, 개인 작업을 하세요
범용 지원되는 속성은 맘 편히 사용하세요vendor prefix 사용은 권장되는 방법입니다

CSS3를 시작해 봅시다
CSS3 관련 모든 소식은여기 다 있어요RSS 구독하세요 http://css3.info
추가하시는김에 제 블로그도 해주세요http://headvoy.net
내친김에 트위터도 팔로 해주세요twitter: @headvoy

Thank you
Twitter : @headvoy
Email : headvoy@gmail.com
Blog : headvoy.net

http://www.webdevmobile.com	397
http://b.headvoy.net	71
http://webdevmobile.com	65
http://tobyyun.com	54
http://duck9see.tumblr.com	14
http://revirth.wordpress.com	14
url_unknown	4
http://yankey.tistory.com	3
http://www.hanrss.com	3
http://senchadev.kr	1

CSS3 천기누설

by Toby Yun on Dec 04, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 626

Statistics

CSS3 천기누설 — Presentation Transcript