1. HTML 과 CSS hodduc@sparcs

2. CSS Cascading Style Sheet 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

3. “ 마크업 언어 ” 가 실제로 어떻게 보일지 를 기술하는 또 다른 언어

4. CSS 2 VS CSS 3 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

5. Selector { Attribute1: Value1; Attribute2: Value2; Attribute3: Value3; }

6. h1 { font-size: 50px; }.red { color: red; } #hodduc { text-decoration: underline; font-weight: bold; } 2011 Spring / Topic Seminar / WEB : hodduc@sparcs 이거슨 제목 이거슨 red Class Hodduc

7. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs h1 { font-size: 50px; }.red { color: red; } #hodduc { text-decoration: underline; font-weight: bold; }

8. h1 { font-size: 50px; }.red { color: red; } #hodduc { text-decoration: underline; font-weight: bold; } 2011 Spring / Topic Seminar / WEB : hodduc@sparcs 이거슨 제목 이거슨 red Class Hodduc

9. h1 { font-size: 50px; }.red { color: red; } #hodduc { text-decoration: underline; font-weight: bold; } 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

10. .intro { background-color: blue; } #hodduc { background-color: green; } span { background-color: red; } Hodduc

11. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs body { font-size: 20px; } #container { border: 1px solid black; color: red; } #birthday { color: black; } 아이유 1993 년 5 월 16 일

12. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs body { font-size: 20px; } #container { border: 1px solid black; color: red; } #birthday { color: black; }

13. 왜 COLOR 만 상속되었을까 ? 여기서 질문 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

15. 구글링의 생활화 http://lmgtfy.com 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

16. 스타일을 적용하는 몇 가지 방법 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

17. 방법 1. INLINE-STYLE 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

18. 오른쪽 정렬 가운데 정렬 왼쪽 정렬

19. 장점 모든 스타일을 덮어씀 ( 가장 강력한 Rule) 쉽고 빠르게 ! 단점 마크업과 스타일이 섞임 특히 섞어쓰면 헷갈림 ! 재사용 불가 2011 Spring / Topic Seminar / WEB : hodduc@sparcs 1. 임시로 잠깐 사용할 스타일 2. 외부 파일이나 부분을 고칠 수 없을 때 3. 개발 도중 어떻게 보일지 미리보고 싶을 때 이럴 때 사용하세요

20. 방법 2. STYLE 태그 사용 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

21. .leftbox { text-align: left; }.rightbox { text-align: right; }.centerbox { text-align: center; } 오른쪽 정렬 가운데 정렬 왼쪽 정렬

22. 장점 Inline-style 다음으로 우선 적용됨 개발 단계에 적합 단점 다른 페이지에서 재사용 불가 캐시되지 않음 2011 Spring / Topic Seminar / WEB : hodduc@sparcs 1. 개발 단계에서 임시로. 이후 배포시에는 외부 CSS 로 분리 이럴 때 사용하세요

23. 방법 3. 외부 CSS 사용 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

24. 오른쪽 정렬 가운데 정렬 왼쪽 정렬 @charset "utf-8";.leftbox { text-align: left; }.rightbox { text-align: right; }.centerbox { text-align: center; } test7.html style.css

25. 텍스트 꾸미기 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

27. @charset "utf-8"; body { line-height: 1.5em; } iu.css

28. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

29. @charset "utf-8"; body { font-family: 궁서 ; line-height: 1.5em; } iu.css

30. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

31. @charset "utf-8"; body { font-family: “ 맑은 고딕 ”, 궁서 ; line-height: 1.5em; } iu.css

32. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

34. 사용자 컴퓨터에 있는 글꼴만 ! 웹폰트 이런건 ( 아직은 ) 비표준 ! IE 를 깝시다 IE 는 나의 적 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

35. @charset "utf-8"; body { font-family: “ 맑은 고딕 ”, Dotum, 돋움, Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em; } iu.css

36. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs @charset "utf-8"; body { font-family: “ 맑은 고딕 ”, Dotum, 돋움, Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em; } h1 { letter-spacing: -4px; } iu.css

37. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

38. 자간 -4px 자간 -2px 자간 0px 자간 4px

39. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs..( 생략 ).. #content:first-letter { background: #eee; font-size: 400%; border: 2px solid #ccc; float: left; margin: 4px 10px 10px 0; line-height: 1em; } iu.css

40. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

41. TEXT-ALIGN 아까 했죠 ? 2011 Spring / Topic Seminar / WEB : hodduc@sparcs 오른쪽 정렬 가운데 정렬 왼쪽 정렬

42. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

43. @charset "utf-8"; body { font-family: “ 맑은 고딕 ”, Dotum, 돋움, Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em; text-align: justify; } h1 { letter-spacing: -4px; text-align: center; } 2011 Spring / Topic Seminar / WEB : hodduc@sparcs iu.css

44. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

45. TEXT-TRANSFORM 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

47. @charset "utf-8"; body { font-family: “ 맑은 고딕 ”, Dotum, 돋움, Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em; text-align: justify; text-transform: capitalize; } h1 { letter-spacing: -4px; text-align: center; } iu.css

48. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs text-transform: capitalize; text-transform: uppercase; text-transform: lowercase;

49. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs @charset "utf-8"; body { font-family: “ 맑은 고딕 ”, Dotum, 돋움, Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em; text-align: justify; text-transform: capitalize; font-variant: small-caps; } h1 { letter-spacing: -4px; text-align: center; } iu.css

50. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

51. @charset "utf-8"; body { font-family: “ 맑은 고딕 ”, Dotum, 돋움, Helvetica, AppleGothic, Arial, sans-serif; line-height: 1.5em; text-align: justify; text-transform: capitalize; font-variant: small-caps; text-indent: 1em; } h1 { letter-spacing: -4px; text-align: center; } iu.css

52. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

53. 그 외에도 많아요 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

55. THANK YOU! hodduc@sparcs 2011 Spring / Topic Seminar / WEB : hodduc@sparcs