CSS2.0 (Cascading Style Sheet)

CSS2.0 (Cascading Style Sheet)
Park Yong Jun(RedPlus) MVP, MCT, MCSD, MCAD, MCP, 정보처리기사, 전자상거래관리사

CSS Level 2 개요 CSS란 'Cascading Style Sheets'를 말한다.
HTML의 한계성을 극복하기 위한 방안의 하나  DHTML 스타일시트를 사용하면 TABLE이나 FRAME에 의존하던 문서의 레이아웃을 효과적으로 할 수 있고, 글자 크기나 글자체, 줄 간격, 배경 색상 등도 자유롭게 선택할 수 있다. 또한, 스타일을 정의해 놓고 여러 개의 문서에서 불러 쓸 수 있어, 일관된 외양을 요구하는 여러 개의 문서를 만들 때 매우 편리하다. HTML, CSS, JavaScript, DOM 등을 함께 일컬어 Dynamic HTML 혹은 HTML4.0이라고 부르기도 한다.

미리보는 CSS 문법 HTML문서에 CSS적용하는 5가지 모습 형식:
<style type="text/css"> ~CSS코드~ </style> <link rel="stylesheet" type="text/css“ href="~CSS파일경로~“ > <태그명 style="~CSS코드~"> ~ </태그명> <태그명 class=".으로선언된스타일명"> ~ </태그명> <태그명 id="#으로선언된스타일명"> ~ </태그명>

