제1장 HTML 문서의 작성

Size: px

Start display at page:

Download "제1장 HTML 문서의 작성"

용화 성
7 years ago
Views:

6 2.1.1 CSS 개요 교재 p.116 [ 표 2.1] CSS 레벨에따른특징비교 CSS1 CSS2 CSS2.1 CSS 년표준화 - 기본적인스타일속성정의기능 년표준화 - 새로운스타일기능추가 년표준화 - CSS2 의보완 - 표준화작업중 - CSS 를스타일의특성별로모듈화 (modularization) Copyright 2013 Lee, Kim & Park, Life & Power Press 6

7 2.1.1 CSS 개요 교재 p.117 스타일시트미사용 <h3> <i> <font color="green"> 녹색이탤릭 </font> </i> </h3> 스타일시트사용 h3 {font-style:italic; color:green;} 한번만정의 웹문서에포함된모든 <h3> 요소에모두같은스타일을적용할수있음 Copyright 2013 Lee, Kim & Park, Life & Power Press 7

9 인라인스타일 교재 p.118 인라인스타일 형식 : < 태그 style = " 스타일 _ 선언 _ 리스트 "> ~ </ 태그 > 스타일 _ 선언 : 속성 : 속성값 ; [ 예제 inline-style.html ] 6: <h1 style="background:yellow"> 내용이표시되는부분의배경을노란색으로...</h1> 7: <p style="color:blue"> 단락에서의문자색은파란색으로...</p> Copyright 2013 Lee, Kim & Park, Life & Power Press 9

11 임베디드스타일 교재 p.119 임베디드스타일 형식 : <head> <style type = "text/css"> {CSS_ 규칙 }+ </style> </head> CSS_ 규칙 : 선택자 { 스타일 _ 선언 _ 리스트 } 스타일 _ 선언 : 속성 : 속성값 ; Copyright 2013 Lee, Kim & Park, Life & Power Press 11

12 임베디드스타일 교재 p.119 [ 예제 embedded-style.html ] 정의부분 4: <style type="text/css"> 5: h1 {background:yellow;} 6: p {color:blue;} 7: </style> 적용부분 10: <h1> 내용이표시되는부분의배경을노란색으로...</h1> 11: <p> 단락에서의문자색은파란색으로...</p> Copyright 2013 Lee, Kim & Park, Life & Power Press 12

14 외부스타일시트 교재 p.120 <link> 태그에서연결 형식 : <head> <link rel = "stylesheet" type = "text/css" href = " 스타일시트의 url"> </head> [ 스타일시트파일 : sheet.css] h1 {background:yellow;} p {color:blue;} Copyright 2013 Lee, Kim & Park, Life & Power Press 14

15 외부스타일시트 교재 p.120 [ 예제 external-style.html ] 정의부분 4: <link rel="stylesheet" type="text/css" href="sheet.css"> 적용부분 7: <h1> 내용이표시되는부분의배경을노란색으로...</h1> 8: <p> 단락에서의문자색은파란색으로...</p> Copyright 2013 Lee, Kim & Park, Life & Power Press 15

18 외부스타일시트 교재 p.121 [ 예제 import-style.html ] 정의부분 4: <style type="text/css"> "sheet.css"; 6: </style> 적용부분 9: <h1> 내용이표시되는부분의배경을노란색으로...</h1> 10: <p> 단락에서의문자색은파란색으로...</p> Copyright 2013 Lee, Kim & Park, Life & Power Press 18

25 (2) 타입선택자 교재 p.125 타입선택자 형식 : 선택자 { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} p {background:blue; color:yellow;} 형식 : 선택자 1, 선택자 2,..., 선택자 m { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} h1, p {background:yellow;} Copyright 2013 Lee, Kim & Park, Life & Power Press 25

26 (3) 클래스선택자 교재 p.126 클래스선택자 정의부분 형식 : 선택자. 클래스명 { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} p.blue {background:blue;} 적용부분 형식 : < 태그 class = " 클래스명 "> ~ </ 태그 > <p class="blue"> 이단락은 class 속성을이용한태그입니다. </p> Copyright 2013 Lee, Kim & Park, Life & Power Press 26

27 (3) 클래스선택자 교재 p.127 [ 예제 class.html ] 정의부분 4: <style type="text/css"> 5: p {background:yellow; color:blue;} 6: p.italic {font-style:italic;} 7:.redtxt {color:red;} 8:.greentxt {color:green;} 9: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 27

28 (3) 클래스선택자 교재 p.127 적용부분 12: <p> 이텍스트는스타일의적용을받아노란배경에글자가파란색으로 표시됩니다. </p> 13: <p class="redtxt"> 같은요소지만글자가빨간색으로표시됩니다. </p> 14: <p class="greentxt"> 녹색의글자도사용할수있습니다. </p> 15: <h2 class="redtxt"> p 요소가아니라도빨간글자가적용됩니다. </h2> 16: <h2 class="greentxt"> p 요소가아니라도녹색글자가적용됩니다. </h2> 17: <p class="italic"> p 요소에만이탤릭글자를사용할수있습니다. </p> 18: <h2 class="italic"> p 요소에만적용되는클래스이므로적용되지않습니다. </h2> Copyright 2013 Lee, Kim & Park, Life & Power Press 28

31 (4) 아이디선택자 교재 p.128 [ 예제 id.html ] 정의부분 4: <style type="text/css"> 5: p {background:yellow; color:blue;} 6:.boldtxt {font-weight:bold;} 7: #once {font-style:italic;} 8: </style> 적용부분 11: <h2 id="once"> 이스타일은 ID 속성을이용한스타일입니다. </h2> 12: <h2 class="boldtxt"> H2 요소에도굵은글자가적용됩니다. </h2> 13: <p class="boldtxt"> P 요소에굵은글자도사용할수있습니다. </p> Copyright 2013 Lee, Kim & Park, Life & Power Press 31

