1. CSS3 천기누설
Toby
2010.12.04

2. Toby

3. CSS3가 뭔가요?
먹는건가요

4. CSS는 아시죠?
•
문서에 스타일을 주기 위해 사용
•
•
•

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

6. CSS3 Demo
의 주요 기능들을 http://css3maker.com/
지원하는 브라우저에서
확인할 수 있습니다
•
•
•
•
•
•

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

8. 이미지 사용을 줄일 수 있습니다
• 웹페이지 로딩시간의
대부분은 이미지를
불러오는데 사용
• 이미지를 줄이면
모바일 사용성이 향상
• 서버단의 튜닝보다
저비용 고효율

9. HTML 마크업을 간결하게 합니다
• 내용에 따라 Layout이 맞춰져야 한다면?
The StarCraft II: Wings The StarCraft II: Wings of Liberty multiplayer
of Liberty multiplayer scene continues to evolve as more and more
sce n e con ti n u e s to
players bring their knowledge and skill sets
evolve as more and
to Battle.net, and we regularly see new and
more pl aye rs bri n g
their knowledge and
unique tactics being tested in all the brackets.
skill sets to Battle.net, But, what about you? Even after annihilating
and we regularly see your enemies for months, are you still
strategies to employ finding new strategies to employ on the
battlefield? 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?

10. HTML 마크업을 간결하게 합니다
• 기존의 방식은 복잡한 마크업이 필요
내용이 들어가는 곳
내용이 들어가는 곳
표현을 위해 추가한
의미 없는 Mark up 걷어내기

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

12. 동적인 웹을 만들어줍니다
•

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

14. IE6~8은 어떻게 하죠?
• 기능상 문제만 없으면 됩니다
사용

15. 사용

16. IE6~8은 어떻게 하죠?
• 모바일 사이트라면 그냥 쓰세요
사용자들도 를 씁니다
• 를 이용하세요
• 클라이언트를 설득해야 한다면 사용하지 마세요
굳이 그렇게 할 필요까진 없어요

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

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

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

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

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

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

23. Vendor prefix를 사용하세요
• Vendor prefix는 hack이 아닙니다
• Vendor prefix는 표준이 바뀌어도 계속 지원됩니다

24. CSS3 Selectors
• 향상된 선택자들
– 자식 선택자 인접형제 선택자
– 첫째 셋째 막내
– 속성 선택
– 책갈피 사용시에 발동
• 정찬명님 자료
후리자님 자료

25. 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; }
}
• 각 사이즈별로 적절하게 대응되는 화면

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

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

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

29. CSS3로 만든 멋진 디자인을 보세요
•
http://css3exp.com/moon/

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

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

32. 사용된 image file 4개

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

34. 포토샵과 CSS는 메커니즘이 달라요
• 두 방식 모두에 대한 이해가 필요합니다
도 위치의 광원
물체와의 거리
흐림 색상 투명도
투명도 흐림 색상

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

36. Gradient가 조금 까다로워요
• 사실 복잡해 보이지만 원리를 이해하면 쉬워요

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

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

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

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

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

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

43. CSS3를 시작해 봅시다
• 관련 모든 소식은 여기 다 있어요
구독하세요
• 추가하시는김에 제 블로그도 해주세요
• 내친김에 트위터도 팔로 해주세요

44. Thank you