3 웹 페이지를 디자인하는 CSS 다루기 CSS로 예쁜 웹 문서를 만들어보자!
이 장에서 다룰 내용 스타일시트 1 기본 문서 관련 스타일 2 테이블, 폼 관련 스타일 3 CSS 활용 4
01_스타일 시트 스타일시트의 종류 내부 스타일시트 외부 스타일시트 행 스타일시트 <head> <style type="text/css" 또는 type="text/javascript"> <!-- 선택자 {속성 : 속성값} ................ --> </style> </head> <link rel="stylesheet" type="text/css" 또는 type="text/javascript" href="파일명.css"> <태그 style = "속성 : 속성값"> .................... </태그>
[기본예제 3-1] 스타일시트 종류 연습 01 <HTML><HEAD><TITLE> 스타일시트</TITLE> 02 <STYLE> 03 <!-- 04 BODY { 05 background-color : yellow; 06 } 07 --> 08 </STYLE> </HEAD><BODY> 09 <H3> 스타일시트 - 배경색이 노란색 </H3> 10 </BODY></HTML> 내부 스타일시트
01_스타일 시트 스타일시트 정의 방법 기본 사용 형식 스타일을 정의하기 위한 기본 요소는 속성과 속성값으로 구성 스타일을 적용할 대상을 선택자(selector)라 함 선택자1, ...., {속성1 : 속성값1; 속성2: 속성값2; ...........속성n:속성값n}
[기본예제 3-2] 스타일시트 정의 연습 ① 01 <HTML><HEAD><TITLE> 스타일시트 기본 사용법</TITLE> 02 <STYLE type="text/css"> 03 <!-- 04 p {color:blue; background:red} 05 h1{background:yellow} 06 --></STYLE></HEAD> <BODY> 07 <H1>스타일 적용된 제목 H1 </H1> 08 <P>첫번재 스타일시트 문단입니다...색은 파란색 배경색은 빨간색입니다.</P> 09 </BODY></HTML> <body>에서 <p>태그 글자색은 blue, 배경색은 red를 적용 <body>에서 <h1>태그 배경색을 yellow로 지정
[기본예제 3-3] 스타일시트 정의 연습 ② 01 <HTML><HEAD><TITLE> 태그 중첩 이용</TITLE> 02 <STYLE> 03 <!-- 04 p a{font-family:궁서;color:red;} 05 --></STYLE> </HEAD> 06 <BODY><center> 07 <p><a href=http://www.naver.com>네이버검색</a></p> 08 </BODY></HTML>
[기본예제 3-4] 스타일시트 정의 연습 ③ 01 <HTML><HEAD><TITLE> 클래스 이용-스타일시트</TITLE> 02 <STYLE type="text/css"> 03 <!-- 04 p.content1 {font-family:궁서;color:red;} 05 .content2 {font-family:굴림;background:yellow;} 06 --></STYLE> </HEAD> 07 <BODY><center> 08 <p CLASS="content1">동해물과 백두산이 마르고 닳도록...</p> 09 <h1 CLASS="content2">가을하늘 공활한데 높고 구름 없이...</p> 10 </BODY></HTML>
[기본예제 3-5] 스타일시트 정의 연습 ④ 01 <HTML><HEAD><TITLE> ID 이용-스타일시트</TITLE> 02 <STYLE type="text/css"> 03 <!-- 04 #con1 {font-family:궁서;color:red;} 05 #con2 {font-family:굴림;background:green;} 06 --></STYLE> </HEAD> 07 <BODY><center> 08 <p ID="con1">동해물과 백두산이 마르고 닳도록...</p> 09 <h3 ID="con2">가을하늘 공활한데 높고 구름 없이...</h3> 10 </BODY></HTML> 2개의 클래스명을 지정하고, 스타일을 정의 04와 05행에서 지정한 스타일을 적용
[응용예제 3-7] 스타일시트 정의 종합 연습 ① 01 <HTML><HEAD><TITLE> 스타일시트 정의 종합</TITLE> 02 <STYLE type="text/css"> 03 <!-- 04 body{font-size:12pt;line-height:20pt} 05 p a{font-family:궁서;text-decoration:none;} 06 p.content1 {font-family:돋움;color:red;} 07 [ ① ]{font-weight:600; [ ② ]} 08 --></STYLE></HEAD> 09 <BODY><center> 10 <p><a href=http://www.naver>중첩 태그 정의입니다.</a></p> 11 <p [ ③ ]>CLASS정의로서 content1의 영향을 받고 있어요.</p> 12 <h3 [ ④ ] >ID정의로서 con2의 영향을 받고 있습니다.</h3> 13 </BODY></HTML> #con2 Background-color:gray; CLASS=“content1” ID=“con2”
02_기본 문서 관련 스타일 폰트 정의를 위한 스타일 시트 텍스트 관련 스타일시트 배경 관련 스타일시트 목록 관련 스타일시트
[응용예제 3-8] 스타일시트 정의 종합 연습 ② 01 <HTML><HEAD><TITLE> 스타일시트</TITLE> 02 <style type="text/css"> 03 <!-- 04 [ ① ]{font-size:9pt; color:blue; font-weight:bolder; background-color:lightgrey;} 05 tr.[ ② ]{font-size:9pt; color:black;} 06 --></style></head> 07 <body > 08 <table border><tr [ ③ ]> 09 <td width="50">성명</td><td width="40">직업</td><td width="300">소속</td></tr> 10 <tr class="content"><td>강강이</td><td>학생</td><td>동국대학교전산원</td></tr> 11 <tr [ ④ ]><td>강냉이</td><td>교수</td><td>동국대학교e-비즈니스</td></tr> 12 </table> 13 </BODY></HTML> tr.title content Class=“title” Class=“content”
[기본예제 3-8] 폰트 속성 연습 ① 01 <HTML><HEAD><TITLE> 폰트 스타일</TITLE> 02 <STYLE type="text/css"> 03 <!-- 04 H3{font-family : 굴림 ; font-weight : lighter; color : red} 05 p{font-family : Helvetica ; font-weight : bolder ; font-style : italic ; font-size : 20pt ; } 06 --></STYLE></HEAD> 07 <BODY><H3> 폰트 스타일시트 (H3 스타일 적용 중) 테스트</H3> 08 <P>글자 크기는 20pt이고, 이탤릭체이며 폰트의 종류는 Helvetica 입니다.</P> 09 </BODY></HTML>
[응용예제 3-9] 폰트 속성 연습 ② 01 <HTML><HEAD><TITLE> 폰트 스타일</TITLE> 02 <STYLE type="text/css"> 03 <!-- 04 span {font-variant : small-caps ; font-weight : bold; color : red} 05 [ ① ]{letter-spacing : 0 em; line-height: 1 em;} 06 [ ② ] {letter-spacing : 0.5 em; line-height: 2 em;} 07 [ ③ ] {letter-spacing : 1 em; line-height: 3 em;} 08 --></STYLE></HEAD> 09 <BODY><span> font 스타일 시트 테스트</span> 10 <P class="test1">진정한 천재란, </P> 11 <P class="test2">진정한 천재란, </P> 12 <P class="test3">진정한 천재란, </P> 13 </BODY></HTML> .test1 .test2 .test3
[기본예제 3-10] 텍스트 속성 연습 ① 01 <HTML><HEAD><TITLE> 텍스트 스타일</TITLE> 02 <STYLE type="text/css"> 03 <!-- 04 H3{text-align:right ; text-indent:3cm ; } 05 p{text-decoration:overline ; text-transform:uppercase ; font-style : italic ; font-size: 20pt ; } 06 --></STYLE></HEAD> 07 <BODY><H3> 텍스트 스타일 </H3> 08 <P>텍스트 장식은 overline이고, 이탤릭체이며, 폰트의 크기는 20 포인트입니다.</P> 09 </BODY></HTML>
[응용예제 3-11] 텍스트 속성 연습② a:active a:vicited a:hover Underline; 01 <HTML><HEAD><TITLE> 하이퍼링크 스타일</TITLE> 02 <STYLE type="text/css"> 03 <!-- 04 a:link {text-decoration:none; color:gray;} 05 [ ① ] {text-decoration:none; color:blue;} 06 [ ② ] {text-decoration:none; color:red;} 07 [ ③ ] {text-decoration: [ ④ ] color:yellow;} 08 --></STYLE></HEAD> 09 <BODY><H3> 하이퍼링크 스타일</H3> 10 방문전 사이트 스타일 : <a href="http://www.naver.com">네이버 </a> <br> 11 방문후 사이트 스타일 : <a href="http://www.naum.co.kr">다음 </a> <br> 12 마우스 올린 스타일 : <a href="http://www.yahoo.com">야후</a> <br> 13 </BODY></HTML> a:active a:vicited a:hover Underline;
[기본예제 3-12] 배경 속성 연습 ① 01 <HTML><HEAD><TITLE> 배경 스타일</TITLE> 02 <STYLE type="text/css"> 03 body {background-color:red;background-image:url("bg2.jpg"); background- position: 10% 10%} 04 P.TEST1 {font-size : 15pt; line-height : 1.5; text-decoration : over-line; } 05 P.TEST2 {font-size : 18pt; text-decoration : line-through; text-align : center;} 06 P.TEST3 {font-size : 14pt; text-indent : 10;text-decoration : overline; text-align : right;} 07 </STYLE></HEAD> <BODY><H3> 잠언 시집 </H3><BR> 08 <P CLASS=TEST1> 종은 누가 그걸 울리기 전에는 종이 아니다. </P> 09 <P CLASS=TEST2> 그런 길은 없다. </P> 10 <P CLASS=TEST3> 일찍 일어나는 새 당신이 새라면 아침에 일찍 일어나야 한다.</P> 11 </BODY></HTML>
[응용예제 3-13] 배경 속성 연습 ② 01 <HTML><HEAD><TITLE> 배경 스타일</TITLE> 02 <STYLE type="text/css"> body { [ ① ]:url("bg1.gif"); background-repeat : [ ② ]background-position:10% 30%} 04 </STYLE></HEAD> <BODY><H3> 잠언 시집 </H3><BR> 05 종은 누가 그걸 울리기 전에는 종이 아니다. 06 노래는 누가 그걸 부르기 전에는 노래가 아니다. 07 당신의 마음속에 있는 사랑도 한쪽으로 치워 놓아선 안된다. 08 사랑은 주기 전에는 사랑이 아니니까 그런 길은 없다. 09 아무리 어둔 길이라도 나 이전에 누군가는 이 길을 지나갔을 것이다. 10 </BODY></HTML> Background-image repeat; 배경 이미지를 설정하여 이미지를 반복하도록 설정하였고, 위치를 조정하였다.
[기본예제 3-14] 블릿 속성 연습 ① 01 <HTML><HEAD><TITLE> 블릿 스타일</TITLE> 02 <STYLE type="text/css"> 03 .TEST1 {list-style-type:squre;} 04 .TEST2 {list-style-image:url("bullet1.gif");list-style-position:inside} 05 .TEST3 {list-style-image:url("bullet2.gif");list-style-position:outside} 06 </STYLE></HEAD> <BODY> 07 <ul CLASS="TEST1">성공의 조건 <li>꾀<li>꼴<li>끼<li>깡 </ul> 08 <ul CLASS="TEST2">피터드러그<li>프로페셔널의 조건<li>경영학바이블<li>성공시대</ul> 09 <ul CLASS="TEST3">하버드 스타일<li>자유<li>경쟁<li>변화 </ul> 10 </BODY></HTML>
[응용예제 3-15] 블릿 속성 연습 ① 01 <HTML><HEAD><TITLE> 목록 스타일</TITLE> 02 <STYLE type="text/css"> 03 ul{ [ ① ] :squre url("bullet3.gif") inside} 04 </STYLE></HEAD> <BODY> 05 <ul>최근 읽은 책 <li>웹 2.0<li>경영학 바이블<li>하버드 스타일<li>성공의 조건 </ul> 06 </BODY></HTML> 리스트의 속성을 한 번에 정의 ist-style-type
03_테이블, 폼 관련 스타일 테이블 관련 스타일시트 기타 스타일시트
[기본예제 3-16] 테이블 스타일시트 연습 ① <p> 태그에서 사용할 수 있는 3개의 클래스를 정의한다. 01 <HTML><HEAD><TITLE> 테이블 스타일시트 연습 </TITLE> 02 <STYLE> 03 P.TEST1 {border-style : solid ;border-color : red ; font-size : 15pt; line-height : 1.5;} 04 P.TEST2 {border-style : double ; background-color : pink ; font-size : 12pt; 05 text-decoration : line-through; text-align : center; } 06 P.TEST3 { border-style : inset ; border-color : blue ; 07 padding-top : 2em ; font-size : 15pt; text-indent : 10; 08 text-decoration : overline; text-align : right;} 09 </STYLE></HEAD> 10 <BODY><H3> 잠언 시집 </H3><BR> 11 <P CLASS=TEST1> 종은 누가 그걸 울리기 전에는 종이 아니다. </P> 12 <P CLASS=TEST2> 그런 길은 없다..</P> 13 <P CLASS=TEST3> 일찍 일어나는 새가 먹이를 먼저 잡는다.</P> 14 </BODY></HTML> 정의한 스타일 호출
[응용예제 3-17] 테이블 스타일시트 연습 ② 01 <HTML><HEAD><TITLE> 테이블 스타일시트 연습 </TITLE> 02 <STYLE> 03 [ ① ]{ padding : 10pt ;margin : 5pt; border:7pt outset blue; [ ② ] :skyblue;} 04 .TEST2 {[ ③ ]: 12pt outset red; border-right : 5pt groove green ; font-size : 14pt;} 05 </STYLE></HEAD><BODY><H3> 잠언 시집 </H3><BR> 06 <P CLASS=TEST1> 종은 누가 그걸 울리기 전에는 종이 아니다. </P> 07 <P [ ④ ]> 그런 길은 없다. </P> 08 </BODY></HTML> TEST1 background-color border-top CLASS=TEST2
[기본예제 3-18] 기타 스타일시트 연습 ① 01 <HTML><HEAD><TITLE> 기타 스타일</TITLE> 02 <STYLE type="text/css"> 03 <!-- 04 body {scrollbar-track-color:red;scrollbar-face-color:white; scrollbar-highlight-color:ee0e66;scrollbar-3dight-color:skyblue; scrollbar-darkshadow-color:black;scrollbar-arrow-color:yellow; scrollbar-shadow-color:black;} 05 select { font-family: 궁서; color: blue; border:1 groove #ee147c} 06 textarea { color:#4eecdf; background-color:#ee00ff; font-size:12pt;} 07 input {color:white;background-color:#8b4513;} 08 --></STYLE></HEAD> <BODY><h3> 기타 스타일시트 </h3> <br><br> 09 <form><select>직업 10 <option>학생 </option><option>교수</option><option>직원 </option> 11 </select><br><br><br> 12 하고싶은말<br><textarea cols="30" rows="10">이야기 해주세요..</textarea> <br><br> 13 <input type="submit" value="전송"></form></BODY></HTML>
[응용예제 3-19] 기타 스타일시트 연습 ② Ttextarea.content border class=“content” 01 <HTML><HEAD><TITLE>방명록</TITLE> 02 <STYLE> 03 [ ① ]{ 04 font-family: "궁서"; 05 color : #dc143c; 06 [ ② ] : 1px #ff1493 solid; 07 line-height: 15pt; 08 scrollbar-face-color : #ffffff; 09 scrollbar-shadow : # fa8072; 10 scrollbar-arrow-color:#4b0082; 11 </STYLE></HEAD> <BODY><center><H3> 방명록 꾸미기 </H3><P> 12 <FORM > 남기고 싶은 말 <BR> 13 <TEXTAREA [ ③ ] rows="10" cols="40"></TEXTAREA><p> 14 <input type="reset" value="재입력"> 15 </FORM></center> </BODY></HTML> content 객체를 선언하여 스타일을 정의한다. Ttextarea.content border 스크롤 바에 대한 색상을 정의한다. class=“content”
04_CSS 활용 스타일을 적용한 문단 작성 스타일을 적용한 테이블 작성 스타일을 이용한 필터 효과
[기본예제 3-20] 문단 스타일 연습 ① 01 <html><head><title>문단 테두리 스타일</title></head> 02 <h3>>>문단의 테두리 유형 비교<<</h3> 03 <p style="border-style:none">none</p> 04 <p style="border-style:solid">solid</p> 05 <p style="border-style:double">double</p> 06 <p style="border-style:groove">groove</p> 07 <p style="border-style:ridge">ridge</p> 08 <p style="border-style:inset">insert</p> 09 <p style="border-style:outset">outset</p> 10 <p style="border-style:dashed">dashed</p> 11 <p style="border-style:dotted">dotted</p> 12 <p style="border-style:hidden">hidden</p> 13 </body></html>
border-bottom-style:dotted; border-top-style:dashed [응용예제 3-21] 문단 스타일 연습 ② 01 <html><head><title>문단 테두리 스타일</title> 02 <style type="text/css"> 03 <!-- 04 body{font-size:12pt; font-weight:bold; text-align:center; } 05 div{width:700px; padding:5px; background-color:#C71585; color:#FFFAFA } 06 p{border-width:25px; border-color: OrangeRed; padding:10px; color:#8B0000} 07 --></style></head> 08 <body><h3>문단 테두리 스타일시트 </h3> 09 <p style=“[ ① ] :5px solid #228B22; "> 외곽선 두께 5 픽셀 한번에 지정 border 속성 지정</p><br> 10 <div style="border-width:5px; border-color: #8A2BE2 ;border-style:dotted;"> 세분화시켜서 지정 : border-width, border-color, border-style속성</div><br><br> 11 <div style="border:1px solid #228B22; padding:0pt; margin:0px; "> padding 안여백, margin 바깥여백</div><br> 12 <p style="[ ① ]:1px solid #228B22; background-image:url(bg2.jpg); color:orange; padding:10px"> 배경이미지 : background-image속성</p><br> 13 <div style="border-top:5px solid #228B22; border-bottom:5px solid #696969; "> 위/아래 외곽선 스타일 다르게 표시 :border-top, border-bottom 속성</div><br> 14 <div style="border:0px dotted #228B22; [ ② ]:5px; border-top-width:5px; "> 위/아래 외곽선점선표시 : border, border-bottom-width, border-top-width 속성</div><br> 15 <div style="border:0px dotted #228B22; border-bottom-width:thin; border-topwidth: thick; border-left-width:medium; border-right-width:1px; "> 다양한 스타일의 선두께 : 아래 thin, 위 thick, 왼쪽 medium, 오른쪽 1px;</div><br> 16 <div style="border:7px none #228B22; [ ③ ] ;"> 점선의 모양 스타일 : dotted 동그란, dashed 사각형</div><br> </body></html> border border border-bottom-width border-bottom-style:dotted; border-top-style:dashed
[기본예제 3-22] 테이블 스타일 연습 ① 01 <html><head><title>테이블 스타일</title> 02 <style type="text/css"> 03 <!-- 04 table{border-top:double 15px blue; border-bottom:double 6px blue; bordercollapse: collapse;width:600px; text-align:center; left:20%} 05 th{border-bottom:dotted 5px blue ; background-color:#2F4F40; color:white; padding:10px} 06 td{border-bottom:dotted 2px blue ; padding:10px} 07 caption { color:#2F4F40; font-size:12pt; font-weight:bold} 08 .test{border-left:solid 2px blue} 09 --></style></head><body> 10 <table><caption>샤프의 종류</caption> 11 <tr><th>제작사</th><th class=test>제품명</th></tr> 12 <tr><td>펜텔</td><td class=test>매카니카</td></tr> 13 <tr><td>파이로트</td><td class=test>닥터그립</td></tr> 14 <tr><td>스테들러</td><td class=test>925-85</td></tr> 15 <tr><td>파버카스텔</td><td class=test>pg5</td></tr> 16 </table></body></html>
background-image: url [응용예제 3-23] 테이블 스타일 연습 ② 01 <html><head><title>테이블 스타일</title> 02 <style type="text/css"> 03 <!-- 04 table{ [ ① ] :none 1px orange; border-collapse:collapse; text-align:center; width:500px; } 05 th{ [ ② ] : url(bg3.gif); color:#3366CC; padding:15px} 06 td{padding:10px;} 07 caption { color:#6600FF; font-size:11pt; font-weight:bold} 08 .test{ [ ③ ] (dot.gif)} 09 --></style></head> 10 <body><table><caption>샤프의 종류</caption> 11 <tr><th>제작사</th><th >제품명</th></tr> 12 <tr><td class=test colspan=2></td><tr> 13 <tr><td>펜텔</td><td >매카니카</td></tr> 14 <tr><td class=test colspan=2></td><tr> 15 <tr><td>파이로트</td><td >닥터그립</td></tr> 16 <tr><td class=test colspan=2></td><tr> 17 <tr><td>스테들러</td><td >925-85</td></tr> 18 <tr><td class=test colspan=2></td><tr> 19 <tr><td>파버카스텔</td><td >pg5</td></tr> 20 <tr><td class=test colspan=2></td><tr> 21 </table></body></html> border background-image background-image: url
[기본예제 3-24] 필터 연습 ① 01 <html><head><title>문자 특수 효과</title> 02 <style style="text/css"> 03 p{width:400 ; height:30; border:1px solid gray; padding:20px; text-align:center; font-size:18pt;font-family: 휴먼옛체 } 04 </style></head><body><center><h3>DropShadow</h3> 05 <p style="filter:dropshadow(color=blue,offx=5,offy=5,position=0)">롤스로이스</p> 06 <h3>Shadow</h3> 07 <p style="filter:shadow(color=red,direction=155">폭스바겐</p> 08 <h3>Glow</h3> 09 <p style="filter:glow(color=yellow,strength=5)">아우디</p> 10 </center></body></html> 필터 효과 사용 (색상과 위치 지정)
style=“filter:fliph()” [응용예제 3-25] 필터 연습 ② 01 <html><head><title>문자와 이미지 특수 효과</title> 02 <style style="text/css"> 03 body{font-size:15; font-weight:bold; } 04 </style></head><body><center><h2 >문자와 이미지를 꾸며주는 필터</h2> 05 <p> 기본글자와 원본사진<img src="egypt1.jpg"></p> 06 <p [ ① ]>filph 필터로 이미지 뒤집기<img src="eg.jpg" style=filter:fliph()></p> 07 <p style="filter:flipv()">filpv 필터로 이미지 뒤집기<img src="eg.jpg" style=filter: flipv()></p> 08 <p colspan=2 style=“[ ② ] (opacity=30,style=1,startx=10,finishx=70, starty=10, finishy=70)"> 09 alpha 필터로 이미지 경계를 투명하게 하기<img src="eg.jpg" style="filter:alpha (opacity=80,style=2,finishopacity=0)"></p> 10 <p colspan=2 style="filter:blur(direction=135,strength=7)">blur 필터로 번짐 효과주기 <img src="eg.jpg" style="filter:blur(direction=135,strength=15,add=1)"></p> 11 <p colspan=2 style=" [ ③ ] (strength=3,freq=4,lightstrength=2,phase=4, add=1)" >wave 필터로 물결효과 주기</th> 12 <img src="eg.jpg" style="filter:blur(direction=135,strength=15,add=1)"></p> 13 <br><br><br><br><br></body></html> style=“filter:fliph()” filter:alpha filter:wave
예제모음_05 예제설명 및 결과화면 예제설명 결과화면 하이퍼링크와 커서를 이용한 유적지 페이지를 만들어보자. 커서 타입을“서쪽 방향 양방향 화살표”모양으로 설정하고, 하이퍼 링크 스타일을 적용한다. 사용 이미지 : egypt.jpg 결과화면
예제모음_05 하이퍼링크와 커서를 이용한 페이지 만들기 01 <html><head><title> 예제모음5 </title> 02 <style type="text/css"> 03 <!-- 04 a { text-decoration: none; color: white; margin:30px; line-height:20pt;cursor:w-resize} 05 a:hover { text-decoration: underline ; color: #708090 ; } 06 a.bullet { color: #D3D3D3} 07 a:hover .bullet { color: #8B0000} 08 --></style></head> 09 <body><center><caption><h3>이집트 유적지 </h3></caption> 10 <table width=610 border=0 cellpadding=0 cellspacing=0 align=center> 11 <tr><td background="egypt.jpg" width=610 height=425 align=right valign=top> 12 <a href="egypt1.jpg">파라오<span class="bullet"> ■ </span></a><br> 13 <a href="egypt2.jpg">피라미드<span class="bullet"> ■ </span></a><br> 14 <a href="egypt3.jpg">스핑크스<span class="bullet"> ■ </span></a><br> 15 <a href="egypt4.jpg">미이라<span class="bullet"> ■ </span></a><br> </td></tr> 16 </table></center></body></html>
예제모음_06 예제설명 및 결과화면 예제설명 결과화면 스타일을 이용하여 스크롤되어도 배경 이미지가 움직이지 않는 페이지를 만들어보자 결과화면
예제모음_06 배경 이미지 고정시키기 01 <html><head><title> 예제모음6 </title> 02 <style> 03 <!-- 04 body{background:url(egypt2.jpg) no-repeat fixed right bottom; } 05 td{line-height:17pt; color:navy; } 06 h2{text-align:center ; } 07 --></style></head> 08 <body leftmargin=0 topmargin=0><h3>혈액형에 따른 스타일</h3> 09 <table width=100% height=100% border=0> 10 <tr><td> 11 A 형<br>일직선. 성실. 강한 의리. 보수파. 협조적. <br>예의 바름. 신중. 친절. 상냥함. 배려. <br>신경질적.부정적. 심각. 착실. 예민. 의기소침. 수동적 사고. 우유부단. 소극성. 낯가림. 겁쟁이. 망설임. 자신감 없음 12 <br><br> B 형<br>적극성. 정열. 행동력. 모험심. 결단력. 명랑<br> 낙천적. 풍부한 발상력. 뛰어난 센스. 유머. 배짱. <br>경솔. 개의치 않음. 거만. 심술. 방자함. 기분파. 어리광쟁이. 제멋 대로임. 반항심. 상식에서 벗어남 13 <br> <br>AB 형<br>논리성. 관찰력. 분석력. 합리성. 이지적. 공평. <br>평등. 냉정과 침착. <br>연구파. 개인주의. 스마트함.<br> 이해력. 개인주의. 경계심. 임기응변. 까다로움. 변덕. 냉철,<br>무표정. 마이웨이형. 억지. 무사 안일주의. 높은 긍지 14 <br><br> O 형<br>사교가. 리더쉽. 노력가. 낙천적. 인정 많음. <br>대범함. 관대. 호인. 정에 약함. 남의일이 내일.<br> 자신감. 야심만만. 강한의지. 독재자. <br>한번 마음먹으면 요지 부동. 지기 싫어함 15 <td width=400> </td></tr></table></body></html>
예제모음_07 예제설명 및 결과화면 예제설명 결과화면 필터를 이용하여 컬러사진을 흑백사진으로 만드는 페이지를 만들어보자. 사용 이미지 : eg2.jpg 결과화면
예제모음_07 컬러사진을 흑백사진으로 만들기 01 <html><head><title>예제모음7</title> 02 <style style="text/css"> 03 <!-- 04 body{color: white; font-size:20pt; font-weight:bold; } 05 table,td,th{border-collapse:collapse;border:1px solid gray;text-align:center; fontsize: 20pt; } 06 th{background-color: gray;} 07 --></style></head> 08 <body> 09 <table><tr><th>원본사진</th> 10 <th style="filter:gray()">흑백사진</th> 11 <tr><td><img src="eg2.jpg"></td> 12 <td><img src="eg2.jpg" style="filter:gray()"></td></tr></table> </body></html>
예제모음_08 예제설명 및 결과화면 예제설명 결과화면 테이블과 문단 스타일을 적용하여, 다음과 같은 결과를 보여주는 페이지를 만들어보자. 배경색과 테이블 크기는 사용자 임의대로 지정한다. 결과화면
예제모음_08 주간 계획서 만들기 01 <html><head><title>예제모음8</title> 02 <style type="text/css"> 03 <!-- 04 table{border-collapse:collapse; border:solid 1px #F0268C ; height:100px;} 05 th{border:solid 1px #F0268C ; background-color: #F5F5DC; } 06 td{border:solid 1px #F0268C ; width:80; height:80 ; padding:8 ;vertical-align:top; fontweight: bold; text-align:right; } 07 .TEST{color: #FF1493; font-size:12pt} 08 --></style></head> 09 <body> 10 <p align="center"><font size="5" color="#00008B"><b>July 7</b> </font>2007</p> 11 <table align="center" > 12 <tr height="30"><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th> 13 <th>Thu</th><th>Fri</th><th>Sat</th> </tr> 14 <tr><td><font color="blue">5</div><br><div class=event>가족 모임</div></td> 15 <td><font color="blue">6</div><br><div class=holiday>조찬 회의</div></td> 16 <td><font color="blue">7<br><br>업무 분장</td> 17 <td><font color="blue">8<br><br>팀장 모임</td> 18 <td><font color="blue">9</div><br><div class=TEST>결혼 기념일</div></td> 19 <td><font color="blue">10 <br><br>보고서</div></td> 20 <td><font color="blue">10 <br><br>주말 파티</div></td> 21 </tr></table></body></html>
요약 스타일시트 스타일지정 폰트 스타일 배경 스타일 목록 스타일 워드프로세스의 스타일과 같은 기능을 하는 것으로서, 웹 페이지의 여러 가지 속성의 정의 스타일지정 내부, 외부, 행 스타일시트 등이 있다. 폰트 스타일 글자의 크기, 글꼴 자간, 행간, 모양, 굵기 등을 지정 할 수 있다. 텍스트스타일 문서의 스타일을 지정. 텍스트의 정렬, 들여쓰기, 장식, 변환, 수직 정렬 등을 지정할 수 있다. 배경 스타일 웹 페이지 배경색뿐만 아니라 이지를 연결하여 배경으로 저장 가능 목록 스타일 HTML에서 제공되는 기본 문자 이외의 블릿을 적용하여 목록을 변경 가능
요약 기타스타일 CSS스타일 필터스타일 테이블의 여백, 테두리, 안 여백, 내용 등의 스타일을 지정 할 수 있다. 테이블스타일 마우스모양, 스크롤 바, 폼 양식 등을 변경할 수 있다. CSS스타일 중요 부분이 되는 문단을 스타일을 사용하여 표현하면 더 수준 있는 웹 문서를 작성할 수 있다. 필터스타일 스타일을 활용하여 특수 효과를 표현할 수 있다.
IT CookBook for Beginner, 3장 끝 www.themegallery.com Thank You ! IT CookBook for Beginner, 3장 끝