<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

Size: px

Start display at page:

Download "<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>"

이현 양
5 years ago
Views:

1 HTML/XML 인터넷보충학습자료 (1) 글자색상 : color 속성사용 - <FONT> 태그의 color 속성과같은역할을한다. (2) 배경지정 : background-color 속성사용. - HTML의 bgcolor 속성과같은역할. bgcolor 속성은일정한태그에만한정되어있지만 background-color 속성은어떤태그에서도모두적용된다. <FONT> 태그에도해당스타일속성을적용하면내용영역의배경색이지정된다. - 색상지정방법 (3가지): 색상명 ( 예 ; red, blue 등 ), RGB 혼합-3가지유형 (#RRGGBB, rgb(_%,_%,_%), rgb(,, )), 시스템색상 ( 예, WindowFrame, background, Menu 등 ) -예)

HTML/XML 인터넷보충학습자료 - 2 - <HEAD> <TITLE> 색상및배경지정하기 1 </TITLE> <STYLE TYPE = "text/css"> <!-- BODY { background-color: green color: #00FF00 }.color1 { background-color: rgb(0%, 0%, 100%)}.

2 HTML/XML 인터넷보충학습자료 <HEAD> <TITLE> 색상및배경지정하기 1 </TITLE> <STYLE TYPE = "text/css">  </STYLE> </HEAD> <BODY> <H3 CLASS="color1"> 색상및배경지정하기 </H3> <P CLASS="color2"> 색상및배경 <FONT CLASS="color3"> 지정하기 </FONT></P> <P CLASS="color3"> 색상및배경지정하기 </P> </BODY> (3) 배경이미지관련속성 background-image background-repeat background-attachment background-position 설명배경이미지지정 none, url( 그림경로 ) 배경이미지의반복방식지정 repeat ( 기본 ),no-repeat, repeat-x, repeat-y 배경이미지의고정 / 스크롤여부 fixed, scroll ( 기본 ) 배경이미지의위치지정수치 (40,60), 퍼센트 (40%,60%) top, center, bottom, left, right - 일괄지정속성 - 속성적용의예 )

HTML/XML 인터넷보충학습자료 - 3 - - background-repeat 속성의예 ) - 문단앞에목록마크를지정하는기능으로크게 3가지종류가있다.

목록기호 / 문자로서이미지지정 url( 그림경로 ) 목록기호 / 문자의위치지정 inside, outside ( 기본 ) - 일괄지정속성 1

3 HTML/XML 인터넷보충학습자료 background-repeat 속성의예 ) - 문단앞에목록마크를지정하는기능으로크게 3가지종류가있다. - 종류 list-style-type list-style-image list-style-position 설명 목록의기호 / 문자지정 disc ( 기본 ) 목록기호 / 문자로서이미지지정 url( 그림경로 ) 목록기호 / 문자의위치지정 inside, outside ( 기본 ) - 일괄지정속성 1 list-style-type - 목록의마크를지정하는속성이다. HTML에서 <UL>, <LI> 태그의 TYPE 속성과같은역할을한다. - list-style-type 속성의

4 HTML/XML 인터넷보충학습자료 설명기호 none 마크없음 disc 검은색동그라미마크 ( 기본 ) circle 흰색동그라미마크 square 사각형마크 demimal 10진수마크 1, 2, 3, 4, lower-roman 소문자로마숫자마크 i, ii, iii, iv, upper-roman 대문자로마숫자마크 I, II, III, IV, lower-greek 소문자그리스문자마크 lower-alpha 소문자알파벳마크 a, b, c, d, lower-latin 소문자알파벳마크 upper-alpha 대문자알파벳마크 A, B, C, D, upper-latin 대문자알파벳마크 - 예 ) <HEAD> <TITLE> 리스트지정하기 1 </TITLE> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY> <UL><LI> 항목1 <LI> 항목2 </UL><BR> <UL CLASS="list1"><LI> 항목1 <LI> 항목2 </UL><BR> <UL CLASS="list2"><LI> 항목1 <LI> 항목2 </UL><BR> </BODY> - 일괄지정으로한번에적용하기 2 list-style-image

