|
| 24. CSS 2.0관련 속성정리 (0) | 2009.07.29 |
|---|---|
| 23. 레이어의 다양한 속성 (0) | 2009.07.29 |
| 22. div태그로 레이아웃 설정하기 (0) | 2009.07.29 |
| 21. 이미지관련스타일 (0) | 2009.07.29 |
| 20. 리스트(목록)관련스타일 (0) | 2009.07.29 |
CSS2.0관련 속성 정리
- color : 전경색(Foreground Color)
- background-color : 배경색
- font-size : pt단위 또는 px단위, 9pt, 11px이 많이 쓰인다.
- font-family : 글꼴 - Verdada, '맑은 고딕'이 많이 쓰인다.
font-family : "Malgun Gothic", verdana;
- font-weight: bold; ==> 볼드체
- font-style:italic; ==> 이탤릭체
- text-decoration : 밑줄관련
none
underline
overline
line-through
- width : 가로길이, %단위 또는 px단위
- height : 세로길이
- padding : 안쪽 여백
- margin : 바깥쪽 여백
- text-align : 수평 정렬
left, center, right
- vertical-align : 수직정렬
top, middle, bottom
- line-height : 줄 간격, 120%~150%
- letter-spacing : 글자간격, 0.5em 단위
- word-spacing : 단어 간격
- text-transform : 대소문자구분
uppercase, lowercase, capitalize
- text-indent : 들여쓰기
- white-space : pre 또는 nobr 처리
- border : 테두리(외곽선)
- background-image:url(); ==> 배경 이미지(절대경로/상대경로)
- background-repeat : 배경 이미지 배치 여부(repeat, no-repeat, ...)
- background-position : 배치 상태(left bottom)
- background-attachment : 스크롤여부(scroll, fixed)
- a:link ==> 기본링크
- a:visited ==> 방문한 링크
- a:active ==> 활성 링크
- a:hover ==> 오버 링크(마우스포인터 해당 텍스트에 올렸을때)
- cursor : 마우스 커서 모양 정의
- scrollbar-XXX : 스크롤바 모양 정의(IE=Internet Explorer)전용
- float : 배치 설정(float:left;)
- clear : 배치 해제(clear:both;)
- list-style-type : 리스트 모양
- list-style-position : 들여쓰기 여부
- list-style-image : 불릿 기호 이미지
- position:absolute; ==> 레이어 위치(절대좌표)
- z-index:1; ==> 레이어 순서
- left:150px; ==> 레이어 X좌표
- top:150px; ==> 레이어 Y좌표
- overflow:hidden; ==> 레이어안의 데이터 배치(scroll, hidden)
- visibility:hidden; ==> 레이어 보이기/숨기기
- display:none; ==> 레이어 영역 없애기/남기기
| CSS로 레이아웃 잡기 관련 사이트 (0) | 2009.07.29 |
|---|---|
| 23. 레이어의 다양한 속성 (0) | 2009.07.29 |
| 22. div태그로 레이아웃 설정하기 (0) | 2009.07.29 |
| 21. 이미지관련스타일 (0) | 2009.07.29 |
| 20. 리스트(목록)관련스타일 (0) | 2009.07.29 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>레이어의 다양한 속성</title>
</head>
<body>
<div style="background-color:Red;width:100px;height:100px;
position:absolute;z-index:1;left:170px;top:170px;"> <!-- position, z-index, left, top은 짝꿍처럼 같이 쓰인다. -->
1번 영역(레이어)
</div>
<div style="background-color:Green;width:100px;height:100px;
position:absolute;z-index:0;left:100px;top:110px;">
2번 영역(레이어)
</div>
<div style="background-color:Blue;width:100px;height:100px;
overflow-y:scroll;white-space:normal;"> <!-- 'overflow'는 정해진 사이즈의 레이어(영역)를 초과하는 텍스트를 말함 -->
3번 영역 : 안녕하세요. 반갑습니다. 또 만나요...언제요?
</div>
<div style="background-color:Silver;width:100px;height:100px;
overflow:hidden;white-space:nowrap;"> <!-- 영역(레이어)만큼만 텍스트 보이게 함. 레이어 밖으로 나간 텍스트는 안보임. -->
4번 영역 : 안녕하세요. 반갑습니다. 또 만나요...
</div>
<div id="five" style="background-color:Yellow;width:100px;height:100px;
visibility:hidden; display:block;
">
5번 영역
</div>
<!-- 이 부분은 JavaScript 사용 : 동적인 기능 처리 -->
<script type="text/javascript">
function Showfive() {
if (document.getElementById("five").style.visibility != "visible") { /* != "visible" --> "안보이면", not의 의미이다 */
document.getElementById("five").style.visibility = "visible";
document.getElementById("five").style.display = "block";
}
else {
document.getElementById("five").style.visibility = "hidden";
document.getElementById("five").style.display = "none";
}
}
</script>
<input type="button" value="5번 레이어 보이기" onclick="Showfive();" /> <!-- 클릭시 Showfive함수 호출 -->
</body>
</html>
<!--
'1번영역'과 '2번영역'에서 position:absolute;z-index:1;left:170px;top:170px;를 보면
- absolute:절대좌표(웹 브라우저에 떠있는 형태로 바꿀 수 있음) / relative:상대좌표
- z-index : 레이어 포개는 순서
- left:170px;top:170px; ==> 가로로 170px, 세로로 170px 떨어져 있음
'3번영역'에서
- overflow-y:scroll; ==> 세로 스크롤바 생김. overflow만 쓰면 가로 세로 스크롤바 생김
- white-space:normal; ==> 영역(레이어)내부에서 텍스트가 아랫줄로 밀림
'4번영역'에서
- overflow:hidden; ==> 레이어 크기 만큼만 텍스트를 잘라 보여줌. 게시판 목록 레이아웃 시 많이 쓰임. 원래는 밑으로 밀려 내려오는게(=워드랩) 정상.
- white-space:nowrap; ==> nowrap(=no word rap). 텍스트가 아랫줄로 밀리는 현상 없앰. <nobr>태그와 같은 속성.
'5번영역'에서
- visibility:hidden; ==> 웹브라우저에 보이지는 않지만 영역(레이어)도 차지하고 있고, 레이어 안에 텍스트도 그대로 존재한다.
'hidden'대신 'visible'로 하면 레이어와 내부에 텍스트 모두 보인다.
- display:block; ==> 'display:none;'으로 하면 레이어와 안에 있는 텍스트가 모두 없어진다. 'block'으로 하면 visibility:hidden으로 해도
눈에는 보이지 않지만 영역(레이어)와 텍스트 모두 존재한다.
--->
< 실행결과 >
| CSS로 레이아웃 잡기 관련 사이트 (0) | 2009.07.29 |
|---|---|
| 24. CSS 2.0관련 속성정리 (0) | 2009.07.29 |
| 22. div태그로 레이아웃 설정하기 (0) | 2009.07.29 |
| 21. 이미지관련스타일 (0) | 2009.07.29 |
| 20. 리스트(목록)관련스타일 (0) | 2009.07.29 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div 태그로 레이아웃 설정</title>
<style type="text/css">
body { text-align:center; width:100%; height:100% }
#header {
width:770px; height:50px; background-color:Yellow; border:groove 1px silver;
padding: 5px 5px 5px 5px; margin:0px 0px 10px 0px;
} /* 770px ==> 좌우 스크롤바 안생기는 크기 */
#left {
width:180px; height:100px; background-color:Green; border:groove 1px silver;
padding: 5px 5px 5px 5px; margin:0px 10px 0px 0px;
float:left;
}
#content {
width:340px; height:100px; background-color:Green; border:groove 1px silver;
padding: 5px 5px 5px 5px; margin:0px 0px 0px 0px;
float:left;
}
#right {
width:180px; height:100px; background-color:Green; border:groove 1px silver;
padding: 5px 5px 5px 5px; margin:0px 10px 0px 10px;
float:left;
}
#footer {
clear:both;
width:770px; height:50px; background-color:Yellow; border:groove 1px silver;
padding: 5px 5px 5px 5px; margin:10px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="header">Navigator</div>
<div style="width:770px;text-align:center">
<div id="left">카테고리</div>
<div id="content">메인</div>
<div id="right">카테고리</div>
</div>
<div id="footer">Copyright</div>
<hr />
<!-- 여기는 table태그로 만들었음 -->
<table border="1" width="100%">
<tr>
<td colspan="3">Navigator</td>
</tr>
<tr>
<td style="width:185px;height:100px">Left</td>
<td>Content</td>
<td style="width:185px;height:100px">Right</td>
</tr>
<tr>
<td colspan="3" align="center">Copyright XHTML/CSS All right reserved.</td>
</tr>
</table>
</body>
</html>
<!--
- 위에서 <div>태그를 이용해서 테이블과 비슷한 레이아웃을 설정해 봄
- padding: 5px 5px 5px 5px; ==> '안쪽' 여백("상우하좌" 순서로 적용됨)
- margin:0px 0px 10px 0px; ==> '바깥쪽' 여백(아래쪽 여백만 10px 적용함)
-->
< 실행결과 >
| 24. CSS 2.0관련 속성정리 (0) | 2009.07.29 |
|---|---|
| 23. 레이어의 다양한 속성 (0) | 2009.07.29 |
| 21. 이미지관련스타일 (0) | 2009.07.29 |
| 20. 리스트(목록)관련스타일 (0) | 2009.07.29 |
| 18. 스크롤바관련스타일 (0) | 2009.07.28 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>이미지관련스타일</title>
</head>
<body>
<img src="./images/a.jpg" alt="" style="float:left;" />
안녕하세요.<br /> 반갑습니다.
<span style="clear:both;">또 만나요.</span> 언제요?
</body>
</html>
<!--
- 이미지 옆에 오는 텍스트는 스타일을 적용하지 않으면 한 줄만 보이는 게 기본 원리임. 웹브라우저를 줄여도 밀려 내려가면서 한 줄만 보임.
- <table>태그 대신 <div>/<span>태그로 웹사이트 레이아웃 잡을 때 float와 clear를 많이 쓴다.
- float : 이미지 "배치"할 '위치'(float으로 이미지가 배치되면 이미지 옆에 글씨 여러줄 올 수 있음.) - left(많이 쓴다.) / right / none : 변화없음(이미지 옆에 글씨 한줄만 옴)
- clear : float 해제(이미지 아래로 글씨 끌고(밀려) 내려간다.) - 방향 : both(많이 쓴다.) / left / right
-->
< 실행결과 >
| 23. 레이어의 다양한 속성 (0) | 2009.07.29 |
|---|---|
| 22. div태그로 레이아웃 설정하기 (0) | 2009.07.29 |
| 20. 리스트(목록)관련스타일 (0) | 2009.07.29 |
| 18. 스크롤바관련스타일 (0) | 2009.07.28 |
| 17. 링크관련스타일 (0) | 2009.07.28 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>리스트(목록)관련스타일</title>
</head>
<body>
<b>관심분야</b><br />
1. HTML4.0<br />
2. CSS2.0<br />
3. JavaScript1.2<br />
<hr />
<h3 style="font-size:12pt;">관심분야</h3> <!-- 검색엔진(로봇)은 header태그(h3)를 우선 검색한다. 위의 방법과 모양은 같으나 이 방법 사용을 권장함. -->
<ol style=" /* <ol>로 하던지 <ul>로 하던지 상관없음. list-style-type에서 목록모양을 정함 */
margin-left:25px; /* 왼쪽 여백 */
list-style-type:circle; /* circle값 대신 'none'으로 설정하면 목록그림이 안보인다. */
list-style-position:outside; /* 들여쓰기. 'inside'로 하면 더 안쪽으로 들여쓰기 된다 , margin-left를 더 많이 쓴다. */
list-style-image:url('http://www.dotnetkorea.com/pyjlove/images/point.gif'); /* 상대경로. 블릿기호 대신 원하는 image(모양)으로 대체할 수 있음. */
">
<li>C#</li> <!-- <li>태그 사이에 들어가는 아이템(텍스트)은 기본적으로 들여쓰기가 된다. -->
<li>ASP.NET</li>
<li>Silverlight</li>
</ol>
</body>
</html>
< 실행결과 >
| 22. div태그로 레이아웃 설정하기 (0) | 2009.07.29 |
|---|---|
| 21. 이미지관련스타일 (0) | 2009.07.29 |
| 18. 스크롤바관련스타일 (0) | 2009.07.28 |
| 17. 링크관련스타일 (0) | 2009.07.28 |
| 16. 커서관련스타일 (0) | 2009.07.28 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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-hightlight-color:lightsalmon;
scrollbar-shadow-color:megenta;
}
</style>
</head>
<body>
<textarea cols="40" rows="4"></textarea>
</body>
</html>
<!-- 스크롤바에 스타일적용은 윈도우 웹브라우저에서만 실행가능하다. -->
< 실행결과 >
| 21. 이미지관련스타일 (0) | 2009.07.29 |
|---|---|
| 20. 리스트(목록)관련스타일 (0) | 2009.07.29 |
| 17. 링크관련스타일 (0) | 2009.07.28 |
| 16. 커서관련스타일 (0) | 2009.07.28 |
| 15. 배경관련스타일 (0) | 2009.07.28 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>링크관련스타일</title>
<style type="text/css"">
a:link { color:Red; text-decoration:none; } /* 처음 방문 링크 */
a:visited { color:Black; text-decoration:overline; } /* 방문 후 */
a:active { color:White; background-color:Black; } /* 클릭할 때 */
a:hover { font-size:15pt; border:1px dotted red; } /* 마우스 오버시 */
</style>
</head>
<body>
<a href="http://www.nate.com/">네이트</a>
</body>
</html>
< 실행결과 >
| 20. 리스트(목록)관련스타일 (0) | 2009.07.29 |
|---|---|
| 18. 스크롤바관련스타일 (0) | 2009.07.28 |
| 16. 커서관련스타일 (0) | 2009.07.28 |
| 15. 배경관련스타일 (0) | 2009.07.28 |
| 14. 외곽선(테두리) (0) | 2009.07.28 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>커서≒마우스 포인터≒캐럿</title>
</head>
<body>
<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 />
</body>
</html>
< 실행결과 >
--> 마우스 포인터를 해당 텍스트에 갖다대면 해당되는 모양으로 변함.
| 18. 스크롤바관련스타일 (0) | 2009.07.28 |
|---|---|
| 17. 링크관련스타일 (0) | 2009.07.28 |
| 15. 배경관련스타일 (0) | 2009.07.28 |
| 14. 외곽선(테두리) (0) | 2009.07.28 |
| 13. 여백관련스타일 (0) | 2009.07.28 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>배경관련스타일</title>
</head>
<body>
<span style="background-color:Yellow;">배경</span><br />
<textarea cols="40" rows="10"
style="
background-color:Silver;
background-image:url('http://dotnetkorea.com/images/redplus_banner1.gif');
background-repeat:no-repeat;
background-position:right bottom;
background-attachment:fixed;
"></textarea>
</body>
</html>
<!--
- 상대경로 지정시 : url('./images/moon.jpg');
- 절대경로 지정시 : url('http://www.dotnetkorea.com/images/redplus.gif');
- background-repeat : repeat(반복), no-repeat(하나만 보여주기), repeat-x(가로로 반복),
repeat-y(세로로 반복)
- background-position : 원하는 위치 설정
- background-attachment : scroll(스크롤링) / fixed(스크롤 움직여도 고정)
-->
< 실행결과 >
| 17. 링크관련스타일 (0) | 2009.07.28 |
|---|---|
| 16. 커서관련스타일 (0) | 2009.07.28 |
| 14. 외곽선(테두리) (0) | 2009.07.28 |
| 13. 여백관련스타일 (0) | 2009.07.28 |
| 12. 텍스트관련스타일 (0) | 2009.07.28 |
CSS 2.0관련 속성정리.txt
23.레이어의 다양한 속성.htm