미리보는 CSS 문법 CSS 적용하는 방법 형식: 태그명 {스타일속성명:스타일속성값; ... } 태그명, ... {
.나만의스타일명 {} #나만의스타일명 {}

HTML문서에 스타일시트 적용하기 시작 처음으로 작성하는 스타일시트(아래 예제 타이핑) <HTML>
<HEAD> <TITLE> CSS2.0 시작 </TITLE> <style type="text/css"> /* CSS를 배워보자. */ body {color:blue;} b {color:red;font-size:9pt;} </style> </HEAD> <BODY> 안녕하세요...<br> <b>CSS2.0</b><br> 반갑습니다.<br> </BODY> </HTML>

글꼴 관련 스타일 Color 속성 font-size 속성 font-family 속성
글자 색상 지정 : Element의 글자색을 나타낸다. font-size 속성 글자 크기 지정 : 상대적인 표현, pt 단위, px 단위 font-family 속성 글자 모양 지정 : 모든 글꼴 이름

선택기(Selector) 스타일시트의 단 하나의 문법 선택기의 종류 선택기 {속성:값;} 태그 선택기 : XHTML태그 {}
클래스 선택기 : #클래스명 {} 아이디 선택기 : .아이디명 {} 다중 선택기 : 태그명1, 태그명2 {} 자손 선택기 : 태그명1 태그명2 {} 가상클래스 선택기 : a:지정자 {}

스타일시트 삽입하기 1(<head>내에 선언)
<STYLE type=“text/css”>~</STYLE> <HTML> <HEAD> <TITLE> CSS2.0 시작 </TITLE> <style type="text/css"> body {color:blue;} b, p, body { color:red;font-size:9pt; } </style> </HEAD> <BODY> 안녕하세요...<br> <b>CSS2.0</b><br> 반갑습니다.<br> <p>HTML의 보완적인 요소 : CSS</p> </BODY> </HTML>

스타일시트 삽입하기 2(외부파일에 스타일시트 선언)
<LINK rel=“stylesheet” href=“URL” type=“text/css”> <HTML> <HEAD> <TITLE> CSS2.0 시작 </TITLE> <link rel="stylesheet" type="text/css" href="./03_외부에스타일정의.css"> </HEAD> <BODY> 안녕하세요...<br> <b>CSS2.0</b><br> 반갑습니다.<br> <p>HTML의 보완적인 요소 : CSS</p> </BODY> </HTML> body {color:blue;} b, p, body { color:red;font-size:9pt; }

스타일시트 삽입하기 3(태그안에 스타일 선언)
<태그명 style=“스타일”> : 인라인 스타일시트 <HTML> <HEAD> <TITLE> CSS2.0 시작 </TITLE> </HEAD> <BODY style="color:blue;color:red;font-size:9pt;"> 안녕하세요...<br> <b style="color:red;font-size:9pt;">CSS2.0</b><br> 반갑습니다.<br> <p style="color:red;font-size:9pt;">HTML의 보완적인 요소 : CSS</p> </BODY> </HTML>

사용자 정의 스타일 시트 <태그명 style=“스타일”> : 인라인 스타일시트 <HTML>
<HEAD> <TITLE> CSS2.0 시작 </TITLE> <style type="text/css"> body {color:red;} .myFontStyle{ color:navy; /*폰트 색상*/ font-size:9pt; /*폰트 크기*/ font-family:verdana; /*폰트 모양*/ } #myBodyStyle{ text-decoration:underline; /*언더라인*/ </style> </HEAD> <BODY class="myFontStyle"> 안녕하세요...<br> <b id="myBodyStyle">CSS2.0</b><br> 반갑습니다.<br> <p style="color:red;">HTML의 보완적인 요소 : CSS</p> </BODY> </HTML>

스타일 우선순위 CSS우선순위(STYLE>ID>CLASS>TAG>Tag고유속성) <HTML>
<HEAD> <TITLE> CSS우선순위(STYLE>ID>CLASS>TAG>Tag고유속성) </TITLE> <style type="text/css"> p {color:black;font-size:20pt;text-decoration:overline;} .myFontStyle1{ color:yellow;font-size:30pt;font-family:"굴림"; } #myFontStyle2{ </style> </HEAD> <BODY> <p class="myFontStyle1" id="myFontStyle2" style="font-family:'궁서체';"> 안녕하세요.</p> </BODY> </HTML>

여러가지 스타일 사용 방식 콤마(,)로 여러 Selector 나열하기 쩜(.) 클래스(class) 샾(#) 아이디(id)
공백( )으로 중첩 구조 처리 틸드(~) 기호로 부모 자식 관계 처리 콜론(:)으로 링크 속성 처리

Selector 묶어서 사용하기 H1 {font-family:Verdana;} H2 {font-family:Verdana;}
H1, H2, H3 {font-family:Verdana;} H1, H2, H3 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Verdana; font-variant: normal; font-style: normal; }

Class attribute selector
<STYLE TYPE=“TEXT/CSS”> .KEYWORD {속성:VALUE;…} </STYLE> <TAG CLASS=“KEYWORD”> .test {color:blue;} H1.red {color:red;} <STRONG class = test>파란색</STRONG> <H1 class = red>빨강색</H1> <H1>검은색</H1>

Id attribute selector Id 속성은 class와 비슷하지만,
H1#test {letter-spacing:5em;} <H1 id=test>Wide text</H1>

Contextual selectors H1 안에 들어있는 EM element에만 파란색 글자를 주고 싶다"와 같이
특정 element에 포함된 element에만 스타일을 적용시키고자 할 때 contextual selector를 사용한다. Element와 Element 사이에 빈 칸을 주고 나란히 써 주면 된다. H1 EM {color : blue } <H1>검은색</H1> <EM>검은색</EM> <H1>검은색 <EM>푸른색</EM> 다시 검은색</H1>

Parent-child selectors
Parent-child selector는 하나의 element가 다른 element에 포함되었을 때 스타일을 정의하도록 해준다. Contextual selector와 비슷한데, contextual selector가 2대나 3대 자손이 되어도 되는 반면, parent-child selector는 이름에 나타나듯이 포함되는 첫번째 element에만 해당된다. Parent-child selector를 나타낼 때는 ~ 표시를 해 준다. BODY {font-size:10pt;line-height:12pt;} BODY ~ P {line-height:16pt;} <P>여기는 줄 간격이 16pt이다.<BR></P> <P>여기도 줄 간격이 12pt이다.<BR></P> 완벽하게 구현되지 않음

Anchor pseudo-classes : :link, :visited, :active
A:link {color: red} /* :link라고만 써도 된다. */ A:active {color: lime} A:visited {color: blue} A:link, A:active, A:visited {text-decoration : none } <A href = "

Cascading order id 속성을 쓰면 중요도가 가장 높다. class 등 속성을 쓰면 중요도가 높다.
Selector로 사용한 element의 수가 많으면 중요도가 높다. STYLE element 안에 정의한 것보다 style 속성으로 정의한 것이 중요도가 높다.

잠시 강좌를 중지시키고, 커피/녹차 한 잔의 여유를 가져보세요.
결국 오늘도 졸았다 … ㅠ_ㅠ 그나저나, 침은 어쩌지..

특정 영역에 스타일 적용하기 특정 영역에 스타일 적용하기 <div> 사용 <span> 사용
<b style=“color:blue;”>b태그가 적용, blue 글자</b> <span style=“color:blue;”> 아무런 태그가 적용되지 않고 blue </span> <div style=“color:blue;”> 특정 문단에 blue 적용<br> span 태그와 비슷 </div>

폰트 관련 스타일 폰트 관련 스타일 <HTML> <HEAD>
<TITLE> 폰트 관련 스타일시트 </TITLE> <style type="text/css"> body {font-size:20pt;} /*9pt, 12px, em, cm, ...*/ .myFontSize {font-size:12px;}/*폰트 크기*/ .myFontFamily {font-family:"궁서체";}/*폰트 종류*/ .myFontWeight {font-weight:bold;}/*폰트 굵기*/ #myFontStyle {font-style:italic;}/*폰트 스타일(이탤릭체)*/ </style> </HEAD> <BODY> <span class="myFontSize">12픽셀</span> 크기의 텍스트<br> <span class="myFontFamily">궁서체 텍스트</span><br> <span style="font-weight:bold;">볼드체의 텍스트</span>(<B>와 동일)<br> <span id="myFontStyle">이탤릭체의 텍스트(i태그와동일)</span><br> </BODY> </HTML>

글꼴 스타일/굵기/크기/종류 지정 Font-style : 스타일 Font-weight : 굵기 Font-size : 글꼴 크기
normal, italic, oblique Font-weight : 굵기 normal, bold, lighter, bolder 100, 200, 300, … 900 Font-size : 글꼴 크기 단위를 붙인수치(pt), smaller, lager Font-family : 글꼴이름, 글꼴이름, … “굴림”,

텍스트 관련 스타일 1 <TABLE border="1" width="100%" height="500">
<TR> <TD valign="top" style="line-height:150%;">1<br>1</TD> <TD valign="top" > <span style="text-decoration:none;">기본</span><br> <span style="text-decoration:underline;">밑줄</span><br> <span style="text-decoration:overline;">윗줄</span><br> <span style="text-decoration:line-through;">취소선</span> </TD> </TR> <TD style="vertical-align:top;">3</TD> <TD style="text-align:center;">4</TD> </TABLE>

line-height, vertical-align 속성
한 줄 안에서의 box 간의 수직 정렬 방식을 정한다. Table에서의 vertical-align 속성

글꼴 스타일 지정 Text-decoration : 장식
none, underline, overline, line-through, blink

스타일 속성(정렬 방법) Text-align : 정렬방법 Vertical-align : 정렬위치
left, right, center Vertical-align : 정렬위치 top, middle bottom, baseline, text-top, text-bottom, super, sub

텍스트 관련 스타일 2 <TABLE border="1" width="100%" height="500">
<TR> <TD> <span style="text-transform:capitalize;">abC(첫글자 대문자로)</span><br> <span style="text-transform:uppercase;">AbC(모두 대문자로)</span><br> <span style="text-transform:lowercase;">AbC(모두 소문자로)</span><br> </TD> <blockquote>1</blockquote><br> <div style="text-indent:50px;">2(한 문단만 들여쓰기)</div> <br> <div style="text-indent:50px;">3</div><br> <div style="text-indent:50px;">4</div><br> </TR> </TABLE>

텍스트 포맷 관련 스타일 텍스트 포맷 관련 스타일 <TABLE BORDER="1" width="100%">
<TR> <TD style="width:150px;">1</TD> <TD><span style="height:150px;">2</span></TD> </TR> <TD> 문자간격<br><span style="letter-spacing:0.5em;">문자간격</span> </TD> 단어 간격<br><span style="word-spacing:0.5em;">단어 간격</span> </TABLE>

Width 속성 / Height 속성 Width : 너비 Height : 높이
하나의 element에 의해 그려지는 box의 폭은 width 속성의 값으로 결정된다. Height : 높이 하나의 element에 의해 그려지는 box의 높이는 height 속성의 값으로 결정된다. width : 길이 / 퍼센트 / auto max-width : 길이 / 퍼센트 min-width : 길이 / 퍼센트

문자 간격, 단어 간격 Letter-spacing : 문자간격(자간) Word-spacing : 단어 간격
letter-spacing : 0.5em Word-spacing : 단어 간격 word-spacing : 0.5em

크기의 단위 Element Description Element Description in 인치(1인치=2.54cm) cm
센티미터 절대적인 값을 나타내는 단위 mm 밀리미터 pt 포인트(1포인트=1/72인치) pc 파이카(1파이카=12포인트) Element Description em 해당 범위에서의 폰트의 높이를 1로 하는 단위 상대적인 값을 나타내는 단위 ex 해당 범위에서의 폰트의 소문자(x) 높이를 1로 하는 단위 px 1픽셀을 1로 하는 단위 % 부모가 되는(현재의 element가 포함된) element의 폭 기준

문단 관련 스타일 text-indent : 들여쓰기 white-space : 공백, 줄 바꿈 처리
Normal(자동개행), pre(<pre>), nowrap(개행방지)

여백 관련 스타일 여백 관련 스타일 <TABLE BORDER="1" width="100%"> <TR>
<TD style="padding-top:30px;padding-left:20px;">1</TD> <TD style="padding:50px;"> <span style="margin:50px;">2</span> </TD> </TR> </TABLE>

content → padding → border → margin
Box dimension 모든 element는 여러 겹의 상자로 둘러 쌓여 있다고 가정하는 것이 CSS2의 box model이다. Margin은 투명하다. 따라서 배경색이나 무늬가 비쳐 보이게 된다. margin, border, padding 속성을 이용해 각각의 폭이나 색을 조정할 수 있다. 세로로 마진이 만날 때는 겹쳐진다. content → padding → border → margin

Margin 속성 마진 부분의 폭을 지정하는 속성으로, margin-left, margin-right, margin-top, margin-bottom을 이용하면 4 곳의 마진 값을 각각 줄 수 있고, margin 속성을 이용하면 4곳의 마진 값을 동시에 줄 수 있다. margin-left : 길이 | 퍼센트 | auto left 대신 top / right / bottom 을 넣을 수 있다.

스타일 속성(여백 설정) Margin-top : 위쪽 여백 Margin-bottom : 아래여백
Margin-left : 왼쪽 여백 Margin-right : 오른쪽 여백 Margin: 여백  상하좌우 여백 동시에 줄 때

Padding 속성 패딩 부분의 폭을 지정하는 속성으로, padding-left, padding-right, padding-top, padding-bottom을 이용하면 4 곳의 패딩 값을 각각 줄 수 있다. padding 속성을 이용하면 4곳의 패딩 값을 동시에 줄 수 있다. padding-left : 길이 | 퍼센트 H1 {background: white; padding: 1em 2em;}

외곽선과 내용간의 간격설정 Padding-top : 위 Padding-bottom : 아래 Padding-left : 왼쪽
Padding-right : 오른쪽 Padding : 상하좌우 여백 padding : 20px

테이블 외곽선 관련 스타일(계속…) 테이블 외곽선 관련 스타일
<TABLE border="0" width="200" height="200" style=" border-top-width:10px; border-top-color:red; border-top-style:dotted; border-left-width:10px; border-left-color:blue; border-left-style:solid; border-right-width:10px; border-right-color:silver; border-right-style:groove; border-bottom-width:10px; border-bottom-color:yellow; border-bottom-style:dashed; "> <TR> <TD>1</TD><TD>2</TD> </TR> </TABLE>

테이블 외곽선 관련 스타일 테이블 외곽선 관련 스타일
<TABLE border="0" width="200" height="200" style=" border-top:10px red dotted; border-left:10px blue solid; border-right:10px silver groove; border-bottom:10px yellow dashed; "> <TR> <TD>1</TD><TD>2</TD> </TR> </TABLE> style="border:10px red double;"> <TD>1</TD> <TD>2</TD>

Border 속성 : 테두리 정의 보더 부분의 폭을 지정하는 속성 border-width /*외곽선의 굵기 : 1px */
border-color /* 외곽선의 색상 : 색상 */ border-style /* 외곽선의 스타일 : none, solid, dotted*/ border /* 상하좌우 외곽선 정의 */ 로 나뉘어짐.

외곽선 굵기 지정 Border-top-width : 위 Border-bottom-width : 아래
Border-left-width : 왼쪽 Border-right-width : 오른쪽 Border-width : 상하좌우 외곽선 굵기

외곽선 색 정의 Border-top-color : 위 Border-bottom-color : 아래
Border-left-color : 왼쪽 Border-right-color : 오른쪽 Border-color : 상하좌우 외곽선 색상

외곽선 스타일 정의 Border-top-style : 위 Border-bottom-style : 아래
Border-left-style : 왼쪽 Border-right-style : 오른쪽 Border-style : 상하좌우 외곽선 굵기 none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

배경 관련 스타일 배경 관련 스타일 <span style="background-color:yellow;">폼</span> 관련 스타일시트<br> <input type="text" size="25" style=" color:blue; background-color:yellow; text-align:center; " ><br> <select style="background-color:yellow;"> <option>test</option> </select><br> <textarea rows="15" cols="30" background-image:url( background-repeat:no-repeat; background-position:right bottom; background-attachment:fixed; ></textarea>

Background 속성 Element의 배경색이나 무늬를 지정할 수 있다.
background-color : 색 이름 / RGB 값 background-image : url(“URL”) / none background-repeat : repeat / repeat-x / repeat-y / no-repeat background-position : top / bottom / left / right / center background-attachment : fixed / scroll

포인터(커서) 관련 스타일 커서 관련 스타일 <a href="#" style="cursor:default;">기본값</a><br> <a href="#" style="cursor:auto;">자동으로 커서 설정</a><br> <a href="#" style="cursor:help;">도움말</a><br> <a href="#" style="cursor:crosshair;">+표시</a><br> <a href="#" style="cursor:pointer;">손모양</a><br> <a href="#" style="cursor:wait;">모래시계</a><br> <a href="#" style="cursor:text;">텍스트</a><br> <a href="#" style="cursor:move;">움직임</a><br>

포인터 모양 지정 Cursor : 포인터의 모양 auto crosshair default pointer move text
wait help n-resize s-resize w-resize e-resize ne-resize nw-resize se-resize sw-resize

링크 관련 스타일 <HTML> <HEAD>
<TITLE> 링크 관련 스타일시트 </TITLE> <style type="text/css"> body{ color:navy;font-size:20pt;font-family:verdana; } a:link{ background-color:yellow;text-decoration:underline; cursor:hand; }/*방문 전*/ a:visited { background-color:silver;text-decoration:none;cursor:help; }/*방문후*/ a:active { text-decoration:overline;cursor:wait;font-family:궁서체; }/*마우스클릭시*/ a:hover{ background-color:blue;cursor:move;color:yellow; }/*마우스 오버시*/ </style> </HEAD> <BODY link=“blue" vlink="red" alink=“gray"> <a href=" <a href=" </BODY> </HTML>

링크 스타일 지정 A: link {스타일} A: visited {스타일} A: active {스타일}
처음 링크 색상 A: visited {스타일} 방문 링크 색상 A: active {스타일} 움직일 때 링크 색상 A: hover {스타일} 링크에 마우스 포인터 올라갈 때 링크색상

부분 링크 관련 스타일 <HTML> <HEAD>
<TITLE> 부분링크 관련 스타일시트 </TITLE> <style type="text/css"> .myLinkStyle { color:red;font-family:궁서체; } a.myLinkStyle:visited { color:black; </style> </HEAD> <BODY> <a href="#">일반링크</a> <br> <a href="#" class="myLinkStyle">부분링크</a> </BODY> </HTML>

스크롤바 관련 스타일 <HTML> <HEAD>
<TITLE> 스크롤바 관련 스타일시트 </TITLE> <style type="text/css"> body { scrollbar-3dlight-color:aqua; scrollbar-arrow-color:aqua; scrollbar-base-color:darksalmon; scrollbar-darkshadow-color:blue; scrollbar-face-color:chartreuse; scrollbar-highlight-color:lightsalmon; scrollbar-shadow-color:magenta; } </style> </HEAD> <BODY> <h3>스크롤바 색상 정의</h3> <textarea rows="5" cols="5"></textarea> </BODY> </HTML>

목록 관련 스타일 <HTML> <HEAD>
<TITLE> 목록 관련 스타일시트 </TITLE> </HEAD> <BODY> <ul type="square" style="list-style-type:decimal;"> <li>HTML4.0</li> <li>CSS2.0</li> <li>JavaScript1.2</li> </ul> </BODY> </HTML>

머리 기호나 번호의 형식 변경 list-style-type : 형식 Type Description disc
검은 원형 모양으로 설정 circle 흰 원형 모양으로 설정 square 사각형 모양으로 설정 decimal 1부터 시작하는 10진수 숫자로 설정 lower-roman 로마자 소문자 upper-roman 로마자 대문자 lower-alpha 알파벳 소문자 upper-alpha 알파벳 대문자 none 마크를 표시하지 않음

이미지 관련 스타일 <HTML> <HEAD>
<TITLE> 이미지 관련 스타일시트 </TITLE> <style type="text/css"> img {float:left;}/*이미지 배치 관련 속성 정의*/ .myClear {clear:left;}/*이미지 배치 관련 속성 정의 해제*/ </style> </HEAD> <BODY> <img src="../HTML/images/mybook.jpg"> 스타일시트를 사용해서 이미지 옆에 텍스트를 배치하고자 할 때 사용하는 속성 : Float <hr> 스타일시트를 사용해서 <span class="myClear">이미지 옆에 텍스트를 배치를 해제하고자 할 때 사용하는 속성 : Clear</span> <TABLE border="0"> <TR> <TD><img src="../HTML/images/mybook.jpg"> </TD> <TD valign="top">일반적으로 border=0의 테이블을 사용해서 텍스트 및 이미지 정렬</TD> </TR> </TABLE> </BODY> </HTML>

float, clear 속성 float 속성 : 배치할 위치 clear 속성 : 해제 방향
float 속성은 보통 이미지에 많이 사용한다. 이미지를 왼쪽이나 오른쪽에 떠다니도록 하면, 이미지 다음에 나오는 문자열이 이미지를 둘러싸고 나오게 된다. HTML에서는 그림 옆에 문자열을 넣을 경우, 항상 한 줄만 나오고, 나머지는 그림 아래로 내려가게 된다. float : left / right / none clear 속성 : 해제 방향 지정한 방향에는 떠다니는 box가 자리할 수 없음을 나타낸다. 즉, clear의 값을 both로 하면, 해당 element box의 좌우에는 떠다니는 box가 올 수 없다. 따라서, 떠다니는 box의 다음 줄로 내려가게 된다. clear : none / left / right / both

주요 스타일시트 속성 ※ 주요 스타일시트 속성 리스트 color : 글자색(전경색) font-size : 크기
font-family : 글꼴 font-weight : <b> font-style : <i> line-height : 줄간격 text-decoration : 텍스트장식(밑줄,관통선,윗줄) text-align : 텍스트수평정렬 vertical-align : 수직정렬 text-transform : 첫자대문자, 모두대문자, 모두소문자 text-indent : 들여쓰기 width : 가로(모든 객체) height : 세로(모든 객체) padding : 안쪽여백 margin : 바깥쪽여백 letter-spacing : 문자간격 word-spacing : 단어간격 border : 테두리(외곽선;color,width,style) background-color : 배경색 background-image:url() : 배경이미지 background-repeat : 배경이미지 반복 여부 background-position : 배경이미지 위치 background-attachment : 배경이미지 고정 여부 cursor : 커서 모양 a:link : 기본링크 a:visited : 방문링크 a:active : 활성링크 a:hover : 마우스오버링크 scrollbar : 스크롤바모양 list-style-type : 리스트모양 float : 이미지/텍스트 배치 설정 clear : 이미지/텍스트 배치 설정 해제

스타일시트 종합(계속) : /Root/Global.css
/* Park Yong Jun's css */ /* [1] 링크 색상 정의 */ a:link /* 기본 링크 정의 */ { font-family:verdana; font-size:11px; color:navy; text-decoration:none; } a:visited /* 방문 링크 정의 */ a:active /* 활성 링크 정의 */ font-family:verdana; font-size:11px; color:red; text-decoration:none; a:hover /* 마우스 오버 링크 정의 */ font-family:verdana; font-size:11px; color:#0000ff; text-decoration:underline;

/* [2] 사용자 정의 스타일 */ .button { height:20px; border-width:1; border-style:ridge; border-color:#d0d0d0; background-color:#dfdfdf; } .editbox border:1 solid black; background-color:white; .my_border1 background:;border-top:0 dashed ;border-left:0 dashed ; border-right :0 dashed ;border-bottom:1 dashed black ; .my_border2 background:;border-top:1 dashed ;border-left:1 dashed ; border-right :1 dashed ;border-bottom:1 dashed

/* [3] body 스타일 정의 */ body { background-color:white; margin-left:0px; margin-right:0px; font-family:verdana; color:#001960; /* 스크롤바 색상 정의 */ scrollbar-face-color: #ffffff; scrollbar-highlight-color: #3874c8; scrollbar-shadow-color: #3874c8; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #3874c8; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #ffffff }

/* [4] 기본 태그 스타일 정의 */ p,br,body,table,td,input,select,textarea,option,font { font-family:verdana; font-size:11px; font-style:normal; } select background-color:white;font-family:verdana; font-size:11px; font-style:normal; /* [5] 테이블 스타일 정의 */ #my_table1 border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:black; border-bottom-color:black; border-right-color:black; border-left-color:black; border-bottom-style:solid; border-left-style:solid; border-right-style:solid;

스타일시트 축약형 속성(CSS shorthand properties)
폰트 관련 font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif font: 1em/1.5em bold italic serif

스타일시트 축약형 속성(계속…) 배경 관련 background-color: #fff;
background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; background: #fff url(image.gif) no-repeat top left

스타일시트 축약형 속성(계속…) 리스트 관련 list-style: #fff; list-style-type: disc;
list-style-position: outside; list-style-image: url(image.gif) list-style: disc outside url(image.gif) /*IE, no images*/

스타일시트 축약형 속성(계속…) 여백(Margin & padding) 관련 : Four different values
margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-left: 4px margin: 2px 1px 3px 4px (<EM>top, right, bottom, left</EM>)

스타일시트 축약형 속성(계속…) 여백(Margin & padding) 관련 : Three different values
margin-top: 5em; margin-right: 1em; margin-bottom: 3em; margin-left: 1em margin: 5em 1em 3em (top, right and left, bottom)

스타일시트 축약형 속성(계속…) 여백(Margin & padding) 관련 : Two different values
margin-top: 5%; margin-right: 1%; margin-bottom: 5%; margin-left: 1% margin: 5% 1% (top and bottom, right and left)

스타일시트 축약형 속성(계속…) 여백(Margin & padding) 관련 : One different values
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0 margin: 0 (top, bottom, right and left)

레이어(Layer) : <div style=“position:absolute” />
HTML 문서(Document)상의 또 다른 문서(객체) 레이어 관련 주요 속성 position : 그리드레이아웃(absolute), 플로우레이아웃(static) z-index : int(레이어 순서) visibility : 보임(visible)/숨김(hidden) display : 레이어 감추기 : display:none; overflow : 스크롤(visible, hidden, scroll, auto)

스타일시트로 레이어 만들기 : 외부 참조 외부 참조 방식로 레이어 만들기 <html> <head>
<title>10</title> <style type="text/css"> #myLayer1 {position:absolute;top:100px;left:100px;} #myLayer2 {position:absolute;top:150px;left:150px;} </style> </head> <body MS_POSITIONING="FlowLayout"> <form id="Form1" method="post" runat="server"> <div id="myLayer1">첫번째 레이어</div> <div id="myLayer2">두번째 레이어</div> </form> </body> </html>

Position, Direction 속성 하나의 element에 할당되는 box가 브라우저 화면에서 어떻게 배열될 것인지를 정한다. { position : absolute or relative or static or fixed } {direction : ltr or rtl}

절대 좌표 : Absolute positioning
Absolute positioning은 reference box를 기준으로 상하좌우로 위치를 이동시킨다. Reference box란, 현재 만들고 있는 문서의 가장 상위 element가 차지하는 영역을 말한다. HTML에서는 HTML element의 영역을 말하는데, 보통 브라우저 화면 크기라고 생각해도 된다. 만약, 부모 element가 absolute positioning에 의해 위치가 정해졌다면, 자식 element에 absolute positioning을 적용할 때는 부모 element의 box를 기준으로 위치를 잡게 된다. Absolute positioning을 하게 되면 margin은 없어지고, padding과 border만 남게 된다. top : 길이 or 퍼센트 or auto Left / right / bottom

상대 좌표 : Relative positioning
Block-level이나 inline layout에 의해 위치가 결정되면, 이 위치를 기준으로 box를 상하좌우로 이동시킬 수 있다. 이것을 상대적 배열(relative positioning)이라고 한다. 이동시키는 정도는 top, left, bottom, right 속성으로 지정할 수 있다. Box의 위치를 이동시킨다고 해서 다음에 나오는 형제자매 element의 위치가 함께 이동되는 것은 아니다. 따라서, 상대적 배열을 이용하면, element box들이 서로 겹쳐지는 효과를 가져올 수 있다.

스타일시트로 레이어 만들기 : 인라인 인라인 방식으로 레이어 만들기 <div id="myLayer1" style= "
position:absolute; left:50px; top:50px; width:100px; height:100px; z-index:1; > 레이어 </div>

Z-index 속성 여러 개의 element가 서로 상하로 겹치게 만들 수 있는 속성이다.
Position 속성의 값이 absolute나 relative인 element에 적용된다. 초기값은 auto이다. auto : 쓴 순서대로 쌓인다. z-index가 0인 것과 같다. 숫자 : 숫자가 낮은 element가 밑으로 간다.

Overflow 속성 Overflow 속성
Box를 벗어나는 content가 있을 때 Position 속성의 값이 absolute인 element에 적용된다. visible : 크기에 관계없이 내용을 모두 보여준다. hidden : 해당 element에 할당된 공간에 들어가는 내용만 보여주고, 나머지는 자른다. Padding과 border는 할당된 공간의 크기에 맞춰서 나타난다. auto : 할당된 공간의 크기 이상이 되면 스크롤바를 나타낸다. scroll : 언제나 스크롤바를 나타낸다.

Visible속성 Visible 속성 Element box가 실제로는 존재하지만 화면에는 보이지 않도록 할 수 있다.
visible : inherit / visible / hidden

단 나누기 잡지처럼 여러 개의 단으로 나뉘어진 문서를 만들 수 있도록 한다. 형식:
columns : 길이 or 숫자 or 퍼센트 column-gap : 길이 or 퍼센트

인쇄 관련 스타일 속성 인쇄시 페이지 바꿈 지정 속성 page-break-before:always
H태그와 같은 제목 앞에서 페이지 바꿈 page-break-after:always Table태그와 같은 표 뒤에서 페이지 바꿈

감사합니다 닷넷코리아를 찾아주신 모든 분께 깊은 감사의 인사를 드립니다.
감사합니다 닷넷코리아를 찾아주신 모든 분께 깊은 감사의 인사를 드립니다. Park Yong Jun (RedPlus) (

CSS2.0 (Cascading Style Sheet)

Similar presentations

Presentation on theme: "CSS2.0 (Cascading Style Sheet)"— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

CSS2.0 (Cascading Style Sheet)

Similar presentations

Presentation on theme: "CSS2.0 (Cascading Style Sheet)"— Presentation transcript:

Similar presentations

About project

지원