Microsoft PowerPoint - 강의노트 2.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - 강의노트 2.ppt"

채영 왕
5 years ago
Views:

속성값할당, 캐스케이딩, 상속 미디어타입 박스모델 (Bx mdel) 비주얼포맷팅모델 비주얼효과 내용생성, 자동으로번호붙이기, 리스트 페이지미디어 색상과배경 폰트텍스트테이블사용자인터페이스청각스타일시트 (Aural style sheet) http://www.webprgramming.c.

1 CSS 개요 DHTML+ 자바스크립트프로그래밍 제 2 장스타일시트 (CSS: Cascading Style Sheet) 를이용한화려한 HTML 문서 All right reserved. N part f this lecture nte may be reprduced, in any frm r by any means, withut permissin in writing frm the authrs Cpyright 2003 Kitae Hwang and Jaemn Lee 다양한표현지원 ( 밑줄부분만강의 ) CSS2 구문과기본데이터타입 셀렉터 속성값할당, 캐스케이딩, 상속 미디어타입 박스모델 (Bx mdel) 비주얼포맷팅모델 비주얼효과 내용생성, 자동으로번호붙이기, 리스트 페이지미디어 색상과배경 폰트텍스트테이블사용자인터페이스청각스타일시트 (Aural style sheet) CSS 맛보기예제 HTML 문서에스타일삽입 <head><title> 예제 2-1</title> <bdy> <h3> 스타일이정의되지않은 HTML 문서예제 </h3> <hr nshade> <h4> 나의홈페이지 </h4> <p> 저는재즈를좋아합니다.</p> </bdy> <head> <title> 예제 2-2</title> h4 { clr: red; fnt-style: blique } <bdy> <h3> 스타일이정의된 HTML 문서예제 </h3> <hr nshade> <h4> 나의홈페이지 </h4> <p> 저는재즈를좋아합니다.</p> </bdy> HTML 문서에스타일삽입하는 3 가지방법 HTML 태그의 style 속성을이용한스타일정의 <style> 태그를이용한스타일정의 <link> HTML 태그의 style 속성을이용한스타일정의 < 태그이름 style="prperty1:value1; prperty2:value2; ;prpertyn: valuen"> <head><title> 예제 2-3</title> <bdy> <h3> 태그내에속성을이용하여스타일정의하기예제 </h3> <hr nshade> <p style="clr:green"> 이문단은초록색입니다.</p> <p style="clr:red;fnt-size:20pt"> 이문단은빨간색이고 20pt입니다.</p> <p style="clr:gray;fnt-size:20pt"> 이문단은무슨색일까요?</p> </bdy>

<style> 태그를이용한스타일정의 <link> 태그를이용한외부스타일시트참조 <style> 태그형식 <style type= text/css > selectr1 {prperty1:value1; prperty2:value2; ;prpertyn: valuen;} selectrm {prperty1:value1; prperty2:value2; ;prpertyn:

</h3> <hr nshade> <p> 이문단은왼쪽여백이 30pt이고, 문자크기가 15pt입니다 </p> </bdy> http://www.webprgramming.c.

2 <style> 태그를이용한스타일정의 <link> 태그를이용한외부스타일시트참조 <style> 태그형식 <style type= text/css > selectr1 {prperty1:value1; prperty2:value2; ;prpertyn: valuen;} selectrm {prperty1:value1; prperty2:value2; ;prpertyn: valuen;} <style> 태그는 <head> 사이에정의 selectr( 셀렉터 ) 는 HTML 태그의이름혹은사용자가임의로정의 <head><title> 예제 2-4</title> p {margin-left:30pt;fnt-size:15pt} h3 {clr:red} <bdy> <h3> 이것은붉은색제목3입니다.</h3> <hr nshade> <p> 이문단은왼쪽여백이 30pt이고, 문자크기가 15pt입니다 </p> </bdy> 여러 HTML 문서에서하나의스타일을공유하는방법 p {margin-left:30pt;fnt-size:15pt} h3 {clr:red} <head> <title> 예제 2-5</title> <link type="text/css" rel="stylesheet" href="sample.css"> <bdy> <h3> 이것은붉은색제목 3 입니다.</h3> <hr nshade> <p> 이문단은왼쪽여백이 30pt 이고, 문자크기가 15pt 입니다 </p> </bdy> 를이용한외부스타일시트참조 스타일은상속된다 여러 HTML 문서에서하나의스타일을공유하는방법 HTML 태그의스타일속성은자식에게상속된다. p {margin-left:30pt;fnt-size:15pt} h3 {clr:red} <head><title> 예제 url(sample.css); <bdy> <h3> 이것은붉은색제목 3 입니다.</h3> <hr nshade> <p> 이문단은왼쪽여백이 30pt 이고, 문자크기가 15pt 입니다 </p> </bdy> sample.css <head> <title> 예제 2-7</title> p{clr:blue;margin-left:30pt;fnt-size:15pt} h3{clr:red} <bdy> <h3> 스타일상속예제 1</h3> <hr nshade> <p> 일반글자와 <big> 큰글자 </big> 의색이같을까요?</p> </bdy> <p> 태그의속성이 <big> 태그에상속되었다.

새로운셀렉터정의 클래스셀렉터 박스모델 클래스셀렉터 사용자가정의한셀렉터 셀렉터이름앞에. 을붙여이용 <head><title> 예제 2-9</title>.help {clr:blue;fnt-size:20pt}.mem {clr:red; fnt-size:15pt}.headline {clr:green; fnt-size:30pt} h2.

</h2> </bdy> http://www.webprgramming.c.

2em} /* tp, bttm, left, right=2em */ bdy {margin: 1em 2em} /* tp, bttm=1em & left, right=2em */ bdy {margin: 1em 2em 3em} /*tp=1em & right, left=2em & bttm=3em */ padding, padding-left,

