3 [CSS] 1. CSS 2. CSS 구문 3. 스타일시트종류 4. CSS 기본속성 (Properties)

Size: px

Start display at page:

Download "3 [CSS] 1. CSS 2. CSS 구문 3. 스타일시트종류 4. CSS 기본속성 (Properties)"

영찬 비
4 years ago
Views:

1 3 [CSS] 1. CSS 2. CSS 구문 3. 스타일시트종류 4. CSS 기본속성 (Properties)

2 HTML, JavaScript, CSS 3부. CSS 1. CSS HTML 태그들은웹페이지를제작하는데있어서다양하게설계하거나수시로변경하는데많은제약이따릅니다. 이를보완하기위해만들어진것이스타일시트이고스타일시트의표준안이 CSS입니다. 1.1 CSS 특징 HTML 태그들은원래문서의내용을정의하기위해고안되었습니다. 태그들은 " 이것은헤더이다 ", " 이것은문단이다 ", " 이것은테이블이다 " 라는정의를 <h1>, , <tabe> 등의태그를통해서나타낸것입니다. 문서의레이아웃은태그에의해서가아니라브라우저에의해서다루어져야합니다. HTML을이용해서웹페이지를제작할경우전반적인틀에서세세한글꼴까지일일이지정해주어야합니다. 그러나웹페이지의스타일을정의한파일을미리만들어놓고, 스타일시트파일에서변경하면관련되는전체웹페이지의내용이한꺼번에변경됩니다. 이렇게스타일을이용하면문서전체의일관성을유지할수있고작업시간도단축됩니다. 웹페이지개발자들은보다다양한디자인으로웹페이지를설계할수있고, 글자의크기, 글자체, 줄간격, 배경색상, 위치등을자유롭게선택하거나변경할수있으며유지 보수도간편하게할수있습니다. 또한각기다른브라우저에동일한형태의문서를제공할수있습니다. CSS로만들어진문서는사용자들의브라우저환경에따라홈페이지가다르게나타나는일이없고어느환경에서나제작자가의도한대로그효과가전달됩니다. 스타일은 HTML 페이지의 <head> 태그안에정의하거나외부 css파일에정의할수도있습니다. 그리고여러개의스타일시트도하나의 HTML 문서내에서참조될수있습니다. 이때스타일이적용되는순서는다음과같습니다. 이중에서가장우선순위가높은것은태그안에스타일을정의한인라인스타일 (Inine Stye) 방식

3 Chapter CSS 1 입니다.

