티스토리 뷰

DEVELOPE/CSS

CSS DIV 속성 position

소찾나 2017. 10. 27. 08:47
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

CSS DIV 속성 position

CSS DIV 속성 position

CSS[스타일시트] DIV 속성 position


DIV 태그는 division 의 줄임말로 html 문서에서 화면 분할, 레이아웃 등을 잡는 태그로 사용된다.


웹표준에서는 <TABLE> 태그대신 <DIV> 태그를 이용하여 작성하게된다. 그렇다고 <TABLE> 테그가


웹표준에 어긋나는 것이 아니라 다만 용도에 맞게 제대로 사용되어지도록 처리되어지는 것이라 하겠다.


한번 알아보도록 하자


1 DIV 태그


<DIV> 태그는 한 문단에 CSS(스타일시트)를 적용시키기 위해 사용됩니다.


 속성

 설명

 STYLE

 CSS 속성을 연속적으로 설정할 수 있으며, 각 속성의 구분은 ; 세미콜론으로 구분한다.


2 position 속성


특정 위치에  배치시키기 위해서 사용되며, html 태그는 상대적인 좌표만 설정 할 수 있지만 position 속성의 absolute를 사용하면


절대적인 좌표에 이미지, 문장 등을 구성할수 있습니다.


 상수

 설명

 static

 일반적인 상태로 배치합니다 top, bottom, left, right 속성이 적용되지 않는다.

 relative

 상대적인 위치에 배치합니다.

 absolute

 절대적인 위치에 배치시키위해 사용됨

 fixed

 





이 position 이라는 속성은 좌표의 기준이 되는 시작점을 어디서부터 잡을 건지를 정하는 속성으로 위에서 처럼 static, absolute, relative, 


fixed 등으로 기준을 잡을 수 있습니다.


1 static

  

   기본값으로 값을 주지 않으면 position 의 기본값이 됨, 웹문서의 흐름을 방해하지 않고 위치한 지점에서 표현되며,

   

   top, left, right, bottom 등의 좌표값을 줄 수 없다.



2 absolute


   좌표의 시작점이 기준이 <body> 태그 아래에 있다면 <body> 태그를 기준으로 합니다. 좌표의 시작점의 기준이 부모


   div 태그에 있다면 부모 태그의 값이 position:static 이외에 값을 가지고 있다면 부모<vid>태그의 위치를 좌표의 시작


   점으로 하고 position:static 이라면 부모<div> 태그보다 상위의 기준을 따라갑니다


3 relative


   항상 부모<div>태그의 위치를 기준으로 시작점을 잡습니다. 부모<div> 가 없다면 <body> 에 시작점을 가집니다.


4 fixed


  absolute와 좌표의 시작점은 동일하다 하지만 absolute 는 스크롤이 생기는 반면 fixed 는 움직이지 않는다.




static 테스트 페이지


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
31
32
33
34
35
36
37
38
39
<!doctype html>
  <html>
  <head>
   <meta charset="utf-8">
   <title>CSS 테스트</title>
  <style type="text/css">
  /* position속성의 default값은 static임 */                                                                 
  #staticDiv1{ 
    background-color: #ff0000;
    position: static; 
    width: 300px;
    height: 100px;
    text-align:center;
  }
  #staticDiv2{ 
    background-color: #ffff00;
    position: static; 
    width: 300px;
    height: 100px;
    text-align:center;
  }
  #staticDiv3{ 
    background-color: #0000ff;
    position: static; 
    width: 300px;
    height: 100px;
    text-align:center;
  }
 
 
  </style>
  </head>
  <body>
 <div id="staticDiv1">staticDiv1</div>
 <div id="staticDiv2">staticDiv2</div>
 <div id="staticDiv3">staticDiv3</div>
  </body>
</html>
cs



CSS DIV 속성 position




absolute 테스트



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
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html>
  <html>
  <head>
   <meta charset="utf-8">
   <title>CSS 테스트</title>
  <style type="text/css">
                                                                                                           
  #parentDiv{ 
    background-color: gray;
    position: fixed;
    top: 100px;
    left: 100px; 
    width: 500px;
    height: 300px;
  }
  #absoluteDiv1{ 
    background-color: #333333;
    position: absolute;
    top: 50px;
    left: 50px; 
    width: 100px;
    height: 100px;
  }
  #absoluteDiv2{ 
    background-color: #000000;
    position: absolute; 
    top: 100px;
    left: 100px; 
    width: 100px;
    height: 100px;
  }
 
  </style>
  </head>
  <body>
 <div id="parentDiv">parentDiv
 <div id="absoluteDiv1">absoluteDiv1</div>
 <div id="absoluteDiv2">absoluteDiv2</div>
 </div>
  </body>
</html>
cs



CSS DIV 속성 position




이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^


'DEVELOPE > CSS' 카테고리의 다른 글

CSS 외각선 형식  (0) 2017.11.11
CSS 외부파일 불러오기  (0) 2017.10.27
CSS 폰트(Font) 글꼴속성  (0) 2017.10.26
CSS hover 사용법  (0) 2017.10.26
CSS margin / padding  (0) 2017.10.25
공유하기 링크
댓글