css3 천기누설
DESCRIPTION
TRANSCRIPT
CSS3 천기누설Toby
2010.12.04
Toby
CSS3가 뭔가요?먹는건가요
CSS는 아시죠?
•문서에스타일을주기위해사용
•
•
•
CSS3는 최신 버전의 CSS입니다
• 기존 에서부족한부분을보완 개선
는지속적으로새로운버전이나오고있다년에도입된 은 의바탕이되었다의표준으로는 이있으며이전버전에비하
여새로운기능과도구가추가되었다대다수의웹브라우저는 를잘지원한다현재 에서는 을표준으로만들고있다
출처
CSS3는 뭐가 좋은가요?바쁘니까 요점만 알려주세요
이미지 사용을 줄일 수 있습니다
• 웹페이지 로딩시간의대부분은 이미지를불러오는데 사용
• 이미지를 줄이면모바일 사용성이 향상
• 서버단의 튜닝보다저비용 고효율
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 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?
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?
HTML 마크업을 간결하게 합니다
• 기존의 방식은 복잡한 마크업이 필요
내용이들어가는곳내용이들어가는곳
표현을 위해 추가한
의미 없는 Mark up 걷어내기
동적인 웹을 만들어줍니다
• 없이
http://www.webdesignerwall.com/demo/css3-dropdown-menu/
저도 CSS3를 쓸 수 있나요?못 써먹는건 배우고 싶지 않아요
IE6~8은 어떻게 하죠?
• 기능상문제만없으면됩니다
사용
사용
IE6~8은 어떻게 하죠?
• 모바일사이트라면그냥쓰세요사용자들도 를씁니다
• 를이용하세요
• 클라이언트를설득해야한다면사용하지마세요굳이그렇게할필요까진없어요
언제 표준이 되나요?
• 는속성별로표준화시기가다릅니다http://www.w3.org/TR/css3-roadmap/http://www.w3.org/Style/CSS/current-work
• 브라우저지원이먼저된후에표준이됩니다
표준(권고안)을 기다리지 마세요
• 대부분의브라우저가공통지원하는속성은곧표준이됩니다
• 한가지예로그동안사용해오던 는 입니다
Toby는 CSS3를 씁니다전 소중하니까요
CSS3를 사용하는 이유
• 저는모바일 작업을합니다
• 코드를간결화하여유지보수를쉽게하기위해
• 용량을줄이기위해
• 다국어번역처리를위해
• 동작속도향상을위해
• 나자신과회사의발전을위해
좋군요어떻게 시작하면 되나요?책 사보면 되나요
여기서 코드를 긁어다 쓰세요
http://css3maker.com/여기에있는기능들이
가장일반적이고
활용할만한것들입니다
다른속성들은
천천히배워도됩니다
Vendor prefix를 사용하세요
• Vendor prefix는 hack이 아닙니다
• Vendor prefix는 표준이 바뀌어도 계속 지원됩니다
CSS3 Selectors
• 향상된선택자들
–자식선택자 인접형제선택자
–첫째 셋째 막내
–속성선택
–책갈피 사용시에발동
• 정찬명님자료후리자님자료
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; }
}
• 각사이즈별로적절하게대응되는화면
디자이너가 개떡같은PSD를 줬어요난 그 사람이 싫어요
CSS3 스타일로 디자인해야 하나요?
• 이런스타일만만들수있는것은아닙니다
button
Gradient
물론 너무 복잡하면 어렵죠
쉬운경우 어려운경우
PSD와 웹이 비슷하게 됐지요?
사용된 image file 4개
Layer Style은 변환 가능합니다
• 붓질까지변환할순없지만은코드로변환할수있습니다
포토샵과 CSS는 메커니즘이 달라요
• 두방식모두에대한이해가필요합니다
도위치의광원
물체와의거리
투명도 흐림 색상투명도흐림 색상
모든 속성이 되지는 않아요
• 미지원속성은디자이너와상의하세요
Gradient가 조금 까다로워요
• 사실복잡해보이지만원리를이해하면쉬워요
눈대중도 필요합니다
• 당신의감각과스포이드를믿으세요
근데 브라우저별로테스트 해야 하는거 아닌가요?일일이 테스트하기 귀찮은데
Android 기준으로 맞추면 됩니다
• 에서동작하는 속성은대부분브라우저에서도동작하고에서도동작합니다
• 따라서 하위호환의기준을 로잡으면적당합니다
• 각버전별결과는크게다르지않습니다결과가유사합니다
정확하게 알고 싶으시면...
• 을참조하세요http://caniuse.com/#cats=CSS
• 을참조하세요http://tools.css3.info/selectors-test/test.html
• 직접타겟브라우저에서테스트해보세요
시간 다 돼가요정리하세요저 끝나고 약속 있거든요
CSS3를 시작해 봅시다
• 모바일작업을한다면 적극적으로사용하세요
• 말없이적용해보세요에서예전처럼보인다면큰문제는없을거에요
• 스터디 개인작업을하세요
• 범용지원되는속성은맘편히사용하세요사용은권장되는방법입니다
CSS3를 시작해 봅시다
• 관련모든소식은여기다있어요구독하세요
• 추가하시는김에제블로그도해주세요
• 내친김에트위터도팔로해주세요
Thank you