02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자.

Size: px

Start display at page:

Download "02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자."

원준 계
5 years ago
Views:

1 02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자.

2 이장에서다룰내용 글꼴꾸밈관련스타일시트텍스트관련스타일시트배경관련스타일시트목록관련스타일시트하이퍼링크관련스타일시트 2

3 01. 글꼴꾸밈관련스타일시트 v 글자에관련된스타일시트는크기, 스타일, 모양등에관련된 font 속성이가장많이사용 속성값설명 color 색이름, RGB 값글자색 font-family 글꼴이름글꼴 ( 글씨체 ) font-size 절대값, 상대값, 길이, 퍼센트글자크기 font-style normal, italic, oblique 글자모양 font-variant font-weight normal, small-caps normal, bold, bolder, ligh ter, 100~900 작은크기의대문자로 지정하기 글자의굵기 3

4 [ 기본예제 ] 스타일로글꼴변경하기 01: <html> 02: <head> 03: <STYLE TYPE = "text/css"> 04: <!-- 05: H1 { 06: font-family: 굴림체 ; 07: font-weight : lighter; 08: color : red 09: } 10: P { 11: font-family: 궁서체 ; 12: font-weight : bolder ; 13: font-style : italic ; 14: font-size : 20pt ; 15: }

5 [ 기본예제 ] 스타일로글꼴변경하기 16: --> 17: </STYLE> 18: </head> 19: <body> 20: <center> 21: <H1> 스타일시트적용하기 </H1> 22: <br><hr> 23: <P> 24: 글자크기는 20pt이고, 이탤릭체이며 25: 폰트의종류는궁서체입니다. 26: </P> 27: <hr> 28: </center> 29: </body> 30: </html>

6 02. 텍스트관련스타일시트 속성값설명 text-indent 길이, 퍼센트들여쓰기 text-align left, right, center 문자열정렬 line-height normal, 숫자, 길이, 퍼센트 줄간격 ( 행간격 ) * 행 의높이가아니다. vertical-align top, bottom, middle 수직정렬 letter-spacing normal, auto, 길이 문자간격 word-spacing normal, 길이 단어간격 white-spacing normal, pre, nowrap 빈칸및줄바꿈처리 text-decoration text-transform none, underline, overline, line -through, blink none, capitalize, uppercase, l owercase 문자열처리 문자열대소문자변경 6

7 [ 기본예제 ] 스타일로텍스트속성변경하기 01: <html> 02: <head> 03: <STYLE TYPE = "text/css"> 04:  16: </STYLE>

8 [ 기본예제 ] 스타일로텍스트속성변경하기 17: </head> 18: <body> 19: <center> 20: <H1> 스타일시트적용하기 </H1> 21: <br> 22: <P> 23: 텍스트장식은 overline이고, 이탤릭체이며, <br> 24: 폰트의크기는 20 포인트입니다. 25: </P> 26: </center> 27: </body> 28: </html>

9 03. 배경관련스타일시트 속성값설명 background 대표속성 background-color 색이름, RGB 값, transparent 배경색지정 background-image url, none 배경이미지경로 / 파일지정 background-repeat repeat, repeat-x, repeaty, no-repeat 배경이미지의반복여부, 반 복방법 background-attachment scroll, fixed 배경이미지의스크롤여부 background-position ( 퍼센트, 길이 ), (top,center, bottom = 세로위치 ), (left,ce nter,right= 가로위치 ) 배경이미지의시작위치설 정 9

10 3.1 배경에이미지에관련된 backgroundimage/background-repeat 속성 v 배경에색상을지정할뿐만아니라이미지를삽입할수있다. v 배경에이미지를설정하려면 background-image 속성을사용. v 삽입할이미지의파일명을기술하려면 url 을기술하여지정. v 문서는물론이고테이블이나박스에도이미지를설정할수있음. selector { background-image: url(" 경로명 + 파일명 ") } 10

11 3.1 배경에이미지에관련된 backgroundimage/background-repeat 속성 v HTML 문서의배경그림을타일을붙이듯연속적으로나타낼수있다. v 타일효과를주기위해사용되는속성이 background-repeat v 이속성에속성값을지정함으로서배경그림이가로나세로중한쪽방향으로만반복되어나타날수도있고단한번만출력될수도있다. 속성값 설명 no-repeat 배경이미지를반복하지않고한번만나타냅니다. repeat-x 배경이미지를가로방향으로반복하여나타냅니다. repeat-y 배경이미지를세로방향으로반복하여나타냅니다. repeat 배경이미지를바둑판식배열로나타냅니다. 11

12 [ 기본예제 ] 배경이미지지정하기 01: <html> 02: <head> 03: <STYLE TYPE = "text/css"> 04: body { 05: background-color: purple; 06: background-image: url('back.gif'); 07: background-repeat: repeat-y; 08: } 09: H2 { 10: color:white; 11: } 12: </STYLE> 13: </head> 14: <body > 15: <H1> 스타일시트적용하기 </H1> 16: <br><br><hr> 17: <H2 align="right"> repeat-y </H2><BR><HR> 18: </body> 19: </html>

13 3.2 배경이미지의위치조정하는 background-position 속성 v 배경그림이반복적으로나타나지않을경우에는왼쪽상단에나타남 v 배경이미지가나타나는위치를변경할수있음. v background-position 속성에비율로위치를지정하거나키워드로설정할수있음 v 특정위치를지정하지않으면기본적으로왼쪽상단에이미지를나타남. selector { background-position: 속성값 } 13