5 HTML/XML 인터넷보충학습자료 목록의마크를그림으로삽입하는속성이다. - 배경그림삽입할때와같이 url(" 그림 URL") 형식으로입력을한다. 만약으로 none 을입력하면마크가표시되지않는다. 3 list-style-position - 마크의위치를변경하여적용하는속성이다. - list-style-position 속성의 outside inside 설명기본마크를항목의안쪽에위치 - CSS로표스타일을지정하는것이다. - 종류 table-layout border-collapse 설명셀안의내용에따라크기변화여부를지정 auto ( 기본 ), fixed 표 / 셀의테두리선의표시방법지정 collapse, separate ( 기본 ) 1 table-layout - 셀안의내용에따라크기변화여부를지정하는속성이다. - table-layout 속성의 설명 auto 셀안의내용에따라크기가변함 ( 기본 ) fixed 셀안의내용과관계없이크기가고정됨 2 border-collapse - 표의외곽선이나셀안의테두리선의표시방법을지정하는속성은이다. - border-collapse 속성의 - 예 ) collapse separate 설명표의테두리를겹치도록지정표의테두리를분리되도록지정

HTML/XML 인터넷보충학습자료 - 6 - <STYLE TYPE="text/css"> <!--.table1 { table-layout: fixed; border-collapse: collapse}.

6 HTML/XML 인터넷보충학습자료 <STYLE TYPE="text/css">  </STYLE> - <DIV> 태그를이용하여박스와관련된속성사용. - <div> 논리적단위 ( 박스공간 ) </div> 논리적구획을설정할때사용 --> CSS 및정렬방식을지정할때유용 - 박스와관련된속성 - 박스의테두리선밖의여백을 Margin이라고한다. - 박스테두리선밖의위쪽, 오른쪽, 아래쪽, 왼쪽의여백을별도로지정하는경우

HTML/XML 인터넷보충학습자료 - 7 - - 속성에수치나퍼센트 (%) 를입력한다. - 물론모든방향에대한여백을반드시지정해야하는것은아니다.

7 HTML/XML 인터넷보충학습자료 속성에수치나퍼센트 (%) 를입력한다. - 물론모든방향에대한여백을반드시지정해야하는것은아니다. - 상하좌우여백일괄지정 ( 순서주의 ) -> 1개의을입력 : 모든방향의여백이일괄적으로지정 -> 2개의을입력 : 상하, 좌우에각각해당으로여백이지정 -> 3개의을입력 : 상, 좌우, 하에해당으로여백이지정 -> 4개의을입력 : 상, 우, 하, 좌속성을각각따로입력한것과같다. - 예 )

8 HTML/XML 인터넷보충학습자료 테두리선과박스안의내용사이의여백을설정하기위해사용한다. - 개별방향의패딩지정 - 상하좌우패딩의일괄지정 ( 순서주의 ) - 은수치와퍼센트 (%) 를사용한다. - 사용방법은 margin 속성과같다. - 예 )

HTML/XML 인터넷보충학습자료 - 9 - - 박스의테두리굵기및스타일지정하는속성 - 종류 border-style border-width 박스테두리의스타일지정 박스테두리의굵기지정수치, thin, medium ( 기본 ), thick 박스테두리의색상지정 border-color 색상이름, #RRGGBB,rgb(_, _, _) -

9 HTML/XML 인터넷보충학습자료 박스의테두리굵기및스타일지정하는속성 - 종류 border-style border-width 박스테두리의스타일지정 박스테두리의굵기지정수치, thin, medium ( 기본 ), thick 박스테두리의색상지정 border-color 색상이름, #RRGGBB,rgb(_, _, _) - 방향별로각각지정하고싶을때에는파란색부분에 style, width, color를붙여서사용하면된다. -> 일괄지정방식 : 1 border-width - 박스테두리의굵기를지정하는속성이다. - border-width 속성의 - 설명 thin 박스테두리굵기를얇게지정 medium 박스테두리굵기를중간으로지정 ( 기본 ) thick 박스테두리굵기를굵게지정

