Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML 과 CSS CSS Cascading Style Sheet 2011 Spring / Topic Seminar / WEB :

Similar presentations


Presentation on theme: "HTML 과 CSS CSS Cascading Style Sheet 2011 Spring / Topic Seminar / WEB :"— Presentation transcript:

1 HTML 과 CSS

2 CSS Cascading Style Sheet 2011 Spring / Topic Seminar / WEB :

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

4 CSS 2 VS CSS Spring / Topic Seminar / WEB :

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 : 이거슨 제목 이거슨 red Class Hodduc

7 2011 Spring / Topic Seminar / WEB : 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 : 이거슨 제목 이거슨 red Class Hodduc

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

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

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

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

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

14

15 구글링의 생활화 Spring / Topic Seminar / WEB :

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

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

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

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

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

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

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

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

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

25 텍스트 꾸미기 2011 Spring / Topic Seminar / WEB :

26

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

28 2011 Spring / Topic Seminar / WEB :

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

30 2011 Spring / Topic Seminar / WEB :

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

32 2011 Spring / Topic Seminar / WEB :

33

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

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 "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 :

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

39 2011 Spring / Topic Seminar / WEB : 생략 ).. #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 :

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

42 2011 Spring / Topic Seminar / WEB :

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 : iu.css

44 2011 Spring / Topic Seminar / WEB :

45 TEXT-TRANSFORM 2011 Spring / Topic Seminar / WEB :

46

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 : text-transform: capitalize; text-transform: uppercase; text-transform: lowercase;

49 2011 Spring / Topic Seminar / WEB "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 :

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 :

53 그 외에도 많아요 2011 Spring / Topic Seminar / WEB :

54

55 THANK YOU! 2011 Spring / Topic Seminar / WEB :


Download ppt "HTML 과 CSS CSS Cascading Style Sheet 2011 Spring / Topic Seminar / WEB :"

Similar presentations


Ads by Google