3 새로운셀렉터정의 클래스셀렉터 박스모델 클래스셀렉터 사용자가정의한셀렉터 셀렉터이름앞에. 을붙여이용 <head><title> 예제 2-9</title>.help {clr:blue;fnt-size:20pt}.mem {clr:red; fnt-size:15pt}.headline {clr:green; fnt-size:30pt} h2.myclass (clr:yellw; fnt-size:40pt} <bdy> <h3 class="headline"> 스타일상속예제 2</h3> <hr nshade> <p class="help"> 도움말 </p> <p class="mem"> 메모 </p> <p class="myclass"> 스타일이적용이될까요?</p> <h2>myclass 를적용합니다.</h2> </bdy> HTML 의모든요소를박스 ( 사각형 ) 구성으로간주 <p> </p> 에의해출력된본문이박스에둘러싸였다고간주 보더 (brder), 패딩 (padding), 여백 (margin) 제어가능 박스모델을구성하는스타일속성 margin, margin-left, margin-right, margin-tp, margin-bttm 여백의크기를제어 bdy {margin: 2em} /* tp, bttm, left, right=2em */ bdy {margin: 1em 2em} /* tp, bttm=1em & left, right=2em */ bdy {margin: 1em 2em 3em} /*tp=1em & right, left=2em & bttm=3em */ padding, padding-left, paddging-right, padding-tp, paddginbttm 패팅의크기를제어 brder, brder-left, brder-right, brder-tp, brder-bttm 보더의크기를제어 박스모델의패딩, 보더, 여백의관계 박스모델예제 <head><title> 예제 2-10</title> ul { backgrund: blue; margin: 12px; padding: 3px 6px 9px 12px; } li { clr: black; backgrund: yellw; margin: 12px; padding: 12px 0px 12px; list-style: nne } li.withbrder { brder-style: dashed; brder-width: thick; brder-clr: red; } <bdy> <h3> 박스모델예제 </h3> <hr nshade> <ul> <li> 보더가없는요소 <li class="withbrder"> 보더가있는요소 </ul> </bdy>

텍스트제어 텍스트제어예제 텍스트제어 들여쓰기, 정렬, 공백, 간격등의세밀한출력제어가능 텍스트제어를위한스타일속성 text-indent 들여쓰기크기를설정 text-align 텍스트정렬 (left, right, center, justify) text-decratin 밑줄 (underline), 윗줄 (verline), 중간선 (line-thrugh), 깜박이기

class2 {text-indent:1em; text-align:center; text-decratin: line-thrugh} <bdy> <h3> 텍스트예제 </h3> <hr nshade> <p class="class1">html 의태그만으로기존의워드프로세서와같이들여쓰기, 정렬, 공백, 간격등과세밀한텍스트제어를할수없다. </p> <p http://www.