HTML/XML 인터넷보충학습자료 - 10-2 border-color - 박스테두리의색상을지정할때사용한다. - 의개수에따라테두리의상, 우, 하, 좌에따로색을지정할수있다.

- border-style 속성의 none hidden dotted dashed solid double groove ridge outset inset

10 HTML/XML 인터넷보충학습자료 border-color - 박스테두리의색상을지정할때사용한다. - 의개수에따라테두리의상, 우, 하, 좌에따로색을지정할수있다. - 3 border-style - 박스테두리의스타일을지정할때사용한다. - 의개수에따라테두리의상, 우, 하, 좌에따로스타일을지정한다. - border-style 속성의 none hidden dotted dashed solid double groove ridge outset inset 설명테두리를표시하지않음테두리를숨김테두리를점으로지정테두리를점선으로지정테두리를실선으로지정테두리를두줄로지정테두리를오른쪽아래에서빛을받은스타일로지정테두리를왼쪽위에서빛을받은스타일로지정테두리를밖으로나온스타일로지정테두리를안으로파인스타일로지정

HTML/XML 인터넷보충학습자료 - 11 - - HTML 태그의범위및위치를지정하는 CSS 속성으로범위를지정하는속성으로는 width 속성과 height 속성을사용하며, 위치를지정할때에는 position 속성, top, bottom, left, right 속성, z-index 속성등을사용한다.

11 HTML/XML 인터넷보충학습자료 HTML 태그의범위및위치를지정하는 CSS 속성으로범위를지정하는속성으로는 width 속성과 height 속성을사용하며, 위치를지정할때에는 position 속성, top, bottom, left, right 속성, z-index 속성등을사용한다. - 내용이표시되는영역에대하여폭과높이를지정할수있다. - 폭을지정할때에는 width 속성, 높이를지정할때에는 height 속성을사용한다. - 둘중에서하나만지정하면나머지하나는자동으로크기가지정된다. - CSS 속성을사용하여그림, 표이외에각종버튼이나문단을지정하는태그등에도사용할수있다. - 범위지정속성 - : 수치, 퍼센트 (%), auto -

HTML/XML 인터넷보충학습자료 - 12 - - 위치를지정할때에는 position 속성을사용한다.

12 HTML/XML 인터넷보충학습자료 위치를지정할때에는 position 속성을사용한다. - 위치지정에관련한속성 position top, bottom, left, right z-index 위치지정을위한기본적인속성 static, relative, absolute - 상하좌우위치지정 -position속성과같이사용 (static인경우에는무효처리 ) 수치, 퍼센트겹치는순서지정정수 - position 속성의 static relative absolute 설명일반배치상위요소에대한상대배치상위요소에대한절대배치 - 상하좌우위치를지정하는 top, bottom, left, right 속성과함께사용한다. - static을입력하면 top, bottom, left, right 속성의으로입력한들은무효가된다.

HTML/XML 인터넷보충학습자료 - 13 - - 예 1 cursor - 지정된부분에커서가위치했을때마우스커서의모양을변경하고싶은경우 cursor 속성을사용한다. - cursor 속성 - 예 <STYLE TYPE="text/css"> <!-- P {font-size: 12pt; font-weight: bold}.

13 HTML/XML 인터넷보충학습자료 예 1 cursor - 지정된부분에커서가위치했을때마우스커서의모양을변경하고싶은경우 cursor 속성을사용한다. - cursor 속성 - 예 <STYLE TYPE="text/css">  <P CLASS="cursor4"> 커서지정하기 </P> </STYLE>

HTML/XML 인터넷보충학습자료 - 14-2 스크롤바 - 웹페이지창에서기본적으로나타나는스크롤바의스타일을바꿀수있는기능이다.

- 종류 scrollbar-base-color scrollbar-fase-color scrollbar-arrow-color

14 HTML/XML 인터넷보충학습자료 스크롤바 - 웹페이지창에서기본적으로나타나는스크롤바의스타일을바꿀수있는기능이다. - 스크롤바의색상에관련된속성들을사용할수있다. - 종류 scrollbar-base-color scrollbar-fase-color scrollbar-arrow-color scrollbar-highlight-color scrollbar-3dlight-color scrollbar-shadow-color scrollbar-darkshadow-color 설명기본색표면색화살표색하이라이트부분색버튼의하이라이트부분색그림자부분색버튼의그림자부분색 - 예