33 (5) 속성선택자 교재 p.129 속성선택자 형식 : [ 속성 ] { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} [ 속성 = 값 ] { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} [ 속성 = 값 ] { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} [ 속성 = 값 ] { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 사용예 [height] {background:pink;} [title = "tree"] {font-weight:bold; color:red;} [title ~= "tree"] {color:blue;} [title = "tree"] {background:skyblue;} Copyright 2013 Lee, Kim & Park, Life & Power Press 33

34 (6) 결합자 교재 p.129 결합자 형식 : 요소 1 요소 2 { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 자손결합자요소 1 > 요소 2 { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 자식결합자요소 1 + 요소 2 { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 인접형제결합자 사용예 div p {font-weight:bold; color:blue;} div > p {font-weight:bold; color:red;} div + p {background:yellow; font-style:italic;} Copyright 2013 Lee, Kim & Park, Life & Power Press 34

35 (6) 결합자 교재 p.130 [ 예제 combinator.html ] 정의부분 4: <style type="text/css"> 5: div > p {font-weight:bold; color:red;} 6: div + p {background:yellow; font-style:italic;} 7: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 35

36 (6) 결합자 교재 p.130 적용부분 10: <div> 11: <p> div의첫번째자식 p 요소 </p> 12: <p> div의두번째자식 p 요소 </p> 13: </div> 14: <h3> div의첫번째형제 h3 요소 </h3> 15: <p> div의두번째형제 p 요소 </p> 16: <div> 17: <h3> div의첫번째자식 h3 요소 </h3> 18: <p> div의두번째자식 p 요소 </p> 19: </div> 20: <p> div의첫번째형제 p 요소 </p> Copyright 2013 Lee, Kim & Park, Life & Power Press 36

38 (7) 순서의사요소 교재 p.131 순서의사요소 형식 : 요소 :first-letter { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :first-line { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :before { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :after { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 사용예 p:first-letter {font-weight:bold; font-size:30pt; color:red;} p:first-line {background:yellow; font-style:italic;} p:before {content:"start-";} p:after {content:"-end";} Copyright 2013 Lee, Kim & Park, Life & Power Press 38

39 (7) 순서의사요소 교재 p.132 [ 예제 pseudo-element.html ] 정의부분 / 적용부분 4: <style type="text/css"> 5: p:first-letter {font-weight:bold; font-size:30pt; color:red;} 6: p:first-line {background:yellow;} 7: h3:before {content:"start-"; color:red;} 8: h3:after {content:"-end"; color:blue;} 9: </style> 12: <h3> 안녕하세요! </h3> 13: <div> 14: <p> 어서오세요. </p> 15: <p> 반갑습니다. </p> 16: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 39

41 (8) 구조의사클래스 교재 p.133 구조의사클래스 형식 : 요소 :first-child { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 사용예 p:first-child {background:yellow; font-style:italic;} Copyright 2013 Lee, Kim & Park, Life & Power Press 41

42 (8) 구조의사클래스 교재 p.133 [ 예제 structural-pseudo.html ] 정의부분 4: <style type="text/css"> 5: p:first-child {background:yellow; font-style:italic; color:red;} 6: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 42

43 (8) 구조의사클래스 교재 p.133 적용부분 9: <div> 10: <p> div의첫번째자식 p 요소 </p> 11: <p> div의두번째자식 p 요소 </p> 12: </div> 13: <p> body의두번째자식 p 요소 </p> 14: <h3> body의세번째자식 h3 요소 </h3> 15: <div> 16: <p> div의첫번째자식 p 요소 </p> 17: <h3> div의두번째자식 h3 요소 </h3> 18: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 43

45 (9) 마우스관련선택자 교재 p.134 마우스관련선택자 형식 : 요소 :link { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :visited { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :active { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :hover { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :focus { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 사용예 a:link {color:red;} a:visited {color:blue;} a:active {color:yellow;} a:hover {color:green;} input:focus {color:orange;} Copyright 2013 Lee, Kim & Park, Life & Power Press 45

46 (9) 마우스관련선택자 교재 p.135 [ 예제 link.html ] 정의부분 4: <style type="text/css"> 5: a:link {background-color:red;} 6: a:visited {background-color:yellow;} 7: a:hover {background-color:skyblue; text-decoration:underline;} 8: a:active {background-color:green; text-decoration:underline;} 9: 10: div {position:absolute; background-color:red; 11: top:50px; left:50px; height:100px; width:100px;} 12: div:visited {background-color:yellow;} 13: div:hover {background-color:blue;} 14: div:active {background-color:green;} 15: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 46

49 (10) 언어의사클래스 교재 p.136 언어의사클래스 정의부분 형식 : 요소 :lang( 언어의약어 ) { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} p:lang(ko) {color:green;} 적용부분 형식 : < 태그명 lang = " 언어의약어 "> ~ </ 태그명 > <p lang="ko"> 이단락은언어의사클래스를이용합니다. </p> Copyright 2013 Lee, Kim & Park, Life & Power Press 49

50 (11) CSS3 의형제선택자 CSS3 의형제선택자 교재 p.137 형식 : 요소 1 ~ 요소 2 { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 사용예 div ~ p {background:yellow; font-style:italic;} Copyright 2013 Lee, Kim & Park, Life & Power Press 50

51 (12) CSS3 의속성선택자 CSS3 의속성선택자 교재 p.137 형식 : [ 속성 ^= 값 ] { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} [ 속성 $= 값 ] { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} [ 속성 *= 값 ] { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 사용예 p[title ^= "tree"] {font-weight:bold; color:red;} p[title $= "tree"] {font-style:italic;} p[title *= "tree"] {background:pink;} Copyright 2013 Lee, Kim & Park, Life & Power Press 51

52 (12) CSS3 의속성선택자 [ 예제 attribute-selector.html ] 정의부분 4: <style type="text/css"> 5: p[title^="tree"] {font-weight:bold; color:red;} 6: p[title$="tree"] {font-style:italic;} 7: p[title*="tree"] {background:pink;} 8: </style> 적용부분 교재 p : <div> 12: <p title="tree_1"> div의첫번째자식 p 요소 </p> 13: <p title="tree_2"> div의두번째자식 p 요소 </p> 14: <p title="a_tree"> div의세번째자식 p 요소 </p> 15: <h3 title="b_tree"> div의네번째자식 h3 요소 </h3> 16: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 52

54 (13) CSS3 의구조의사클래스 CSS3 의구조의사클래스 형식 : 교재 p.139 :root { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :last-child { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :nth-child(n) { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :nth-last-child(n) { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :nth-of-type(n) { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :nth-last-of-type(n) { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :first-of-type { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :last-of-type { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :only-child { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :only-of-type { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :empty { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} Copyright 2013 Lee, Kim & Park, Life & Power Press 54

55 (13) CSS3 의구조의사클래스 사용예 :root {background:red;} p:last-child {background:orange;} p:nth-child(2) {background:green;} p:nth-last-child(2) {background:pink;} p:nth-of-type(2) {background:skyblue;} p:nth-last-of-type(2) {background:red;} p:first-of-type {font-weight:bold; color:orange;} p:last-of-type {font-weight:bold; color:green;} p:only-child {background:red;} p:only-of-type {font-style:italic; color:blue; background:yellow;} p:empty {background:blue;} 교재 p.139 Copyright 2013 Lee, Kim & Park, Life & Power Press 55

56 (13) CSS3 의구조의사클래스 [ 예제 structural-pseudo-classes.html ] 정의부분 교재 p.140 4: <style type="text/css"> 5: p:first-of-type {font-weight:bold; color:orange;} 6: p:last-of-type {font-weight:bold; color:green;} 7: p:only-of-type {font-style:italic; color:blue; background:yellow;} 8: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 56

57 (13) CSS3 의구조의사클래스 적용부분 10: <body> 11: <p> body의첫번째자식 p 요소 </p> 12: <p> body의두번째자식 p 요소 </p> 13: <div> 14: <p> div의첫번째자식 p 요소 </p> 15: <h3> div의두번째자식 h3 요소 </h3> 16: </div> 17: <div> 18: <p> div의첫번째자식 p 요소 </p> 19: <p> div의두번째자식 p 요소 </p> 20: </div> 21: <p> body의세번째자식 p 요소 </p> 22: </body> 교재 p.140 Copyright 2013 Lee, Kim & Park, Life & Power Press 57

59 (14) CSS3 의타겟의사클래스 CSS3 의타겟의사클래스 교재 p.141 형식 : 요소 :target { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 사용예 *:target:before {content:url('test.jpg');} Copyright 2013 Lee, Kim & Park, Life & Power Press 59

60 (15) CSS3 의 UI 요소상태의사클래스 CSS3 의 UI 요소상태의사클래스 사용예 교재 p.141 형식 : 요소 :enabled { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :disabled { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} 요소 :checked { 속성 1 : 속성값 1; 속성 2 : 속성값 2;... 속성 n : 속성값 n;} input[type="text"]:enabled {background:yellow; color:red;} input[type="text"]:disabled {background:green;} input:checked {background:pink;} Copyright 2013 Lee, Kim & Park, Life & Power Press 60

62 2.3 CSS3 접두어 교재 p.143 [ 표 2.4] 브라우저별접두어 접두어 브라우저 -ms- 마이크로소프트브라우저 ( 인터넷익스플로러 ) -webkit- webkit 기반브라우저 ( 사파리, 크롬등 ) -moz- 모질라기반브라우저 ( 모질라파이어폭스등 ) -o- 오페라기반브라우저 ( 오페라 ) Copyright 2013 Lee, Kim & Park, Life & Power Press 62

63 2.3 CSS3 접두어 교재 p.143 사용예 border-image:url('heart.jpg') repeat; -webkit-border-image:url('heart.jpg') repeat; -moz-border-image:url('heart.jpg') repeat; -o-border-image:url('heart.jpg') repeat; Copyright 2013 Lee, Kim & Park, Life & Power Press 63

65 미디어스타일정의 교재 p.144 <link> 태그이용 <link rel="stylesheet" href=" 스타일시트파일의 url" media=" 미디어 _ 질의 _ 리스트 url(" 스타일시트의 url") 미디어 _ 질의 _ 리스트 미디어 _ 질의 { CSS_ 규칙 } Copyright 2013 Lee, Kim & Park, Life & Power Press 65

66 미디어질의작성 교재 p.145 미디어질의작성 미디어 _ 질의 _ 리스트형식미디어 _ 질의 {, 미디어 _ 질의 }* 미디어 _ 질의형식 [only not] 미디어 _ 타입 {and 조건식 }* 또는조건식 {and 조건식 }* 조건식형식미디어 _ 속성 [: 속성값 ] Copyright 2013 Lee, Kim & Park, Life & Power Press 66

67 미디어질의작성 교재 p.145 [ 표 2.5] 미디어타입 미디어타입 설명 all print projection screen tv aural braille handheld tty embossed 모든장치종이프로젝터디스플레이화면텔레비젼음성신디사이저점자리더기휴대용전화기, PDA 텔레타이프, 컴퓨터터미널점자프린터 Copyright 2013 Lee, Kim & Park, Life & Power Press 67

68 미디어질의작성 교재 p.146 [ 표 2.6] 미디어속성 속성 접두어사용 (min-, max-) width, height, device-width, device-height, resolution, aspect-ratio, device-aspect-ratio, Yes color-index, monochrome orientation, scan, grid No Copyright 2013 Lee, Kim & Park, Life & Power Press 68

69 미디어질의작성 교재 p.147 <link> 태그이용 <link rel="stylesheet" href="test1.css" media="print"> <link rel="stylesheet" href="test2.css" media="screen and (min-width:600px)"> <link rel="stylesheet" href="test3.css" media="screen and (max-device-width:480px) and (min-device-width:320px)"> Copyright 2013 Lee, Kim & Park, Life & Power Press 69

72 2.4.3 미디어질의예제 교재 p.147 media 속성이용예제 [ 스타일시트파일 : sheet-max.css] h3.max {background:yellow;} p.max {color:blue;} [ 스타일시트파일 : sheet-min.css] h3.min {background:skyblue;} p.min {color:red;} Copyright 2013 Lee, Kim & Park, Life & Power Press 72

73 2.4.3 미디어질의예제 교재 p.148 [ 예제 media-query.html ] 정의부분 4: <link rel="stylesheet" type="text/css" href="sheet-max.css" media="screen and (max-width:299px)"> 5: <link rel="stylesheet" type="text/css" href="sheet-min.css" media="screen and (min-width:300px)"> 적용부분 8: <h3 class="max"> 화면이작아지면노란색배경 </h3> 9: <h3 class="min"> 화면이커지면하늘색배경 </h3> 10: <p class="max"> 화면이작아지면파란색글자 </p> 11: <p class="min"> 화면이커지면빨간색글자 </p> Copyright 2013 Lee, Kim & Park, Life & Power Press 73

75 2.4.3 미디어질의예제 교재 규칙이용예제 [ 스타일시트파일 : sheet-media.css] (max-width:299px) { 2: h3.max {background:yellow;} 3: p.max {color:blue;} 4: } (min-width:300px) { 6: h3.min {background:skyblue;} 7: p.min {color:red;} 8: } Copyright 2013 Lee, Kim & Park, Life & Power Press 75

76 2.4.3 미디어질의예제 교재 p.149 [ 예제 media-query-test.html ] 정의부분 4: <link rel="stylesheet" type="text/css" href="sheet-media.css"> 적용부분 7: <h3 class="max"> 화면이작아지면노란색배경 </h3> 8: <h3 class="min"> 화면이커지면하늘색배경 </h3> 9: <p class="max"> 화면이작아지면파란색글자 </p> 10: <p class="min"> 화면이커지면빨간색글자 </p> Copyright 2013 Lee, Kim & Park, Life & Power Press 76

78 2.4.3 미디어질의예제 교재 p.151 안드로이드에뮬레이터예제 [ 스타일시트파일 : default.css] h3 {background:skyblue;} p {color:red;} [ 스타일시트파일 : phone.css] h3.phone {background:yellow;} p.phone {color:blue;} Copyright 2013 Lee, Kim & Park, Life & Power Press 78

79 2.4.3 미디어질의예제 교재 p.151 [ 예제 media.html ] 정의부분 4: <link rel="stylesheet" type="text/css" href="default.css" media="all" > 5: <link rel="stylesheet" type="text/css" href="phone.css" media="only screen and (max-device-width:480px) and min-device-width:320px)"> 적용부분 8: <h3 class="phone"> 휴대폰에서노란색배경 </h3> 9: <h3> 하늘색배경 </h3> 10: <p class="phone"> 휴대폰에서파란색글자 </p> 11: <p> 빨간색글자 </p> Copyright 2013 Lee, Kim & Park, Life & Power Press 79

83 2.5.1 폰트속성 교재 p.154 [ 예제 font.html ] 정의부분 4: <style type="text/css"> 5: h2 {color:blue; font-weight:bold; font-family: 바탕체 ;} 6: p {color:red; font-size:20pt; font-style:italic;} 7: </style> 적용부분 10: <h2> 파란색굵은바탕체글자 </h2> 11: <p> 빨간색크기가 20 인이탤릭글자 </p> Copyright 2013 Lee, Kim & Park, Life & Power Press 83

85 2.5.1 폰트속성 교재 p.155 [ 예제 font-variant.html ] 정의부분 4: <style type="text/css"> 5:.a {color:blue;} 6:.b {color:red; font-variant:small-caps;} 7:.c {font:italic small-caps bold x-large /10px 궁서체 ;} 8: </style> 적용부분 11: <h1 class="a"> ABCDEF <= 대문자크기 </h1> 12: <h1 class="a"> abcdef <= 소문자크기 </h1> 13: <h1 class="b"> abcdef <= 소문자크기랑비슷한대문자 </h1> 14: <h1 class="c"> Hello! 폰트속성을한꺼번에설정할때 </h1> 15: <h1 class="c"> 줄간격을설정하려면 ʻ/ʼ를입력하고수를적음 </h1> Copyright 2013 Lee, Kim & Park, Life & Power Press 85

89 CSS3 추가속성 교재 p.157 [ 예제 font-face.html ] 정의부분 4: <style type="text/css"> { 6: font-family:nanumpen; 7: src:url('nanumpen.ttf') format('truetype'); 8: } 9: h2 {color:blue; font-family:nanumpen, 궁서체 ; font-size:30pt;} 10: p {color:red; font-size:30pt;} 11: </style> 적용부분 14: <h2> 안녕하세요 </h2> 15: <p> 안녕하세요 </p> Copyright 2013 Lee, Kim & Park, Life & Power Press 89

91 CSS3 추가속성 교재 p.158 [ 예제 font-size-adjust.html ] 정의부분 4: <style type="text/css"> 5:.a {color:blue; font-family:verdana;} 6:.b {color:blue; font-family:times New Roman;} 7:.c {color:red; font-family:times New Roman; font-size-adjust:0.52;} 8: </style> 적용부분 11: <h1 class="a"> ABC abc <= verdana 글꼴 </h1> 12: <h1 class="b"> ABC abc <= Times New Roman 글꼴 </h1> 13: <h1 class="c"> ABC abc <= Times New Roman 글꼴 font-size-adjust 적용 </h1> Copyright 2013 Lee, Kim & Park, Life & Power Press 91

93 2.5.2 텍스트속성 교재 p.159 [ 표 2.10] 텍스트관련속성 text-align vertical-align text-indent text-decoration word-spacing letter-spacing line-height white-space text-transform Copyright 2013 Lee, Kim & Park, Life & Power Press 93

94 2.5.2 텍스트속성 교재 p.160 [ 예제 text.html ] 정의부분 4: <style type="text/css"> 5: h2 {text-align:center; word-spacing:30px;} 6: p {text-decoration:line-through; letter-spacing:10pt;} 7: </style> 적용부분 10: <h2> 단어간격이 30px 인가운데정렬 </h2> 11: <p> 글자간격을 10pt 로하고취소선적용 </p> Copyright 2013 Lee, Kim & Park, Life & Power Press 94

96 2.5.2 텍스트속성 교재 p.161 [ 예제 text-indent.html ] 정의부분 4: <style type="text/css"> 5:.a {color:blue; text-transform:capitalize; text-indent:30pt;} 6:.b {color:red; text-transform:uppercase; line-height:50pt;} 7:.c {font-weight:bold; white-space:pre; vertical-align:super;} 8: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 96

97 2.5.2 텍스트속성 교재 p.161 적용부분 11: <h1 class="a"> 들여쓰기 : 30pt 첫글자는대문자표시 : hello! </h1> 12: <h1 class="b"> 줄간격 : 50pt 전부대문자표시 : hello! </h1> 13: <table width="500" height="200" border="1"> 14: <tr class="c"> 15: <td width="250"> Good Morning! </td> 16: <td> Good Morning! </td> 17: </tr> 18: <tr> 19: <td> Good Morning! </td> 20: <td> Good Morning! </td> 21: </tr> 22: </table> Copyright 2013 Lee, Kim & Park, Life & Power Press 97

99 CSS3 추가속성 교재 p.162 [ 표 2.11] CSS3 에추가된텍스트관련속성 text-shadow text-justify text-overflow word-wrap word-break column-width column-count columns column-gap column-rule-width column-rule-style column-rule-color column-rule column-span Copyright 2013 Lee, Kim & Park, Life & Power Press 99

100 CSS3 추가속성 교재 p.163 [ 예제 text-column.html ] 정의부분 4: <style type="text/css"> 5: h2 {text-align:center; color:blue; text-shadow:3px 3px 5px skyblue;} 6:.column {column-count:3; column-gap:20px; 7: column-width:100px; column-rule:2px solid pink; 8: -webkit-column-count:3; -webkit-column-gap:20px; 9: -webkit-column-width:100px; -webkit-column-rule:2px solid pink; 10: -moz-column-count:3; -moz-column-gap:20px; 11: -moz-column-width:100px; -moz-column-rule:2px solid pink;} 12: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 100

101 CSS3 추가속성 교재 p.163 적용부분 15: <div class="column"> 16: <h2> 심은버들 </h2> <br> 17: - 한용운 <br> <br> 18: 19: 뜰앞에버들을심어 <br> 20: 님의말을매렸더니 <br> 21: 님은가실때에 <br> 22: 버들을꺾어말채찍을하였습니다. <br> <br> 23: 24: 버들마다채찍이되어서 <br> 25: 님을따르는나의말도채칠까하였더니 <br> 26: 남은가지천만사 ( 千萬絲 ) 는 <br> 27: 해마다해마다보낸한 ( 恨 ) 을잡아맵니다. 28: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 101

103 CSS3 추가속성 교재 p.164 [ 예제 text-justify.html ] 정의부분 4: <style type="text/css"> 5: h1 {width:320px; border:1px solid navy;} 6:.a {word-break:break-all; text-justify:inter-cluster;} 7:.b {word-wrap:normal;} 8:.c {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 9: </style> 적용부분 12: <h1 class="a"> Hello! Good Morning!!! </h1> 13: <h1 class="b"> Hello! Good Morning!!! </h1> 14: <h1 class="c"> Hello! Good Morning!!! </h1> Copyright 2013 Lee, Kim & Park, Life & Power Press 103

105 2.5.3 색과배경속성 교재 p.166 [ 표 2.12] 색과배경관련속성 color background-color background-image background-repeat background-attachment background-position background Copyright 2013 Lee, Kim & Park, Life & Power Press 105

106 2.5.3 색과배경속성 교재 p.166 [ 예제 background-color.html ] 정의부분 4: <style type="text/css"> 5: h1 {background-color:yellow;} 6: </style> 적용부분 9: <h1> 내용이표시되는부분의배경을노란색으로 </h1> Copyright 2013 Lee, Kim & Park, Life & Power Press 106

109 2.5.3 색과배경속성 교재 p.168 [ 예제 background-attachment.html ] 정의부분 4: <style type="text/css"> 5: #bg1 {background-image:url('pumpkin_small.jpg'); 6: background-repeat:no-repeat; 7: background-attachment:fixed; 8: background-position:top right;} 9: </style> 적용부분 12: <div id="bg1"> 13: <p> 할로윈호박이귀엽네요. </p> 18: <p> 할로윈호박이귀엽네요. </p> 19: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 109

111 CSS3 추가속성 교재 p.169 [ 표 2.13] CSS3 에추가된색과배경관련속성 background-size background-origin background-clip / -webkit-background-clip opacity -webkit-gradient -moz-linear-gradient -webkit-gradient -moz-radial-gradient -moz-repeating-linear-gradient -moz-repeating-radial-gradient Copyright 2013 Lee, Kim & Park, Life & Power Press 111

112 CSS3 추가속성 교재 p.170 [ 표 2.15] CSS3 의색상표기방법 rgb (red green blue) 표기방법 rgba (red green blue alpha) hsl (hue saturation lightness) hsla (hue saturation lightness alpha) 설명 rgb( 적 녹 청 ) 에의해색정의 rgb에투명도 alpha를추가색상, 채도, 명도에의해색정의 hsl에투명도 alpha를추가 Copyright 2013 Lee, Kim & Park, Life & Power Press 112

113 CSS3 추가속성 교재 p.171 [ 예제 background-size.html ] 정의부분 4: <style type="text/css"> 5: #bg1 {background-image:url('maple.jpg'); 6: background-position:top right; 7: background-repeat:no-repeat; 8: background-size:80px 60px;} 9: #bg2 {background-image:url('maple.jpg'); 10: background-repeat:no-repeat; 11: padding:25px; 12: border:5px dotted green; 13: background-clip:content-box; 14: -webkit-background-clip:content-box; 15: opacity : 0.5;} 16: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 113

114 CSS3 추가속성 교재 p.171 적용부분 19: <div id="bg1"> 20: <p> 단풍사진크기를줄였어요. </p> <p> 단풍사진크기를줄였어요. </p> 22: </div> 23: <div id="bg2"> 24: <p> 붉은단풍이아름답네요. </p> <p> 붉은단풍이아름답네요. </p> 26: <p> 붉은단풍이아름답네요. </p> 27: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 114

116 CSS3 추가속성 교재 p.172 [ 예제 background-origin.html ] 정의부분 4: <style type="text/css"> 5: div {background-image:url('pumpkin.jpg'); 6: background-position:bottom left; 7: background-repeat:no-repeat; 8: background-size:70px 50px; 9: padding:30px; 10: border:5px dashed orange;} 11: #bg1 {background-origin:border-box;} 12: #bg2 {background-origin:padding-box;} 13: #bg3 {background-origin:content-box;} 14: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 116

117 CSS3 추가속성 교재 p.173 적용부분 17: <div id="bg1"> 18: <p> background-origin:border-box;</p> 19: <p> background-origin:border-box;</p> 20: </div> 21: <div id="bg2"> 22: <p> background-origin:padding-box;</p> 23: <p> background-origin:padding-box;</p> 24: </div> 25: <div id="bg3"> 26: <p> background-origin:content-box;</p> 27: <p> background-origin:content-box;</p> 28: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 117

119 CSS3 추가속성 교재 p.174 [ 예제 gradient.html ] 4: <style type="text/css"> 5: div {position:absolute; width:200px; height:200px; 6: font-weight:bold; text-align:center; background:red;} 7: #bg1 {top:50px; left:50px; 8: background:-webkit-gradient(linear, left bottom, right top, from(red), to(yellow)); 9: background:-moz-linear-gradient(left 45deg, red, yellow);} 10: #bg2 {top:50px; left:300px; 11: background:-webkit-gradient(radial, center center, 10, center center, 90, from(red), to(yellow)); 12: background:-moz-radial-gradient(center center 0deg, circle cover, red 10%, yellow 60%);} 13: #bg3 {top:300px; left:50px; 14: background:-moz-repeating-linear-gradient(left 45deg, red 20px, yellow 40px);} 15: #bg4 {top:300px; left:300px; 16: background:-moz-repeating-radial-gradient(center center 0deg, circle cover, red 10%, yellow 20%, red 30%);} 17: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 119

120 CSS3 추가속성 교재 p.175 적용부분 20: <div id="bg1"> <p> 선형형식 </p> </div> 21: <div id="bg2"> <p> 원형형식 </p> </div> 22: <div id="bg3"> <p> 선형반복형식 </p> </div> 23: <div id="bg4"> <p> 원형반복형식 </p> </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 120

123 2.5.4 위치속성 교재 p.177 [ 예제 position.html ] 정의부분 4: <style type="text/css"> 5: h1 {position:absolute; 6: background-image:url('balloon.jpg'); 7: top:0pt; left:0pt; height:60pt; 8: z-index:1;} 9: h2 {position:absolute; 10: background-color:yellow; 11: top:35pt; left:40pt; height:60pt; 12: z-index:2;} 13: </style> 적용부분 16: <h1> 내용이표시되는부분의배경을이미지로 </h1> 17: <h2> 내용이표시되는부분의배경을노란색으로 </h2> Copyright 2013 Lee, Kim & Park, Life & Power Press 123

125 2.5.4 위치속성 교재 p.179 [ 예제 clip.html ] 정의부분 4: <style type="text/css"> 5: h1 {position:absolute; background-image:url('balloon.jpg'); 6: top:0px; left:0px; height:60px; 7: clip:rect(10px, 300px, 50px, 10px); 8: z-index:1; visibility:visible;} 9: h2 {position:absolute; background-color:yellow; 10: top:35px; left:40px; height:60px; 11: z-index:2; visibility:hidden;} 12: </style> 적용부분 15: <h1> 내용이표시되는부분의배경을이미지로 </h1> 16: <h2> 내용이표시되는부분의배경을노란색으로 </h2> Copyright 2013 Lee, Kim & Park, Life & Power Press 125

129 2.5.5 목록속성 교재 p.181 [ 예제 bullet.html ] 정의부분 4: <style type="text/css"> 5: ul li {list-style-image:url('bullet1.gif');} 6: ul li ul li {list-style-image:url('bullet2.gif');} 7: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 129

130 2.5.5 목록속성 교재 p.181 적용부분 10: <h2> 과일 </h2> 11: <ul> 12: <li> 여름과일 13: <ul> 14: <li> 참외 </li> 15: <li> 수박 </li> 16: <li> 포도 </li> 17: </ul> 18: </li> 19: <li> 겨울과일 20: <ul> 21: <li> 사과 </li> 22: <li> 배 </li> 23: <li> 귤 </li> 24: </ul> 25: </li> 26: </ul> Copyright 2013 Lee, Kim & Park, Life & Power Press 130

132 2.5.5 목록속성 교재 p.182 [ 예제 list.html ] 정의부분 4: <style type="text/css"> 5:.a {list-style-type:circle;} 6:.b {list-style:lower-roman inside none;} 7:.c {list-style:upper-alpha outside none;} 8: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 132

133 2.5.5 목록속성 교재 p.182 적용부분 11: <h2> 동물 </h2> 12: <ol class="a"> 13: <li> 포유류 14: <ol class="b"> 15: <li> 사자 </li> 16: <li> 호랑이 </li> 17: <li> 곰 </li> 18: </ol> 19: </li> 20: <li> 양서류 21: <ol class="c"> 22: <li> 개구리 </li> 23: <li> 두꺼비 </li> 24: <li> 맹꽁이 </li> 25: </ol> 26: </li> 27: </ol> Copyright 2013 Lee, Kim & Park, Life & Power Press 133

135 2.5.6 박스속성교재 p.183 외부여백 (margin) : 블록테두리의외부여백 외곽선 (outline) : 블록테두리의바깥선 테두리 (border) : 블록테두리의외형특성 내부여백 (padding): 테두리와블록의내용사이의간격 내용 (content) : 요소의내용 Copyright 2013 Lee, Kim & Park, Life & Power Press 135

136 2.5.6 박스속성 교재 p.184 [ 표 2.18] 박스관련속성 width border height margin max-width, max-height padding min-width, min-height outline-color float outline-style clear outline-width border-width outline border-style outline-offset border-color overflow Copyright 2013 Lee, Kim & Park, Life & Power Press 136

137 2.5.6 박스속성 교재 p.185 [ 예제 border.html ] 정의부분 4: <style> 5:.style1 {border-style:double; border-width:10pt; border-color:skyblue;} 6:.style2 {border-style:inset; border-width:10pt; border-color:navy;} 7:.style3 {border-style:groove; border-width:10pt; border-color:skyblue;} 8:.style4 {border-style:solid; border-width:10pt; border-color:navy;} 9:.style5 {border-style:ridge; border-width:10pt; border-color:skyblue;} 10:.style6 {border-style:outset; border-width:10pt; border-color:navy;} 11: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 137

138 2.5.6 박스속성 교재 p.185 적용부분 14: <table> 15: <tr> 16: <td> <p class="style1"> double border </p> </td> 17: <td> <p class="style2"> inset border </p> </td> 18: <td> <p class="style3"> groove border </p> </td> 19: </tr> 20: <tr> 21: <td> <p class="style4"> solid border </p> </td> 22: <td> <p class="style5"> ridge border </p> </td> 23: <td> <p class="style6"> outset border </p> </td> 24: </tr> 25: </table> Copyright 2013 Lee, Kim & Park, Life & Power Press 138

140 2.5.6 박스속성 교재 p.186 [ 예제 margin-padding.html ] 정의부분 4: <style type="text/css"> 5:.b1 {border:5px solid red; 6: margin:50px 100px 75px 20px; 7: padding:10px 30px 50px 70px;} 8:.b2 {border:5px dotted blue; 9: padding:50px;} 10: p {font-weight:bold; 11: background-color:pink;} 12: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 140

141 2.5.6 박스속성 교재 p.186 적용부분 15: <div class="b1"> 16: <p> 외부여백 (margin) 과내부여백 (padding) 을다르게설정함 </p> 17: </div> 18: <div class="b2"> 19: <p> 네면의내부여백 (padding) 을똑같이설정함 </p> 20: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 141

144 2.5.6 박스속성 교재 p.187 적용부분 10: <img class="float" src="beach.jpg" width="300px" height="200px"> 11: <div> 12: <p> float 속성을이용하여그림을오른쪽에배치 </p> 13: <p> 글들은자동으로왼쪽에배치 </p> 14: <p> 글들은자동으로왼쪽에배치 </p> 15: <p> 글들은자동으로왼쪽에배치 </p> 16: </div> 17: <div class="clear"> 18: <p> clear 속성을이용하여앞에설정된 float 속성해지 </p> 19: <p> clear 속성을이용하여앞에설정된 float 속성해지 </p> 20: <p> clear 속성을이용하여앞에설정된 float 속성해지 </p> 21: <p> clear 속성을이용하여앞에설정된 float 속성해지 </p> 22: <p> clear 속성을이용하여앞에설정된 float 속성해지 </p> 23: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 144

146 2.5.6 박스속성 교재 p.188 [ 예제 outline.html ] 정의부분 4: <style type="text/css"> 5: div {position:absolute; top:50px; width:150px; height:100px; 6: border:5px solid red; margin:50px;} 7:.b1 {left:50px; overflow:scroll; 8: outline:blue dotted 5px; 9: outline-offset:5px;} 10:.b2 {left:300px; overflow:hidden; 11: outline:orange dotted 5px; 12: outline-offset:20px;} 13: p{font-size:20px; font-weight:bold;} 14: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 146

147 2.5.6 박스속성 교재 p.189 적용부분 17: <div class="b1"> 18: <p> 외곽선을표시 </p> 19: <p> 오버플로우되면스크롤바생성 </p> 20: <p> 테두리와외곽선간격 :5px </p> 21: </div> 22: <div class="b2"> 23: <p> 외곽선을표시 </p> 24: <p> 오버플로우되어도스크롤바생성하지않음 </p> 25: <p> 테두리와외곽선간격 :20px </p> 26: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 147

149 CSS3 추가속성 교재 p.190 [ 표 2.19] CSS3 에추가된박스관련속성 box-align box-pack box-orient box-direction box-ordinal-group box-shadow box-sizing box-flex resize Copyright 2013 Lee, Kim & Park, Life & Power Press 149

150 CSS3 추가속성 교재 p.191 [ 예제 box-align.html ] 정의부분 4: <style type="text/css"> 5: div {position:absolute; top:50px; width:200px; height:200px; 6: background:yellow; border:2px solid red; 7: font-weight:bold; text-align:center; 8: display:-moz-box; display:-webkit-box; display:box;} 9: #b1 {left:50px; 10: -moz-box-align:start; -moz-box-orient:horizontal; -moz-box-pack:end; 11: -webkit-box-align:start; -webkit-box-orient:horizontal; -webkit-box-pack:end; 12: box-align:start; box-orient:horizontal; box-pack:end;} Copyright 2013 Lee, Kim & Park, Life & Power Press 150

151 CSS3 추가속성 교재 p.191 정의부분 13: #b2 {left:350px; 14: -moz-box-align:center; -moz-box-pack:center; 15: -moz-box-orient:vertical; -moz-box-direction:reverse; 16: -webkit-box-align:center; -webkit-box-pack:center; 17: -webkit-box-orient:vertical; -webkit-box-direction:reverse; 18: box-align:center; box-pack:center; 19: box-orient:vertical; box-direction:reverse;} 20: #b3 {left:650px; 21: -moz-box-align:end; -webkit-box-align:end; box-align:end;} 22: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 151

152 CSS3 추가속성 교재 p.191 적용부분 25: <div id="b1"> <p> 가나다 </p> <p> abc </p> <p> 123 </p> </div> 26: <div id="b2"> <p> 가나다 </p> <p> abc </p> <p> 123 </p> </div> 27: <div id="b3"> <p> 가나다 </p> <p> abc </p> <p> 123 </p> </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 152

154 CSS3 추가속성 교재 p.192 [ 예제 box-sizing.html ] 정의부분 4: <style type="text/css"> 5: div {position:absolute; top:50px; width:200px; height:200px; 6: border:20px solid blue; 7: font-weight:bold; text-align:center;} 8: #b1 {left:50px; 9: box-sizing:border-box; 10: -moz-box-sizing:border-box; 11: -webkit-box-sizing:border-box;} 12: #b2 {left:350px; 13: box-sizing:content-box; 14: -moz-box-sizing:content-box; 15: -webkit-box-sizing:content-box;} 16: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 154

155 CSS3 추가속성 교재 p.193 적용부분 19: <div id="b1"> <p> border-box </p> <p> padding 과 border 를포함한크기 </p> </div> 20: <div id="b2"> <p> content-box </p> <p> padding 과 border 를포함하지않은크기 </p> 21: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 155

157 CSS3 추가속성 교재 p.193 [ 예제 box-shadow.html ] 정의부분 4: <style type="text/css"> 5: div {position:absolute; top:50px; width:100px; height:100px; 6: background:lightgreen; border:2px solid green;} 7: #b1 {left:50px; box-shadow:10px 10px black; 8: overflow:auto; resize:horizontal;} 9: #b2 {left:250px; box-shadow:20px 20px 20px green; 10: overflow:auto; resize:vertical;} 11: #b3 {left:450px; box-shadow:20px 20px 20px 10px green; 12: overflow:auto; resize:both;} 13: #b4 {left:650px; box-shadow:10px 10px 10px 5px green inset;} 14: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 157

160 CSS3 추가속성 교재 p.195 [ 표 2.20] CSS3 에추가된테두리관련속성 border-image-source border-image-slice border-image-width border-image-outset border-image-repeat border-image border-radius overflow-x overflow-y Copyright 2013 Lee, Kim & Park, Life & Power Press 160

161 CSS3 추가속성 교재 p.196 [ 예제 border-image.html ] 정의부분 4: <style type="text/css"> 5: div {position:absolute; top:280px; width:200px; 6: border-width:20px; padding:10px;} 8:.bg1 {left:50px; 9: -webkit-border-image:url('heart.jpg') stretch; 10: -moz-border-image:url('heart.jpg') stretch; 11: -o-border-image:url('heart.jpg') stretch; 12: border-image:url('heart.jpg') stretch;} 14:.bg2 {left:350px; 18: border-image:url('heart.jpg') repeat;} 20:.bg3 {left:650px; 24: border-image:url('heart.jpg') round;} 26: p {font-size:20px; font-weight:bold; text-align:center;} 27: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 161

162 CSS3 추가속성 교재 p.196 적용부분 30: <p> 사용된이미지 <br><br> <img src="heart.jpg"> </p> 31: <div class="bg1"> 32: <p> stretch </p> 33: </div> <br> 34: <div class="bg2"> 35: <p> repeat </p> 36: </div> <br> 37: <div class="bg3"> 38: <p> round </p> 39: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 162

164 CSS3 추가속성 교재 p.197 [ 예제 border-radius.html ] 정의부분 4: <style type="text/css"> 5: div {border:2px solid red; width:300px; background:lightpink; 6: font-size:20px; font-weight:bold; text-align:center;} 7:.b1 {border-bottom-left-radius:25px;} 8:.b2 {border-bottom-right-radius:25px;} 9:.b3 {border-top-left-radius:25px;} 10:.b4 {border-top-right-radius:25px;} 11:.b5 {border-radius:25px;} 12: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 164

165 CSS3 추가속성 교재 p.198 적용부분 15: <div class="b1"> <p> 왼쪽아래곡선테두리 </p> </div> <br> 16: <div class="b2"> <p> 오른쪽아래곡선테두리 </p> </div> <br> 17: <div class="b3"> <p> 왼쪽위곡선테두리 </p> </div> <br> 18: <div class="b4"> <p> 오른쪽위곡선테두리 </p> </div> <br> 19: <div class="b5"> <p> 전체곡선테두리 </p> </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 165

167 CSS3 추가속성 교재 p.199 [ 예제 border-overflow.html ] 정의부분 4: <style type="text/css"> 5: div {border:thin solid red; width:100px; height:100px; 6: position:absolute; top:50px; 7: font-size:20px; font-weight:bold; text-align:center;} 8:.b1 {left:50px; overflow-x:visible; overflow-y:visible;} 9:.b2 {left:300px; overflow-x:hidden; overflow-y:hidden;} 10:.b3 {left:550px; overflow-x:scroll; overflow-y:scroll;} 11: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 167

168 CSS3 추가속성 교재 p.199 [ 예제 border-overflow.html ] 적용부분 14: <div class="b1"> <p> visible <img src="heart.jpg"> </p> </div><br> 15: <div class="b2"> <p> hidden <img src="heart.jpg"> </p> </div><br> 16: <div class="b3"> <p> scroll <img src="heart.jpg"> </p> </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 168

171 2.5.7 테이블속성 교재 p.200 [ 예제 border-spacing.html ] 정의부분 4: <style type="text/css"> 5: table {position:absolute; border-color:red; top:50px; 6: font-size:20px; font-weight:bold; text-align:center;} 7: #b1 {left:50px; caption-side:top; empty-cells:hide; 8: border-collapse:collapse;} 9: #b2 {left:300px; caption-side:bottom; empty-cells:show; 10: border-collapse:separate; border-spacing:10px;} 11: #b3 {left:600px; caption-side:bottom; empty-cells:hide; 12: border-collapse:separate; border-spacing:10px 30px;} 13: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 171

172 2.5.7 테이블속성 교재 p.201 적용부분 17: <table id="b1" border="1"> 18: <caption> 테이블 1 </caption> 19: <tr> <td> 첫번째셀 </td> <td> 두번째셀 </td> </tr> 20: <tr> <td> 세번째셀 </td> <td> 네번째셀 </td> </tr> 21: </table> 22: <table id="b2" border="1"> 23: <caption> 테이블 2 </caption> 24: <tr> <td> 첫번째셀 </td> <td> 두번째셀 </td> </tr> 25: <tr> <td></td> <td> 네번째셀 </td> </tr> 26: </table> 27: <table id="b3" border="1"> 28: <caption> 테이블 3 </caption> 29: <tr> <td> 첫번째셀 </td> <td> 두번째셀 </td> </tr> 30: <tr> <td></td> <td> 네번째셀 </td> </tr> 31: </table> Copyright 2013 Lee, Kim & Park, Life & Power Press 172

174 2.5.7 테이블속성 교재 p.202 [ 예제 table-layout.html ] 정의부분 4: <style type="text/css"> 5: table {border-color:red; width:500px; 6: font-size:20px; font-weight:bold; text-align:center;} 7: #b1 {left:50px; table-layout:auto;} 8: #b2 {left:400px; table-layout:fixed;} 9: p {display:table;} 10: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 174

175 2.5.7 테이블속성 교재 p.202 적용부분 14: <table id="b1" border="1"> 15: <caption> table-layout : 자동 </caption> 16: <tr> 17: <td width="10%"> abcdefghijklmnopqrstuvwxyz </td> 18: <td width="90%"> abcdefghijklmn </td> 19: </tr> 20: <tr> 21: <td> 세번째셀 </td> 22: <td> 네번째셀 </td> 23: </tr> 24: </table> <br> Copyright 2013 Lee, Kim & Park, Life & Power Press 175

176 2.5.7 테이블속성 교재 p.202 적용부분 ( 계속 ) 25: <table id="b2" border="1" width="250"> 26: <caption> table-layout : 고정 </caption> 27: <tr> 28: <td width="10%"> abcdefghijklmnopqrstuvwxyz </td> 29: <td width="90%"> abcdefghijklmn </td> 30: </tr> 31: <tr> 32: <td> 세번째셀 </td> 33: <td> 네번째셀 </td> 34: </tr> 35: </table> Copyright 2013 Lee, Kim & Park, Life & Power Press 176

178 2.5.7 테이블속성 교재 p.204 [ 예제 display.html ] 정의부분 4: <style type="text/css"> 5: div {border:2px solid red; width:500px; background:yellow; 6: font-weight:bold; text-align:center;} 7: h1 {display:inline;} 8: h2 {display:block;} 9: h3 {display:list-item;} 10: h4 {display:none;} 11: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 178

179 2.5.7 테이블속성 교재 p.204 적용부분 14: <div> 15: <h1> display : inline; </h1> 16: <h1> display : inline; </h1> 17: <h1> display : inline; </h1> 18: </div> <br> 19: <div> 20: <h2> display : block; </h2> 21: <h2> display : block; </h2> 22: <h2> display : block; </h2> 23: </div> <br> 24: <div> 25: <ul> 26: <h3> display : list-item; </h3> 27: <h3> display : list-item; </h3> 28: <h3> display : list-item; </h3> 29: </ul> 30: </div> <br> 31: <div> 32: <h4> display : none; </h4> 33: <h4> display : none; </h4> 34: <h4> display : none; </h4> 35: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 179

182 2.6 CSS3 변형 교재 p.207 [ 표 2.23] CSS3 의 transform 함수 translate(x,y) translate3d(x,y,z) translatex(n) translatey(n) translatez(n) scale(x,y) scale3d(x,y,z) scalex(n) scaley(n) scalez(n) rotate(angle) rotate3d(x,y,z,angle) rotatex(angle) rotatey(angle) rotatez(angle) matrix(a,b,c,d,e,f) matrix3d(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p) skew(x-angle,y-angle) skewx(angle) skewy(angle) perspective(n) Copyright 2013 Lee, Kim & Park, Life & Power Press 182

183 2.6 CSS3 변형 교재 p.208 [ 예제 transform-perpective.html ] 정의부분 4: <style type="text/css"> 5: div {position:absolute; width:300px; height:250px; margin:50px; 6: background-color:lightblue;} 7: h1 {position:absolute; width:200px; height:90px;} 8:.a {perspective:120; perspective-origin:10% 30%; 9: -webkit-perspective:120; -webkit-perspective-origin:10% 30%;} 10:.b {top:30px; background-color:blue; 11: transform:rotatey(45deg); -webkit-transform:rotatey(45deg);} 12:.c {top:30px; left:100px; background-color:red; 13: transform:rotatey(45deg); -webkit-transform:rotatey(45deg);} Copyright 2013 Lee, Kim & Park, Life & Power Press 183

184 2.6 CSS3 변형 교재 p.208 정의부분 14:.x {left:400px;} 15:.y {top:10px; left:50px; background-color:blue; 16: transform:rotatey(180deg); -webkit-transform:rotatey(180deg); 17: backface-visibility:visible; -webkit-backface-visibility:visible;} 18:.z {top:110px; left:50px; background-color:red; 19: transform:rotatey(180deg); -webkit-transform:rotatey(180deg); 20: backface-visibility:hidden; -webkit-backface-visibility:hidden;} 21: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 184

185 2.6 CSS3 변형 교재 p.208 적용부분 24: <div class="a"> 25: <h1 class="b"> Hello! Good Morning!!! </h1> 26: <h1 class="c"> Hello! Good Morning!!! </h1> 27: </div> 28: <div class="x"> 29: <h1 class="y"> Hello! Good Morning!!! </h1> 30: <h1 class="z"> Hello! Good Morning!!! </h1> 31: </div> Copyright 2013 Lee, Kim & Park, Life & Power Press 185

188 2.7 CSS3 전환 교재 p.214 [ 표 2.25] CSS3 의전환형태 형태 동일한 cubic-bezier(a, b, c, d) 설명 linear cubic-bezier(0,0,1,1) 처음과끝이같은속도 ease cubic-bezier(0.25,0.1,0.25,1) 처음느리고, 중간빠르고, 끝느린속도 ease-in cubic-bezier(0.42,0,1,1) 처음느린속도 ease-out cubic-bezier(0,0,0.58,1) 끝느린속도 ease-in-out cubic-bezier(0.42,0,0.58,1) 처음과끝이느린속도 Copyright 2013 Lee, Kim & Park, Life & Power Press 188

189 2.7 CSS3 전환 교재 p.214 [ 예제 transition.html ] 정의부분 4: <style type="text/css"> 5: h1 {position:absolute; top:30px; width:50px; text-align:center;} 6:.red {background-color:red; left:50px; 7: transition:height 1s linear 1s; 8: -webkit-transition:height 1s linear 1s; 9: -moz-transition:height 1s linear 1s; 10: -o-transition:height 1s linear 1s;} 11:.orange {background:orange; left:100px; 12: transition:height 1s ease 1s; 16:.yellow {background:yellow; left:150px; 17: transitionheight 1s ease-in 1s; Copyright 2013 Lee, Kim & Park, Life & Power Press 189

190 2.7 CSS3 전환 교재 p.214 정의부분 21:.green {background-color:green; color:white; left:200px; 22: transition:height 1s ease-out 1s; 26:.blue {background:blue; color:white; left:250px; 27: transition:height 1s ease-in-out 1s;; 31:.navy {background:navy; color:white; left:300px; 32: transition:height 1s cubic-bezier(0, 0, 1, 1) 1s; 36:.purple {background:purple; color:white; left:350px; 37: transition:height 1s cubic-bezier(0.42, 0, 0.58, 1) 1s; 41: h1:hover {background:pink; color:blue; height:200px;} 42: </style> Copyright 2013 Lee, Kim & Park, Life & Power Press 190

191 2.7 CSS3 전환 교재 p.215 적용부분 ( 계속 ) 45: <h1 class="red"> 빨 </h1> <h1 class="orange"> 주 </h1> 46: <h1 class="yellow"> 노 </h1> <h1 class="green"> 초 </h1> 47: <h1 class="blue"> 파 </h1> <h1 class="navy"> 남 </h1> 48: <h1 class="purple"> 보 </h1> Copyright 2013 Lee, Kim & Park, Life & Power Press 191

193 2.8 CSS3 애니메이션 [ 표 2.26] CSS3 규칙 (rule) animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation animation-play-state 교재 p.216 Copyright 2013 Lee, Kim & Park, Life & Power Press 193

194 2.8 CSS3 애니메이션 교재 p.217 [ 예제 animation.html ] 정의부분 4: <style type="text/css"> 5:.rainbow {position:absolute; top:30px; width:50px; 6: background-color:red; text-align:center; 7: animation:myani 5s linear infinite alternate; 8: animation-play-state:running; 9: -webkit-animation:myani 5s linear infinite alternate; 10: -webkit-animation-play-state:running; 11: -moz-animation:myani 5s linear infinite alternate; 12: -moz-animation-play-state:running;} Copyright 2013 Lee, Kim & Park, Life & Power Press 194

195 2.8 CSS3 애니메이션 교재 p.217 정의부분 myani 14: { 0% {left:0px; background:red; height:10px;} 15: 15% {left:50px; background:orange; height:30px;} 16: 30% {left:100px; background:yellow; height:50px;} 17: 45% {left:150px; background:green; color:white; height:70px;} 18: 60% {left:200px; background:blue; color:white; height:100px;} 19: 75% {left:250px; background:navy; color:white; height:130px;} 20: 100% {left:300px; background:purple; color:white; height:150px;}} 37: </style> 적용부분 40: <h1 class="rainbow"> 무지개색 </h1> Copyright 2013 Lee, Kim & Park, Life & Power Press 195

모두 보기

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width