4 텍스트제어 텍스트제어예제 텍스트제어 들여쓰기, 정렬, 공백, 간격등의세밀한출력제어가능 텍스트제어를위한스타일속성 text-indent 들여쓰기크기를설정 text-align 텍스트정렬 (left, right, center, justify) text-decratin 밑줄 (underline), 윗줄 (verline), 중간선 (line-thrugh), 깜박이기 (blink) 기타많은속성 <head> <title> 예제 2-11</title>.class1 {text-indent:3em; text-align:justify; text-decratin: underline}.class2 {text-indent:1em; text-align:center; text-decratin: line-thrugh} <bdy> <h3> 텍스트예제 </h3> <hr nshade> <p class="class1">html 의태그만으로기존의워드프로세서와같이들여쓰기, 정렬, 공백, 간격등과세밀한텍스트제어를할수없다. </p> <p "> 그러나, 스타일시트는이를가능하게한다. 스타일시트에는텍스트를제어하는다양한속성이있으나 여기서는들여쓰기, 정렬에대해서알아본다 </p> 색과배경 색, 배경예제 글자의색이나블록의배경색을지정할수있음 속성 clr 요소의텍스트색상을지정, 기정해진색이름이나 RGB로표현 backgrund-clr 요소의배경색상을지정, 기정해진색이름이나 RGB로표현 투명 : transparent로지정 backgrund-image 요소의배경이미지를지정하며, URI로이미지소스를지정 backrund-attachment 배경이미지의위치를지정 scrll : 배경이본문과함께스크롤 fixed : 배경은화면위치에고정 <head> <title> 예제 2-12</title> bdy { clr:rgb(255,255,0); backgrund-clr: black; backgrund-image:url(" 비누방울.jpg"); backgrund-repeat: repeat-y; backgrund-attachment: fixed; } p {clr:white; backgrund-clr: blue} <bdy> <h3> 색, 배경예제 </h3> <hr nshade> 이텍스트는검은색바탕에노란색폰트로표시됩니다. <p> 이텍스트는파란색바탕에하얀색폰트로표시됩니다.</p> </bdy>

x-large, xx-large 상대크기 직접수치사용가능 fnt-weight 폰트의굵기, nrmal, bld, brder, lighter, 100에서 900까지.

</p> <p style="fnt-weight:900"> 두께가두꺼운 fnt 로출력됩니다.</p> </bdy> http://www.webprgramming.c.

5 폰트 폰트예제 HTML 4.0 부터 <fnt> 태그의사용중지 HTML 문서가전달하는본질적인문서의구조를유지하기위해 대신 fnt 스타일이용 속성 fnt-family 사용될폰트의집합을나열, 콤마로구분 fnt-style 폰트스타일지정, nrmal, italic, blique fnt-size 폰트의크기지정 절대크기 : xx-small, x-small, small, medium, large, x-large, xx-large 상대크기 직접수치사용가능 fnt-weight 폰트의굵기, nrmal, bld, brder, lighter, 100에서 900까지. <head> <title> 예제 2-13</title> bdy {fnt-family:'my wn fnt', Tahma; fnt-style:blique; fntsize:15pt} <bdy> <h3> 폰트예제 </h3> <hr nshade> <p style="fnt-weight:100"> 두께가얇은 fnt 로출력됩니다.</p> <p style="fnt-weight:900"> 두께가두꺼운 fnt 로출력됩니다.</p> </bdy> 다양한시각적효과 시각적효과의예 1 psitin 속성 블록단위의요소 (<p> 혹은 <div> 등 ) 에적용되는시각적효과 속성 psitin 블록의구성외곽의문서상의위치를지정 static, relative, abslute, fixed left, right, tp, bttm 블록과다른요소와의거리지정 width, height 박스의크기지정 clip 박스내의특정부분만이출력하도록클리핑영역지정 z-index 3 차원의공간 (x,y,z) 상에서 z 축의위치 visibility 요소의출력속성 visible( 보이게 ), hidden( 숨기기 ), cllapse( 테이블의행, 렬모두숨기기 ) <head><title> 예제 2-14</title>.p1 { psitin: abslute; left:0px; tp:80px; width:100px; height:40px; brder-style:inset; brder-clr:magenta; brder-width:thick }.p2 { psitin: abslute; left:110px; tp:80px; width:120px; height:50px; brder-style:dtted; brder-clr:blue; brder-width:thin }.p3 { psitin: relative; left:50px; tp:60px; width:100px; height:40px; brder-style:utset; brder-clr:range; brder-width:thick } <bdy> <h3> 시각적효과 - psitin 값에따른위치 </h3> <hr nshade> <span class="p1"> 절대위치박스 1</span> <span class="p2"> 절대위치박스 2</span> <span class="p3"> 상대위치박스 3</span> </bdy>