15 HTML/XML 인터넷보충학습자료 연습문제 1. 다음을 background 속성만을사용하여표현하시오. <style type = "text/css"> BODY {background-image: url("image..jpg"); background-repeat: no-repeat; background-position: right} </style> <style type = "text/css"> BODY {background: url("image..jpg") no-repeat right} </style> 2. margin 속성의개수에따라해당속성이어떻게적용되는지설명하시오. 만약 1개의을입력한다면모든방향의여백이일괄적으로지정되고 2개의을입력하면상하, 좌우에각각해당으로여백이지정된다. 그리고 3개의을입력하면각각상, 좌우, 하에해당으로여백이지정된다. 그리고 4개의을입력하면 margin-top, margin-right, margin-bottom, margin-left 속성을각각따로입력한것과같은효과가난다. 3. 박스테두리와관련된 CSS 속성을나열하고설명하시오. border-top-width, border-right-width, border-bottom-width, border-left-width, border-width 설명 : 박스테두리굵기지정 : 수치, 퍼센트 (%) border-top-color, border-right-color, border-bottom-color, border-left-color, border-color 설명 : 박스테두리색상지정 : 색상이름, RRGGBB 코드 border-top-style, border-right-style, border-bottom-style, border-left-style, border-style 설명 : 박스테두리스타일지정 : none, hidden, dotted, dashed, solid, double, groove, ridge, outset, inset

16 HTML/XML 인터넷보충학습자료 확인문제 다음의빈칸에알맞은단어를작성하시오. 1. 웹페이지의배경색을지정하는 CSS 속성은 (background-color) 이다. 이는 HTML 태그의 ( ) 와같은역할을한다. 2. 삽입한배경그림이스크롤에따라움직일것인지고정시킬것인지지정하는속성은 ( ) 이다. 3. margin 속성의으로 3개을입력하여박스의 ( ), ( ), ( ) 여백을지정할수있다. 4. 요소의출력순서를지정하고자할경우 CSS 의 ( ) 속성을사용한다. 5. 커서를도움말을이용할때나타나는화살표와물음표가합쳐진모양으로바꾸고자할경우 cursor 속성의으로 ( ) 를입력한다. 다음문장의참거짓여부를판별하시오. 6. CSS 속성을사용하여목록의마크를항목의안쪽에위치시킬수있다. ( ) 7. table-layout 속성을사용하지않을경우표의크기변화는기본으로내용에관계없이크기가고정된다. ( ) 8. 표의테두리를분리되도록지정하기위해서는 border-collapse 속성의으로 separate 를입력한다. ( ) 9. 박스안의내용과테두리간의간격을지정하기위해서는 CSS의 Margin 속성을사용한다. ( ) 10. border-color 속성의으로 2개을입력하면위쪽과아래쪽테두리의색이지정된다. ( ) 다음의문제에해당되는보기를고르시오. 11. 다음중 background-image 속성의으로제대로입력한것은? ( ) 1) "Image.jpg" 2) url("image.jpg") 3) url = "Image.jpg" 4) image = "Image.jpg" 12. 다음중배경그림의반복을지정하는에해당하지않는것은? ( ) 1) repeat

17 HTML/XML 인터넷보충학습자료 ) repeat-x 3) repeat-y 4) none-repeat 13. 테두리스타일을왼쪽위에서빛을받은스타일로지정하고자할때 border-style 속성의으로맞는것은? ( ) 1) dotted 2) groove 3) inset 4) ridge 14. 위치를지정하는속성인 position 속성을사용할때 top 속성, right 속성, bottom 속성, left 속성에상관없이위치를지정하는은? ( ) 1) static 2) relative 3) absolute 4) fixed 15. 다음중스크롤바의버튼의하이라이트부분색을지정하고자할경우사용하는속성은? ( ) 1) scrollbar-arrow-color 2) scrollbar-highlight-color 3) scrollbar-3dlight-color 4) scrollbar-darkshadow-color

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

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