14 3.2 배경이미지의위치조정하는 background-position 속성 v 왼쪽상단을 0% 0% 로하고오른쪽하단을 [100% 100%] 으로보고원하는위치에계산하여이미지를나타낼수있음. 속성값 설명 0% 0% = left top 왼쪽상단에배경이미지를나타냅니다. 100% 100% = right bottom 오른쪽하단에배경이미지를나타냅니다. 50% 50% = center center 문서가운데에배경이미지를나타냅니다. 14

15 [ 기본예제 ] 배경이미지위치조정하기 01: <html> 02: <head> 03: <STYLE TYPE = "text/css"> 04: body { 05: color:white; 06: background-color: darkblue; 07: background-image: url('sant.gif'); 08: background-repeat: no-repeat; 09: background-position: center top 10: } 11: </STYLE> 12: </head> 13: <body > 14: <H1> 스타일시트적용하기 </H1> 15: <br><br><hr> 16: <H1 align="right"> center top </H1><BR><HR> 17: </body> 18: </html>

16 3.3 배경이미지고정하는 background-attachment 속성 v 스크롤을이동함에따라배경이미지의스크롤여부를결정하기위해서 background-attachment 속성을사용함. selector { background-attachment : 속성값 } v 기본적으로는속성값이 scroll 지정되어있으므로다른내용들과함께배경이미지가스크롤됨. 속성값 설명 fixed 배경이미지가현재위치에고정되어나타냅니다. scroll 배경이미지가 HTML 문서의스크롤크기에따라함께스크롤 v fixed 로지정하면배경그림은그대로멈춰있고문서내의내용들만스크롤됨. 16

17 [ 기본예제 ] 배경이미지고정하기 01: <html> 02: <head> 03: <STYLE TYPE = "text/css"> 04: body { 05: color:white; 06: background-image: url('mulan.gif'); 07: background-repeat: no-repeat; 08: background-attachment: fixed; 09: } 10: </STYLE> 11: </head> 12: <body > 13: <h1> 스타일시트적용하기 </h1> 14: <hr> 15: <h3>

18 [ 기본예제 ] 배경이미지고정하기 16: 너에대해많은이야기를들었다, <br> 17: 뮬란 <br> 18: 아버지의검을훔쳐서, <br> 19: 가출을한뒤에, <br> 20: 겁없이군인으로가장하고, <br> 21: 지휘관을속이기까지했으며,<br> 22: 우리군대의명예를실추시켰고, <br> 23: 내궁궐까지망쳐놓았어...<br> 24: <br><br><br><br><br><br><br><br><br><br> 25:... 그러나 <br> 26: 네가나라를위해어떤일을 <br> 27: 했는지 <br> 28: 세상이기억할것이다.<br> 29: <br><br><br><br><br><br><br> 30: <h3> 31: </body> 32: </html>

19 04. 목록관련스타일시트 list-style 대표속성설명 list-style-type disc, circle, square, decima l, lower-roman, upper-rom an, lower-alpha, upper-alp ha, none 목록표시의형태 list-style-position inside, outside 목록표시의위치 list-style-image URL, none 목록표시에이미지 를사용할수있다. 19

20 [ 기본예제 ] 다양한형태의목록으로탈바꿈하기 01: <html> 02: <head> 03: <STYLE TYPE = "text/css"> 04:.TEST1 {list-style-type:squre } 05:.TEST2 {list-style-image:url("bullet1.gif");list-style-position:inside} 06:.TEST3 {list-style-image:url("bullet2.gif");list-style-position:outside} 07: </STYLE> 08: </head> 09: <body> 10: <table> 11: <tr> 12: <td width=200><h3> 나의몸 </h3></td> 13: <td width=300><h3> 동물친구들 </h3></td> 14: <td width=200><h3> 과일 </h3></td> 15: </tr> 16: <tr> 17: <td> 18: <ul CLASS="TEST1"> 19: <li> 얼굴 20: <li> 손 21: <li> 발 22: </ul> 23: </td> 24:

21 [ 기본예제 ] 다양한형태의목록으로탈바꿈하기 25: <td> 26: <ul CLASS="TEST2"> 27: <li> 고양이 28: <li> 바둑이 29: </ul> 30: </td> 31: 32: <td> 33: <ul CLASS="TEST3"> 34: <li> 사과 35: <li> 포도 36: </ul> 37: </td> 38: </tr> 39: </body> 40: </html>

22 05. 하이퍼링크관련스타일시트 v 앵커가상클래스의종류 a a:link a:visited a:active a:hover 설명하이퍼링크에대한모든설정방문한적이있는링크속성설정링크를클릭하려는순간의속성설정마우스가링크위에올라가있을때속성설정 22

23 [ 기본예제 ] 하이퍼링크속성활용하기 01: <html> 02: <head> 03: <STYLE TYPE = "text/css"> 04:  10: </STYLE> 11: </head> 12: <body > 13: <H2> 스타일시트적용하기 </H2> 14: <hr> 15: <h3><b> 16: 방문전스타일 : <a href=" 다음 </a> <br> 17: 방문후스타일 : <a href=" 네이버 </a> <br> 18: 마우스올린스타일 : <a href=" 야후 </a> <br> 19: </b></h3> 20: </body> 21: </html>

24 행복해지는 CSS 2 장

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

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