'.Net Project/CSS 2.0' 카테고리의 글 목록

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

2009. 7. 29. 18:56 .Net Project/CSS 2.0

CSS2.0 관련 속성정리

<CSS 2.0관련 속성 정리>

color : 전경색(Foreground Color)
background-color : 배경색
font-size : pt 단위 또는 px 단위,9pt, 11pt
font-family : 글꼴(글자모양), verdana,'맑은 고딕',font-family : "Malgun Gothic", verdana;
font-weight:bold; : 굵게
font-style:italic : 이텔릭체

text-decoration : 밑줄관련
noneline
underline
overline
line-through

width : 가로길이 / %단위 또는 px 단위표시
height : 세로길이

padding : 안쪽 여백
margin : 바깥쪽 여백

text-align : 수평 정렬
vertical-align : 수직 정렬
line-height : 줄 간격, 120%~150%
letter-spacing : 글자 간격, 0.5em 단위
word-spacing : 단어 간격

text-transform : 대소문자 구분
uppercase : 대문자로
loswercase : 소문자로
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:visit : 방문링크
a:active : 활성링크
a:hover : 오버링크
cursor : 커서
scrollbar-XXX
float : 배치 상애
clear : 배치 해제
list-style-type :리스트 모양
list-style-position : 들여쓰기 여부
list-style-image : 블릿 기호 이미지

position:relative; 레이어 위치
overflow:hidden; 레어어 자름

white-space:nowrap; Block Level Element에 적용되며, 글자사이의 공백을 처리
normal : 여러개의 공백을 하나로 만든다.
pre : 공백을 그대로 나타낸다.
nowrap : <BR> 요소Element 없이는 라인 랩Line Wrap을 허용하지 않는다.

z-index:5; 레이어 순서
left:100px ; 레이어X좌표
top:100px ; 레이어Y좌표

   visibility:hidden; 레이어 숨김
   display:block; 블록 완전 제거

'.Net Project > CSS 2.0' 카테고리의 다른 글

23장 레이아웃 스타일 (2)	2009.07.29
22장 태그로 레이아웃 설정 (1)	2009.07.29
21장 이미지 스타일 (0)	2009.07.29
20장 목록관련스타일 (0)	2009.07.29
18장 ScrollBarStyle (0)	2009.07.28

posted by Magic_kit

2009. 7. 29. 18:41 .Net Project/CSS 2.0

23장 레이아웃 스타일

→

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<div style="background-color:Red; width:100px ; height:100px;
position:relative; z-index:10; overflow:scroll; white-space:nowrap; ">
3번 영역(레이어) 안녕하세요 만나서 반갑습니다
</div>

<div id="five" style="background-color:Green; width:100px ;
      height :100px ;
      visibility:hidden;
      display:block;
      left:0px; top:50px ;">
5번 영역(레이어) </div>

<script type="text/javascript">

<input type="button"value="5번 레이어 보이기" onclick="ShowFive();" />

</body>
</html>

'.Net Project > CSS 2.0' 카테고리의 다른 글

CSS2.0 관련 속성정리 (1)	2009.07.29
22장 태그로 레이아웃 설정 (1)	2009.07.29
21장 이미지 스타일 (0)	2009.07.29
20장 목록관련스타일 (0)	2009.07.29
18장 ScrollBarStyle (0)	2009.07.28

posted by Magic_kit

2009. 7. 29. 18:30 .Net Project/CSS 2.0

22장 태그로 레이아웃 설정

↙

레이어(Layer) : <divstyle=“position:absolute” />

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

<!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>22.div 태그로 레이 아웃 설정</title>
    <style type="text/css">
    body{text-align:center; width:100% ; height:100%;}

   #header{width:770px;height:50px; background-color:Silver;border:groove 1px silver;
               padding:5px 5px 5px 5px; margin:5px 0px 0px 0px;}

    #left{width:180px;height:100px; background-color:Silver;border:groove 1px silver;
               padding:5px 5px 5px 5px; margin: 0px 1px 0px 0px; float:left;}

    #content{width:370px;height:100px; background-color:Silver;border:groove
                1px silver;padding:5px 5px 5px 5px; margin:0px 1px 5px 1px; float:left;}

    #right{width:180px;height:100px; background-color:Silver;border:groove 1px silver;
               padding:5px 5px 5px 5px; margin: 0px 0px 0px 1px; float:left;}

    #footer{clear:both;width:770px;height:50px; background-color:Silver;
         border:groove 1px silver;padding:5px 5px 5px 5px;
          margin:1px 0px 0px 0px; float:left}
    </style>

