티스토리 뷰

웹/HTML, CSS

[HTML,CSS]position 레이아웃

cll179 2018. 5. 26. 14:43

position 레이아웃

 

- 일반 배치나 float 배치는 소스 코드 나열 순과 브라우저 표시 순으로 연동하기 때문에 어느정도 제약이 따른다.

- position 속성을 이용하면 순서에 상관없이 자유로운 레이아웃을 구성 할 수 있다.

- position은 표시 위치를 지정하는 방법을 나타내는 속성이며 디폴트값은 static이다.

- static은 일반 배치(여태 작성해온 방식)을 의미한다.

-이를 absolute(절대 배치)로 변경하면 프리 레이아웃이 가능해진다. 

 

절대 배치의 구조

- position : absolute;가 설정되면 그 콘텐츠는 기본 콘텐츠 배치의 흐름에서 벗어나 '기준 박스'를 지점으로 자유롭게 배치된다.

- 기본 배치때 표시될 영역이 없어지고 후속 콘텐츠로 채워진다.

- 마치 보통 HTML 위에 투명한 레이어를 한 장을 늘리고 그 위에 콘텐츠를 겹쳐 표시하는 듯한 상태가 되는 것이다.

 

*적용 전

 

*적용 후

 

*소스 코드

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>
  <style>
  #wrap{
        width:500px;
        padding:10px;
        margin:30px auto;
        background-color:#ccc;
  }
  p{
       margin-bottom:10px;
        background-color:#fff;
  }
/*절대배치 콘텐츠*/
  #pos{
      background:#f00;
      padding:10px;
      width:15px;
      position:absolute;
  }
  </style>
</head>
<body>
  <div id="wrap">
    <p>
      콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1
    </p>
    <p id="pos">
      절대배치
    </p>
    <p>
      콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2
    </p>
  </div>
</body>
</html>
 cs

 

- right, top, left, bottom 속성을 사용해 표시 위치를 지정할 수 있다. 단, position 값이 static인 경우 불가능하다.

 

*ex)

1
2
3
4
5
6
7
8
#pos{
      background:#f00;
      padding:10px;
      width:15px;
      position:absolute;
    right:0;
    bottom:0;
  }
 cs

 

기준 박스 변경하기

- 기준박스를 명시하지 않을 경우, 자동으로 body 요소 = 윈도우창이 기준박스가 된다.

- 기준 박스는 절대 배치하는 요소의 부모 요소이며 position 속성의 값이 relative이어야 한다.

1
2
3
4
5
6
7
#wrap{
        width:500px;
        padding:10px;
        margin:30px auto;
        background-color:#ccc;
    position:relative;
  }
 cs

 

- 기준 박스 바깥쪽에 절대 배치를 하려면 마이너스(-) 좌표를 지정해주면 된다.

- 기준 박스 뒤에 배치하기 위해 z-index:-1;이라 지정하면 된다.

 

1
2
3
4
5
6
7
8
9
#pos{
      background:#f00;
      padding:10px;
      width:15px;
      position:absolute;
    right:-30px;
    bottom:0;
    z-index: -1;
  }

cs

 

상대 배치

- position : relative;를 설정하면 설정된 영역의 본래의 위치를 기준으로 해서 위치가 정해진다.

- 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
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
  <style>
  #wrap{
          width:500px;
          padding:10px;
          margin:30px auto;
          background-color:#ccc;
  }
  p{
      background-color:#fff;
  }
  .left{
      width:400px;
      margin-bottom:10px;
      float:left;
  }
  .right{
      width:100px;
      height:100px;
      background-color:#f00;
      float:right;
    position:relative;
    right:-30px;
    top:0;
  }
  .clear{
      clear:both;
  }
  </style>
</head>
<body>
  <div id="wrap">
    <p class="left">
      콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1
    </p>
    <p class="right">
      상대배치
    </p>
    <p class="clear">
      콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2
    </p>
  </div>
</body>
</html>
 
 cs

 

고정 배치

- position:fixed;는 absolute처럼 절대 배치로 콘텐츠를 배치 할 수 있다.

- 단 body 요소(브라우저 화면)가 기준이 되고, 콘텐츠를 스크롤해도 윈도우 안의 계속 같은 자리에서 움직이지 않는다는 점이 차이점이다.

 

*적용 후

 

*소스 코드

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
43
44
<!DOCTYPE html>
<html>
<head>
  <style>
  #wrap{
          width:500px;
          padding:10px;
          margin:30px auto;
          background-color:#ccc;
  }
  p{
      background-color:#fff;
  }
  .cont1 .cont2{
      width:400px;
      margin-bottom:10px;
  }
  .pos{
    width:100%;
    padding:0;
      background-color:#f00;
    position:fixed;
    bottom:0;
    left:0;
  }
  </style>
</head>
<body>
  <div class="pos">
    고정배치
  </div>
  <div id="wrap">
    <p class="cont1">
      콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1 콘텐츠 영역1
    </p>
    <p class="cont2">
      콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2 콘텐츠 영역2
    </p>
  </div>
</body>
</html>
 
 cs

 

- 꼭 bottom : 0, left : 0 속성을 부여 해야한다.

 

참고 서적 : HTML5 & CSS3 웹 표준 디자인 강좌.영진닷컴


※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

저작자표시 비영리 변경금지

'웹 > HTML, CSS' 카테고리의 다른 글

[CSS] transition 및 transform  (0) 2018.07.27
[HTML,CSS]float 레이아웃  (0) 2018.05.22
[CSS]미디어 쿼리  (0) 2018.01.23
[CSS]그리드  (1) 2018.01.23
[CSS]박스 모델  (0) 2018.01.22
댓글