4 HTML, JavaScript, CSS 3부. CSS 2. CSS CSS 구문은선택자 (seector), 속성 (property), 값 (vaue) 세부분으로되어있습니 다. { : } 2.1 태그선택자 선택자 (seector) 는일반적으로스타일정의하고싶은 HTML 태그또는요소들을 사용합니다. 속성 (property) 은변경하고싶은스타일정보이며, 각속성은값 (vaue) 을가질수있습니다. 속성과값은 ":"(coon) 으로분리하고 "{" 와 "}"(cury braces) 로둘러싸여있습니다. body {coor: back} 만일값이공백을포함한여러단어일경우다음과같이 quote(") 로묶어줍니다. p {font-famiy: "sans serif"} 하나의선택자에하나이상의속성을정의하고싶을경우에는 ";"(semicoon) 으로 분리해줍니다. p {text-aign:center;coor:red} 위의예를좀더보기좋게하기위하여다음예와같이엔터와들여쓰기를할수 있습니다. p { } text-aign: center; coor: back; font-famiy: aria 2.2 그룹선택자 (Group Seector) 선택자를 ","(comma) 로분리하여선언하면여러개선택자에하나의스타일을적용시킬수있습니다. 다음은헤더를나타내는태그들에색상을적용한예입니다. 이렇게하면모든헤더들은문자의색상이 bue로나타납니다. h1,h2,h3,h4,h5,h6

5 Chapter CSS 2 { } coor: bue 2.3 클래스선택자 (Cass Seector) 클래스선택자는같은 HTML요소에서로다른스타일을정의할수있습니다. 예를들어 태그를이용하여문단을나눌때한문단은오른쪽정렬을사용하고, 다른문단은가운데정렬을사용하고싶을경우가있을것입니다. 다음은클래스선택자를사용한예입니다. p.right {text-aign: right} p.center {text-aign: center} 클래스선택자는선택자이름앞에 "." 을이용하여선언합니다. HTML 문서에서클래스선택자를사용하는방법은다음과같습니다. . . 만일클래스선택자가여러개정의되어있다면다음과같이하나의 HTML 요소에 클래스선택자를여러개지정할수있습니다. . 클래스선택자는특정태그에만적용시키지않아도됩니다. 다음과같이클래스선택자앞에태그이름을빼고선언하면원하는어떤태그에서도클래스선택자를사용할수있습니다..center {text-aign: center} 위의클래스선택자는다음예에서보는바와같이 <h1> 태그에서도사용할수있으 면 태그에서도사용할수있습니다.

6 HTML, JavaScript, CSS 3부. CSS <h1 cass="center"> heading. </h1> . : Mozia/Firefox 에서는클래스선택자의이름이숫자로시작할수없습니다. 가끔은어떤특정한속성을갖는요소에만스타일을적용시킬경우가있습니다. 다 음은텍스트입력상자를나타내는 <input> 태그에서 type 속성의값이 text 일경우 에만스타일을지정하기위한예입니다. input[type="text"] {background-coor: bue} 2.4 아이디선택자 (ID Seector) id 선택자는 # 으로정의합니다. 다음은 id 속성의갑이 bue 를갖는 HTML 요소에파란색을지정하는예입니다. #bue {coor: bue} 다음은 태그의 id 속성값이 para1 을갖는경우스타일을정의한예입니다. p#para1 { text-aign: center; coor: red } 주의 : Mozia/Firefox 에서는 id 선택자의이름이숫자로시작할수없습니다. 2.5 의사 ( 擬似 ) 선택자 (Pseudo Seector) 의사 (pseudo) 선택자는특별한선택자에스타일을지정할수있는선택자입니다 Pseudo-cass seector:pseudo-cass {property: vaue} seector.cass:pseudo-cass {property: vaue}

7 Chapter CSS 2 의사클래스선택자종류 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: a.one:ink {coor: #ff0000} 7: a.one:visited {coor: #0000ff} 8: a.one:hover {coor: #ffcc00} 9: 10: a.two:ink {coor: #ff0000} 11: a.two:visited {coor: #0000ff} 12: a.two:hover {font-size: 150%} 13: 14: a.three:ink {coor: #ff0000} 15: a.three:visited {coor: #0000ff} 16: a.three:hover {background: #66ff66} 17: 18: a.four:ink {coor: #ff0000} 19: a.four:visited {coor: #0000ff} 20: a.four:hover {font-famiy: } 21: 22: a.five:ink {coor: #ff0000; text-decoration: none} 23: a.five:visited {coor: #0000ff; text-decoration: none} 24: a.five:hover {text-decoration: underine} 25: </stye> 26: </head> 27: 28: <body> 29: 마우스를링크위에올려보세요. 30:

HTML, JavaScript, CSS 3부. CSS 31: <p><b><a cass="one" href="http://www.daum.net" target="_bank"> 올리면색상이변합니다.</a></b></p> 32: <p><b><a cass="two" href="http://www.daum.net" target="_bank"> 마우스를올리면폰트크기가변합니다.

8 HTML, JavaScript, CSS 3부. CSS 31: <a cass="one" href=" target="_bank"> 올리면색상이변합니다.</a> 32: <a cass="two" href=" target="_bank"> 마우스를올리면폰트크기가변합니다.</a> 33: <a cass="three" href=" target="_bank"> 마우스를올리면배경색이변합니다.</a> 34: <a cass="four" href=" target="_bank"> 마우스를올리면폰트글자체가변합니다.</a> 35: <a cass="five" href=" target="_bank"> 마우스를올리면밑줄이나타납니다.</a> 36: </body> 37: 38: </htm> 실행결과 예제코드 1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" " 2:  3: 4: <htm> 5: <head> 6: <stye type="text/css"> 7: p:first-chid 8: { 9: coor:bue 10: }

Chapter CSS 2 11: </stye> 12: </head> 13: 14: <body> 15: <p> :first-chid 가작동하기위해서는 DOCTYPE 이선언되어야합니다.</p> 16: <p> 익스플로러에서 :first-chid 가작동하기위해서는 DOCTYPE 이선언되어야합니다.</p> 17: <p>doctype 은문서의맨첫라인에기술되야합니다.

9 Chapter CSS 2 11: </stye> 12: </head> 13: 14: <body> 15: :first-chid 가작동하기위해서는 DOCTYPE 이선언되어야합니다. 16: 익스플로러에서 :first-chid 가작동하기위해서는 DOCTYPE 이선언되어야합니다. 17: doctype 은문서의맨첫라인에기술되야합니다. 18: </body> 19: 20: </htm> 실행결과 Pseudo-eement seector:pseudo-eement {property: vaue} seector.cass:pseudo-eement {property: vaue} 의사요소선택자종류 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css">

10 HTML, JavaScript, CSS 3부. CSS 6: p:first-etter 7: { 8: coor: #ff0000; 9: font-size:xx-arge 10: } 11: p:first-ine 12: { 13: coor: #0000ff; 14: font-variant: sma-caps 15: } 16: </stye> 17: </head> 18: 19: <body> 20: 21: 혼합해서사용할수있습니다. :first-etter and :first-ine 의사요소선택자는문장의첫글자와첫줄에특별한효과를줄수있습니다. 22: 23: </body> 24: 25: </htm> 실행결과 2.6 주석 (CSS Comments) 코드를설명하기위해사용합니다. 주석을넣으면나중에소스코드를수정할때도움을줄것입니다. 주석은브라우저에의해무시기때문에실행과는무관합니다. 주석은 "/*" 로시작하여 "*/" 로끝납니다. /* : */ p

11 Chapter CSS 2 { } text-aign: center; /*. */ coor: back; font-famiy: aria 2.7 단위 (Units) (Measurements) CSS 에서는크기, 넓이, 길이, 두께등을설정할때여러가지단위를사용할수 있습니다. 다음표는 CSS 에서사용할수있는단위들과설명입니다. % 비율 in cm mm em ex pt pc inch centimeter miimeter 1em 은현재폰트의크기와같습니다. 2em 은현재폰트크기의 2배크기를의미합니다. 만역현재폰트의크기가 12pt 이면 2em은 24pt 크기에해당합니다. 1ex 는폰트의높이 (x-height) 를의미합니다. x-height 는일반적으로폰트크기의절반입니다. point (1 pt = 1/72 inch) pica (1 pc = 12 points) px pixes ( 컴퓨터화면의전하나크기에해당합니다.) 색상 (Coors) CSS 에서색을표현할때 HTML 태그에서사용하는것보다더다양한방법으로표 현이가능합니다. coor_name rgb(x,x,x) rgb(x%, x%, x%) #rrggbb 영문으로된색이름을사용 ( 예 : red) RGB 값을 10진수로표현 ( 예 : rgb(255,0,0)) RGB 값은백분율 (%) 로표현 ( 예 : rgb(100%,0%,0%)) 16진수로표현 ( 예 : #ff0000)

12 HTML, JavaScript, CSS 3부. CSS 3. 시트종류 스타일시트를정의하는방법은외부스타일시트파일, <head> 태그안의정의그 리고 HTML 태그안에정의하는방법이있습니다. 3.1 외부스타일시트 (Externa Stye Sheet) 외부스타일시트는여러웹페이지에스타일을적용시킬때이상적입니다. 외부스타일시트를사용하면하나의파일만수정하여어려웹페이지의스타일을변경시킬수있습니다. 그렇게하기위해서각각웹페이지에는 <ink> 태그를사용하여외부스타일시트파일을지정하는문장에 <head> 태그에포함되어있어야합니다. <head> <ink re="styesheet" type="text/css" href="mystye.css"/> </head> 브라우저는 mystye.css 파일로부터스타일정의를읽어웹페이지에적용시킵니다. 외부스타일시트는어떤텍스트에디터로든지작성이가능합니다. 외부스타일시트파일은확장자를.css로하여저장해야하고, 외부스타일시트파일은 HTML 태그를포함할수없습니다. 다음은외부스타일시트파일을작성한예입니다. hr {coor: sienna} p {margin-eft: 20px} body {background-image: ur("images/back40.gif")} : 속성의값에단위가포함될경우값과단위사이에공백을넣지마세요. 예를들어 "margin-eft: 20px" 를 "margin-eft: 20 px" 으로표시할경우에는 Mozia/Firefox 또는 Netscape 에서는동작하지않을수있습니다. 예제코드 (HTML 문서 ) 1:  2: 3: <htm> 4: <head> 5: <ink re="styesheet" type="text/css" href="ex1.css" /> 6: </head> 7: 8: <body> 9:

13 Chapter 시트종류 3 10: <h1> 헤더는 36 pt 크기입니다.</h1> 11: <h2> 이헤더글씨는파란색입니다.</h2> 12: 13: 이문단의왼쪽여백은 50 픽셀입니다. 14: 15: </body> 16: </htm> ex1.css 1: body {background-coor: yeow} 2: h1 {font-size: 36pt} 3: h2 {coor: bue} 4: p {margin-eft: 50px} 실행결과 3.2 내부스타일시트 (Interna Stye Sheet) 내부스타일시트는하나의문서에서만사용하는스타일을정의할때사용합니다. 내부스타일은 <head> 태그안에 <stye> 태그를이용하여정의합니다. <head> <stye type="text/css"> hr {coor: sienna} p {margin-eft: 20px} body {background-image: ur("images/back.gif")} </stye> </head>

14 HTML, JavaScript, CSS 3부. CSS 브라우저는알려지지않는태그를무시합니다. 스타일을지원하지않는오래된버전의브라우저일경우 <stye> 태그를무시하고 <stye> 태그안의내용을웹페이지에출력하게됩니다. 이것을방지하기위해서다음과같이 HTML 주석을사용할수있습니다. <head> <stye type="text/css">  </stye> </head> 3.3 인라인스타일 (Inine Styes) 인라인스타일을사용하면내용과표현이섞이기때문에스타일을사용하는많은 장점을잃을수있습니다. 그러나특정한부분에만스타일을적용시키고자할경우 사용할수있습니다. 인라인스타일은태그안에 stye 속성을사용하여스타일을 지정합니다. 다음은문단의색을빨간색으로, 왼쪽여백은 20 픽셀간격을주는스타일예입니 다. . 3.4 스타일우선순위 만일같은선택자의스타일이같은속성에값은다르게정의되었을경우에는더구체적은스타일을따르게됩니다. 또한스타일속성이다르게정의되었을경우에는더구체적인스타일로스타일의속성이상속됩니다. 예를들어외부스타일시트에 h3 선택자에다음 3 가지속성이지정되었고. h3 { coor: red; text-aign: eft; font-size: 8pt

15 Chapter 시트종류 3 } 내부스타일시트의 h3 선택자에는다음 2 가지속성이지정되었을경우에 h3 { } text-aign: right; font-size: 20pt 내부스타일이정의된파일에서 <h3> 태그를사용하였을경우다음처럼 coor 속성 은외부스타일의정의를따르게됩니다. coor 속성은외부스타일시트로부터상 속받고, text-aignment 와 font-size 속성은내부스타일시트정의를따르게됩니 다. coor: red; text-aign: right; font-size: 20pt

16 HTML, JavaScript, CSS 3부. CSS 4. CSS 속성 (Properties) 4.1 Background background 속성은 HTML 요소들의배경색, 배경그림, 배경그림의반복, 위치등배경에관련된것들을설정할수있습니다. background 속성 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: body { 7: background-coor: cyan; 8: background-image: ur('baby.jpg'); 9: background-repeat: no-repeat; 10: background-attachment: fixed; 11: background-position: 50px 100px; 12: } 13: </stye> 14: </head> 15:

17 Chapter CSS 속성 4 16: <body> 17: 색은 cyan 18: 배경이미지는 baby.jpg 19: 배경이미지는반복해서나타나지않음 20: 배경이미지는내용이스크롤되도그대로고정되어있음 21: 배경이미지의위치는화면왼쪽상단에서아래로 50 픽셀오른쪽으로 100 픽셀 22: 배경색은 cyan 23: 배경이미지는 baby.jpg 24: 배경이미지는반복해서나타나지않음 25: 배경이미지는내용이스크롤되도그대로고정되어있음 26: 배경이미지의위치는화면왼쪽상단에서아래로 50 픽셀오른쪽으로 100 픽셀 27: 배경색은 cyan 28: 배경이미지는 baby.jpg 29: 배경이미지는반복해서나타나지않음 30: 배경이미지는내용이스크롤되도그대로고정되어있음 31: 배경이미지의위치는화면왼쪽상단에서아래로 50 픽셀오른쪽으로 100 픽셀 32: 배경색은 cyan 33: 배경이미지는 baby.jpg 34: 배경이미지는반복해서나타나지않음 35: 배경이미지는내용이스크롤되도그대로고정되어있음 36: 배경이미지의위치는화면왼쪽상단에서아래로 50 픽셀오른쪽으로 100 픽셀 37: 배경색은 cyan 38: 배경이미지는 baby.jpg 39: 배경이미지는반복해서나타나지않음 40: 배경이미지는내용이스크롤되도그대로고정되어있음 41: 배경이미지의위치는화면왼쪽상단에서아래로 50 픽셀오른쪽으로 100 픽셀 42: 43: </body> 44: </htm> 실행결과

18 HTML, JavaScript, CSS 3부. CSS 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: body 7: { 8: background: #00ff00 ur('baby.jpg') no-repeat fixed center; 9: } 10: </stye> 11: </head> 12: 13: <body> 14: background 이용한배경색, 배경이미지, 반복, 고정, 위치설정 15: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 16: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 17: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 18: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 19: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 20: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 21: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 22: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 23: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 24: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 25: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 26: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 27: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 28: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 29: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 30: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 31: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 32: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 33: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 34: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 35: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 36: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 37: background 속성을이용한배경색, 배경이미지, 반복, 고정, 위치설정 38: </body> 39: 40: </htm>

19 Chapter CSS 속성 4 실행결과 4.2 Text text 속성은텍스트의모양을제어할수있도록합니다. 텍스트속성을이용하면색 상, 자간, 정렬방식, 밑줄, 취소선, 들여쓰기등을변경할수있습니다. test 속성

20 HTML, JavaScript, CSS 3부. CSS 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: p { 7: coor: bue; 8: direction: rt; 9: word-spacing: 30px 10: } 11: h1 {text-decoration: overine} 12: h2 {text-decoration: ine-through} 13: h3 {text-decoration: underine} 14: h4 {text-decoration: bink} 15: a {text-decoration: none} 16: a:hover {text-decoration: underine} 17: </stye> 18: </head> 19: 20: <body> 21: <h1>this is header 1</h1> 22: <h2>this is header 2</h2> 23: <h3>this is header 3</h3>

Chapter CSS 속성 4 24: <h4>this is header 4</h4> 25: <p><a href="http://www.javaspeciaist.co.kr">this is a ink</a></p> 26: </body> 27: 28: </htm> 실행결과 예제코드 1: <!-- css4-2-2.

21 Chapter CSS 속성 4 24: <h4>this is header 4</h4> 25: <a href=" is a ink</a> 26: </body> 27: 28: </htm> 실행결과 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: p.uppercase {text-transform: uppercase} 7: p.owercase {text-transform: owercase} 8: p.capitaize {text-transform: capitaize} 9: </stye> 10: </head> 11: 12: <body> 13: wecome htm & CSS & javascript 14: 15: wecome htm & CSS & javascript 16: 17: wecome htm & CSS & javascript 18: </body> 19: 20: </htm>

22 HTML, JavaScript, CSS 3부. CSS 실행결과 4.3 Font font 속성은폰트, 굵기, 크기그리고텍스트의스타일등을설정할수있습니다. : font 속성으로지정한폰트이름을브라우저에서지원하지않을경우에는기본폰트모양으 로보여질수있습니다. font 속성

23 Chapter CSS 속성 4 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: p { 7: font-famiy: sans-serif; 8: font-size: 9.5px; 9: font-stye: itaic; 10: font-variant: sma-caps; 11: font-weight: : } 13: </stye> 14: </head> 15: 16: <body> 17: 속성테스트예입니다. 18: this is font properties 19: </body> 20: 21: </htm> 실행결과

24 HTML, JavaScript, CSS 3부. CSS 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: p 7: { 8: font: itaic sma-caps px aria 9: } 10: </stye> 11: </head> 12: 13: <body> 14: font 한번에지정할수있습니다. 15: this is a paragraph 16: </body> 17: 18: </htm> 실행결과 4.4 Border border 속성은경계선의스타일과색상을설정합니다. HTML에서는텍스트에경계선을나타내기위해서 <tabe> 태그를사용했었습니다. 그러나 CSS에서는 HTML 어떤요소에도다양한모양의경계선효과를줄수있습니다. : 경계선의색과두께는스타일을지정해야효과가나타납니다.

25 Chapter CSS 속성 4 border 속성 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: p 7: { 8: border: 10px doube rgb(250,0,255) 9: } 10: </stye> 11: </head> 12:

26 HTML, JavaScript, CSS 3부. CSS 13: <body> 14: 두께는 10 픽셀, 스타일은 doube, 색상은빨강과파랑을섞을색 15: </body> 16: 17: </htm> 실행결과 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: p.dotted { border-stye: dotted } 7: p.dashed { border-stye: dashed } 8: p.soid { border-stye: soid } 9: p.doube { border-stye: doube } 10: p.groove { border-stye: groove } 11: p.ridge { border-stye: ridge } 12: p.inset { border-stye: inset } 13: p.outset { border-stye: outset } 14: </stye> 15: </head> 16: 17: <body> 18: a dotted border 19: 20: a dashed border 21: 22: a soid border 23: 24: a doube border 25:

27 Chapter CSS 속성 4 26: a groove border 27: 28: a ridge border 29: 30: an inset border 31: 32: an outset border 33: </body> 34: 35: </htm> 실행결과 예제코드 1:  2: 3: <htm> 4: <head> 5: 6: <stye type="text/css"> 7: p.one { 8: border-stye: soid; 9: border-coor: #0000ff

HTML, JavaScript, CSS 3부. CSS 10: } 11: p.two { 12: border-stye: soid; 13: border-coor: #ff0000 #0000ff 14: } 15: p.three { 16: border-stye: soid; 17: border-coor: #ff0000 #00ff00 #0000ff 18: } 19: p.

28 HTML, JavaScript, CSS 3부. CSS 10: } 11: p.two { 12: border-stye: soid; 13: border-coor: #ff0000 #0000ff 14: } 15: p.three { 16: border-stye: soid; 17: border-coor: #ff0000 #00ff00 #0000ff 18: } 19: p.four { 20: border-stye: soid; 21: border-coor: #ff0000 #00ff00 #0000ff rgb(250,0,255) 22: } 23: </stye> 24: 25: </head> 26: 27: <body> 28: 29: 색상을하나로지정할경우 30: 31: 경계선의색상을두개로지정할경우 32: 33: 경계선의색상을세개로지정할경우 34: 35: 경계선의색상을네개로지정할경우 36: 37: 주의 : "border-coor" 속성은단독으로쓰일경우에는동작하지않습니다. "border-stye" 속성으로스타일을먼저지정한다음색상을지정하세요. 38: 39: </body> 40: </htm> 실행결과

29 Chapter CSS 속성 4 border 속성과유사한속성으로 outine 속성이있습니다. 이속성은경계선밖에선을그려주기위해사용합니다. 현재익스플로러에서동작하지않으며 Firefox에서만동작하는속성입니다. 속성으로는 outine, outine-stye, outine-width, outine-coor 등이있으며사용법은 border 속성과유사합니다. 4.5 Margin margin 속성은여백을설정하기위해사용합니다. 여백은경계선밖에설정되며배경속성의영향을받지않습니다. 여백은반드시양수값일필요는없습니다. 음수값을입력하여사용할수있습니다. top, right, bottom, eft 여백모두동일하게설정할수도있으며각각다르게설정할수도있습니다. 익스플로러에서 <body> 태그의기본여백은 8픽셀 (px) 입니다. margin 속성 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: p.margin 7: { 8: margin: 10px 2cm 10mm 1cm; 9: border-stye: doube; 10: } 11: </stye> 12: </head> 13: 14: <body> 15: 문장은여백을지정하지않았습니다. 16: 이문장은여백을각각다르게지정하였습니다. 17: 이문장은여백을지정하지않았습니다. 18: </body> 19: 20: </htm>

HTML, JavaScript, CSS 3부. CSS 실행결과 4.6 Padding padding 속성은 HTML 요소와경계선사이의여백을설정할때사용합니다. margin 속성과는다르게음수값은사용할수없습니다. top, right, bottom, eft 값을동일하게설정할수도있으며, 각각다른값으로설정할수도있습니다.

30 HTML, JavaScript, CSS 3부. CSS 실행결과 4.6 Padding padding 속성은 HTML 요소와경계선사이의여백을설정할때사용합니다. margin 속성과는다르게음수값은사용할수없습니다. top, right, bottom, eft 값을동일하게설정할수도있으며, 각각다른값으로설정할수도있습니다. margin 속성 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: p.padding 7: { 8: padding: 10px 2cm 10mm 1cm; 9: border-stye: doube; 10: background-coor: red; 11: } 12: </stye>

31 Chapter CSS 속성 4 13: </head> 14: 15: <body> 16: 문장은내용과경계선사이의여백을지정하지않았습니다. 17: 이문장은내용과경계선사이의여백을각각다르게지정하였습니다. 18: 이문장은내용과경계선사이의여백을지정하지않았습니다. 19: </body> 실행결과 4.7 List ist 속성은 HTML 목록의표시형식을변경할때사용합니다. 목록의표시형식은 도형을설정할수도있으며, 그림을설정할수있습니다. ist 속성

32 HTML, JavaScript, CSS 3부. CSS 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: u 7: { 8: ist-stye: square inside ur('arrow.gif') 9: } 10: </stye> 11: </head> 12: 13: <body> 14: 15: coffee 16: tea 17: coca Coa 18: 19: </body> 20: 21: </htm> 실행결과

33 Chapter CSS 속성 4 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: u.disc { 7: ist-stye-type: disc 8: } 9: u.circe { 10: ist-stye-type: circe 11: } 12: u.square { 13: ist-stye-type: square 14: } 15: u.none { 16: ist-stye-type: none 17: } 18: u.decima { 19: ist-stye-type: decima 20: } 21: u.ower-roman { 22: ist-stye-type: ower-roman 23: } 24: u.upper-roman { 25: ist-stye-type: upper-roman 26: } 27: u.ower-apha { 28: ist-stye-type: ower-apha 29: } 30: u.upper-apha { 31: ist-stye-type: upper-apha 32: } 33: </stye> 34: </head> 35: 36: <body> 37: 38: disc type 39: green Tea 40: orange Juice 41: 42: 43: 44: circe type 45: green Tea 46: orange Juice 47: 48:

34 HTML, JavaScript, CSS 3부. CSS 49: 50: square type 51: green Tea 52: orange Juice 53: 54: 55: 56: the "none" type 57: green Tea 58: orange Juice 59: 60: 61: 62: decima type 63: green Tea 64: orange Juice 65: 66: 67: 68: lower-roman type 69: green Tea 70: orange Juice 71: 72: 73: 74: upper-roman type 75: green Tea 76: orange Juice 77: 78: 79: 80: lower-apha type 81: green Tea 82: orange Juice 83: 84: 85: 86: upper-apha type 87: green Tea 88: orange Juice 89: 90: 91: 92: lower-greek type 93: green Tea 94: orange Juice 95: 96: 97: </body> 98: </htm>

35 Chapter CSS 속성 4 실행결과 4.8 Tabe tabe 속성

36 HTML, JavaScript, CSS 3부. CSS 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: tabe.co 7: { 8: border-coapse: coapse 9: } 10: tabe.sep 11: { 12: border-coapse: separate 13: } 14: </stye> 15: </head> 16: <body> 17: 18: <tabe cass="co" border="10"> 19: <tr> 20: <td>1 1열 </td> 21: <td>1 행 2열 </td> 22: </tr> 23: <tr> 24: <td>2 행 1열 </td> 25: <td>2 행 2열 </td> 26: </tr> 27: </tabe> 28: 29: 30: 31: <tabe cass="sep" border="10"> 32: <tr> 33: <td>1 행 1열 </td> 34: <td>1 행 2열 </td> 35: </tr> 36: <tr> 37: <td>2 행 1열 </td> 38: <td>2 행 2열 </td> 39: </tr> 40: </tabe> 41:

37 Chapter CSS 속성 4 42: </body> 43: </htm> 실행결과 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: tabe.auto 7: { 8: tabe-ayout: automatic 9: } 10: tabe.fixed 11: { 12: tabe-ayout: fixed 13: } 14: </stye> 15: </head> 16: <body> 17: 18: <tabe cass="auto" border="1" width="100%"> 19: <tr> 20: <td width="20%"> </td> 21: <td width="40%"> </td> 22: <td width="40%">100</td> 23: </tr> 24: </tabe> 25:

38 HTML, JavaScript, CSS 3부. CSS 26: 27: 28: <tabe cass="fixed" border="1" width="100%"> 29: <tr> 30: <td width="20%"> </td> 31: <td width="40%"> </td> 32: <td width="40%">100</td> 33: </tr> 34: </tabe> 35: 36: </body> 37: </htm> 실행결과 4.9 Positioning positioning 속성들은태그요소의위치와관련된설정을할수있습니다. HTML 요소가보일위치, 정렬상태, 우선순위등을설정할수있습니다. positioning 속성

$pos_abs { 7: position:absoute; 8: eft:100px; 9: top:150px 10: } 11: </stye> 12: </head> 13: 14: <body> 15: <h2 cass="pos_abs"> 문장은브라우저화면의위에서 150 픽셀, 왼쪽에서 100 픽셀위치에나타납니다.$

39 Chapter CSS 속성 4 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: h2.pos_abs { 7: position:absoute; 8: eft:100px; 9: top:150px 10: } 11: </stye> 12: </head> 13: 14: <body> 15: <h2 cass="pos_abs"> 문장은브라우저화면의위에서 150 픽셀, 왼쪽에서 100 픽셀위치에나타납니다.</h2> 16: position 의값이 absoute 일경우항상고정된위치에나타납니다. 17: </body> 18: 19: </htm> 실행결과

40 HTML, JavaScript, CSS 3부. CSS 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: img.x 7: { 8: position:absoute; 9: eft:0px; 10: top:0px; 11: z-index:-1 12: } 13: </stye> 14: </head> 15: 16: <body> 17: <h1>z-index.</h1> 18: <img cass="x" src="baby.jpg" width="100" height="180"> 19: 기본 z-index 는 0 입니다. z-index 가 0 보다작으면화면에보이는우선순위가낮습니다. 20: </body> 21: 22: </htm> 실행결과

Chapter CSS 속성 4 4.10 Image transparency 그림을투명하게하는속성은아직은 CSS 표준은아니지만최근브라우저에서지 원하는기능이므로소개합니다. 브라우저에따라서설정하는방법이다릅니다. opacity:x /* Firefox */ fiter:apha(opacity=x) /* Exporer */ 예제코드 1: <!-- css4-10.

41 Chapter CSS 속성 Image transparency 그림을투명하게하는속성은아직은 CSS 표준은아니지만최근브라우저에서지 원하는기능이므로소개합니다. 브라우저에따라서설정하는방법이다릅니다. opacity:x /* Firefox */ fiter:apha(opacity=x) /* Exporer */ 예제코드 1:  2: 3: <htm> 4: <head> 5: <stye type="text/css"> 6: img { 7: opacity:0.4; /* Firefox 인식 */ 8: fiter:apha(opacity=40) /* Exporer 브라우저에서인식 */ 9: } 10: </stye> 11: </head> 12: <body> 13: <h1>image Transparency</h1> 14: <img src="baby.jpg" width="300" height="200" at=" 둘째 " 15: onmouseover="this.stye.opacity=1;this.fiters.apha.opacity=100" 16: onmouseout="this.stye.opacity=0.4;this.fiters.apha.opacity=40" /> 17: <img src="baby2.jpg" width="300" height="200" at=" 첫째 " 18: onmouseover="this.stye.opacity=1;this.fiters.apha.opacity=100" 19: onmouseout="this.stye.opacity=0.4;this.fiters.apha.opacity=40" /> 20: </body> 21: </htm> 실행결과

42 HTML, JavaScript, CSS 3부. CSS CSS Quiz 1. CSS 무엇의약어입니까? o o o o 2. 외부스타일시트파일을참조하기위한 HTML 코드중바른것은? o o o o 3. 외부스타일시트를참조하기위한코드는어느곳에넣어야할까요? o o o o 4. 내부스타일시트를정의하기위한 HTML 태그는? o o o o 5. 인라인스타일을정의하기위한 HTML 속성은? o o o o 6. 다음중올바른 CSS 문장은? o o o o

43 Chapter CSS 속성 4 7. 중바른 CSS 주석은? o o o o 8. 다음중배경색을변경하기위한속성은? o o o o 9. <h1> 태그로되어있는모든부분에배경색을지정하기위한코드중바른것은? o o o o 10. 다음중텍스트색을변경하기위한속성은? o o o o 11. 텍스트크기를변경하기위한속성은? o o o o 12. 태그에 bod 속성을부여하기위한바른코드는? o o o o 13. 밑줄없이하이퍼링크를표현하기위한코드는?

44 HTML, JavaScript, CSS 3부. CSS o o o o 14. 각단어의첫문자를대문자로하기위한속성은? o o o o 15. 글자체를변경하기위한속성은? o o o o 16. 텍스트를진하게나타내는코드는? o o o o 17. 경계선을다음과같이하기위한코드중바른것은? top = 10픽셀 bottom = 5픽셀 eft = 20픽셀 right = 1픽셀 o o o o 18. 왼쪽여백을설정하기위한속성은? o o o

45 Chapter CSS 속성 4 o 19. HTML 경계선사이의간격을지정하기위한속성은 padding입니다. 이속성은음수값을가질수없습니다. o o 20. 목록의표시형식을사각형 (square) 으로지정하기위한코드는? o o o o

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

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