</head>
<body>
<table border="1" width="85%">
  <tr>
   <td colspan="3">Navigator</td>
  </tr>
  <tr>
   <td style="width:185px; height:100px;">Left</td>
   <td style="width:180px;">Left</td>
   <td style="width:180px; height:100px;">Right</td>
  </tr>
  <tr>
   <td colspan="3">Copyright HTML</td>
  </tr>
  </table>

<div id="header">Navigator</div>

<hr />

<div style="width:770px;">

<div id="footer">Copyright</div>
</div>

</body>
</html>

속성에 대한 설명 -------------------------------------------------------------

1. Position, Direction 속성
        : 하나의 element에 할당되는 box가 브라우저 화면에서 어떻게 배열될 것인지를 정한다.
          절대 좌표 : Absolute positioning
2. Absolute positioning은 reference box를 기준으로 상하좌우로 위치를 이동시킨다.
3. Reference box란, 현재 만들고 있는 문서의 가장 상위 element가 차지하는 영역을 말한다. 4. HTML에서는 HTML element의 영역을 말하는데, 보통 브라우저 화면 크기라고
   생각해도 된다.
5. 부모 element가 absolute positioning에 의해 위치가 정해졌다면,
   자식 element에 absolute positioning을 적용할 때는 부모 element의 box를
   기준으로 위치를 잡게 된다.
6. Absolute positioning을 하게 되면 margin은 없어지고, padding과 border만 남게 된다.
7. 상대 좌표 : Relative positioning Block-level이나 inline layout에 의해 위치가 결정되면,
                  이 위치를 기준으로 box를 상하좌우로 이동시킬 수 있다.
                  이것을 상대적 배열(relative positioning)이라고 한다.
8. 이동시키는 정도는 top, left, bottom, right 속성으로 지정할 수 있다. Box의 위치를
   이동시킨 다고 해서 다음에 나오는 형제자매 element의 위치가 함께 이동되는 것은 아니다.
   따라서, 상대적 배열을 이용하면, element box들이 서로 겹쳐지는 효과를 가져올 수 있다.

   Z-index 속성
       여러 개의 element가 서로 상하로 겹치게 만들 수 있는 속성이다.
       Position 속성의 값이 absolute나 relative인 element에 적용된다.
      초기값은 auto이다.

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

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

'.Net Project > CSS 2.0' 카테고리의 다른 글

CSS2.0 관련 속성정리 (1)	2009.07.29
23장 레이아웃 스타일 (2)	2009.07.29
21장 이미지 스타일 (0)	2009.07.29
20장 목록관련스타일 (0)	2009.07.29
18장 ScrollBarStyle (0)	2009.07.28

posted by Magic_kit

2009. 7. 29. 18:05 .Net Project/CSS 2.0

21장 이미지 스타일

<!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>21.이미지관련 스타일</title>
</head>
<body>

<img src="http://cfs.tistory.com/static/images/img_rss.gif"alt=""
style="float:left; "/>
안녕하세요. 반갑습니다.
<span style="clear:left; ">또 만나요.</span> 언제요??

</body>
</html>

'.Net Project > CSS 2.0' 카테고리의 다른 글

23장 레이아웃 스타일 (2)	2009.07.29
22장 태그로 레이아웃 설정 (1)	2009.07.29
20장 목록관련스타일 (0)	2009.07.29
18장 ScrollBarStyle (0)	2009.07.28
17장 LinkStyle (0)	2009.07.28

posted by Magic_kit

.Net Project & 재태크 재무 관리

calendar

Notice

Tag

Category

Recent Post

Recent Comment

Archive

My Link

'.Net Project/CSS 2.0'에 해당되는 글 23건

CSS2.0 관련 속성정리

'.Net Project > CSS 2.0' 카테고리의 다른 글

23장 레이아웃 스타일

'.Net Project > CSS 2.0' 카테고리의 다른 글

22장 태그로 레이아웃 설정

'.Net Project > CSS 2.0' 카테고리의 다른 글

21장 이미지 스타일

'.Net Project > CSS 2.0' 카테고리의 다른 글

티스토리툴바

.Net Project & 재태크 재무 관리

calendar

Notice

Tag

Search

Category

Recent Post

Recent Comment

Archive

My Link

'.Net Project/CSS 2.0'에 해당되는 글 23건

CSS2.0 관련 속성정리

'.Net Project > CSS 2.0' 카테고리의 다른 글

23장 레이아웃 스타일

'.Net Project > CSS 2.0' 카테고리의 다른 글

22장 태그로 레이아웃 설정

'.Net Project > CSS 2.0' 카테고리의 다른 글

21장 이미지 스타일

'.Net Project > CSS 2.0' 카테고리의 다른 글

티스토리툴바