layer2 { backgrund:white; psitin: abslute; brder-style:inset; visibility: hidden; left:30px; right:10px; tp:110px; bttm:20px; width:100; height:30; z-index:2; }.

6 시각적효과의예 2 z-index,visibility,clip 속성 사용자인터페이스 - cursr <head><title> 예제 2-15</title>.layer1 { backgrund:yellw; psitin: abslute; brder-style:inset; z-index:1; left:10px; right:10px; tp:90px; bttm:20px; width:100; height:30; }.layer2 { backgrund:white; psitin: abslute; brder-style:inset; visibility: hidden; left:30px; right:10px; tp:110px; bttm:20px; width:100; height:30; z-index:2; }.layer3 { backgrund:green; psitin: abslute; brder-style:inset; z-index:3; left:50px; right:10px; tp:130px; bttm:20px; width:100; height:30; }.n_clip { psitin: abslute; left:0px; right:10px; tp:200px; bttm:20px; fnt-size:2em }.clip { psitin: abslute; left:0px; right:10px; tp:250px; bttm:20px; fnt-size:2em; clip: rect(5px, 350px, 30px, 25px) } <bdy><h3> 시각적효과예제 2</h3> <hr nshade> <p class="layer1"> 박스 1 이가장뒤에있습니다.</p> <p class="layer2"> 박스 2 는중간에있습니다.</p> <p class="layer3"> 박스 3 가가장앞에있습니다.</p> <p class="n_clip"> 클리핑이안된텍스트입니다.</p> <p class="clip"> 클리핑이적용된텍스트입니다.</p> </bdy> 사용자인터페이스를위한속성들은화면을보다흥미롭게표현 cursr 속성만강의 aut : 커서모양을브라우저가자동결정 default : 브라우저가실행되는플랫폼의디폴트커서모양 crsshair : 십자가 hand : 손모양 pinter : 링크표시 mve : 이동중 text : 텍스트영역 wait : 프로그램실행중 help : 커서가존재하는곳에도움말있음 X-resize : 크기조절중으로 X 에는방향을표시하는문자 e, w, s, n, se,. sw, ne, nw uri : 커서리소스를저장한파일의주소 cursr 속성예 필터 <head><title> 예제 2-16</title> <bdy> <h3> 커서예제 </h3> <hr nshade> <p style="cursr:crsshair"> 여기에커서가오면십자모양이됩니다.</p> <p style="cursr:hand"> 여기에커서가오면손모양이됩니다.</p> <p style="cursr:help"> 여기에커서가오면도움말커서가됩니다.</p> </bdy> 필터란? 이미지나텍스트가출력될때주는효과 필터종류 필터이름 설명 Alpha 이미지를흐려지게하는효과 BasicImage Blur Chrma Drpshadw Embss Engrave FlipH FlipV Glw Gray Invert MtinBlur Revealtrans Shadw Wave Xray x-ray, 반사, 투명도, 보색효과등의효과 번지게하는효과 특정색을제거하는효과 입체적인효과 gray 스케일로엠보싱 ( 양각 ) 효과 gray 스케일로음각효과 좌우대칭효과 상하대칭효과 불타는듯한효과 흑백사진효과 보색으로바꾸는효과 느리게움직이다포착된모션효과 변환효과 그림자효과 물결치는효과 x-ray 사진효과

BasicImage( grayscale=0, xray=1, mirrr=0, invert=0, pacity=0.15, rtatin=0); > BasicImage 필터를사용합니다.</div> 익스플로러 4.

7 필터사용법 필터사용예 기본적인필터사용법 < 태그이름 style= filter:filter_name1;filter:filter_name2;..;filter:filter_namen > 예제 2-17 의소스가복잡하여생략함 <DIV> 태그에 BasicImage 필터를적용한예 <div style="filter: prgid: DXImageTransfrm.Micrsft.BasicImage( grayscale=0, xray=1, mirrr=0, invert=0, pacity=0.15, rtatin=0); > BasicImage 필터를사용합니다.</div> 익스플로러 4.0 에서사용된필터 FlipH, FlipV, Gray, Invert,Xray 익스플로러 5.5 에서 BasicImage 필터로구현 prgid: DXImageTransfrm.Micrsft. 부분을생략 <div style="filter: fliph();">fliph 필터를사용합니다.</div> 필터사용예 예제 2-18 소스가복잡하여생략함

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

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