Orchemi

Orchemi

I start where others stop.

[CSS] 레이아웃에 영향을 주는 CSS 속성 ‘position’

작성:    

업데이트:

카테고리:

태그: , ,

position 속성

  • position 속성은 선택된 태그의 상태를 2차원 또는 3차원으로 지정
  • position 속성에는 static, fixed, relative, absolute 가 있다.
    각 속성값의 특징은 다음 세 가지 조건으로 확인 가능
  1. 부모 자식 간에 발생하는 마진 병합 현상 유무
  2. top, right, bottom, left 속성 적용 유무
  3. 부모가 높이를 갖고 있지 않을 때 자식의 높이가 부모의 높이에 영향을 주는지 유무


< 2차원 특징을 갖는 position 속성값 >

  • 부모 자식 간에 마진 병합 현상 발생
  • top/right/bottom/left 속성 사용 불가
  • 자식의 높이가 부모의 높이에 영향을 미침


< 3차원 특징을 갖는 position 속성값 >

  • 부모 자식 간에 마진 병합 현상 X
  • top/right/bottom/left 속성 사용 가능
  • 자식의 높이가 부모의 높이에 영향 X


가. static 속성값

  • 2차원 세계의 속성값
    • 부모 자식 간에 마진 병합 현상 발생
    • top/right/bottom/left 속성 사용 불가
    • 자식의 높이가 부모의 높이에 영향을 미침
*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>static 속성값</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="position_static_parent">
      <div id="position_static_child"></div>
    </div>
  </body>
</html>

* css 파일 #position_static_parent {
  width: 500px;
  height: 500px;
  background-color: yellow;
}

#position_static_child {
  position: static;
  width: 200px;
  height: 200px;
  background-color: blue;

  /* static 속성값에 margin-top 속성을 
       함께 사용하면 마진 병합 현상 발생 */
  margin-top: 100px;
}


margin과 padding 속성 외에 좌표를 지정하는 속성에는 top, right, bottom, left 속성이 있다. 만약 margin-/padding- 이 아닌 이 속성들은 어떨까?

* css 파일 #position_static_parent {
  width: 500px;
  height: 500px;
  background-color: yellow;
}

#position_static_child {
  position: static;
  width: 200px;
  height: 200px;
  background-color: blue;

  /* margin-top: 100px; */
  /* static 속성값과 top 속성은 함께 사용할 수 없음 */
  top: 100px;
}

결과는 top 속성이 적용되지 않고 어떠한 변화도 없다. 이를 통해 static 속성값은 top/right/bottom/left 속성과 함께 사용할 수 없다는 것을 알 수 있다.


만약 부모의 높이가 없다면?

* css 파일 #position_static_parent {
  width: 500px;
  /* static 속성값은 부모의 높이에 영향을 줄 수 있다. */
  /* height: 500px; */
  background-color: yellow;
}

#position_static_child {
  position: static;
  width: 200px;
  height: 200px;
  background-color: blue;

  /* margin-top: 100px; */
  /* top: 100px; */
}

실행 결과 부모의 높이 자체는 없으나, 자식의 높이(height)인 200px 만큼 자동으로 벌어져 존재한다.

  • 모든 HTML 태그는 기본적으로 position: static 상태이다.


나. fixed 속성값

  • 3차원 세계의 속성값
    • 부모 자식 간에 마진 병합 현상 X
    • top/right/bottom/left 속성 사용 가능
    • 자식의 높이가 부모의 높이에 영향 X
*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>fixed 속성값</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="box1"></div>
    <div id="position_fixed_parent">
      <div id="position_fixed_child"></div>
    </div>
    <div id="box2"></div>
  </body>
</html>

* css 파일 #box1 {
  width: 500px;
  height: 200px;
  background-color: gray;
}

#position_fixed_parent {
  width: 500px;
  height: 500px;
  background-color: yellow;
}

#position_fixed_child {
  /* fixed 속성값은 선택된 태그를 화면에 고정 */
  position: fixed;
  width: 200px;
  height: 200px;
  background-color: blue;
}

#box1 {
  width: 500px;
  height: 200px;
  background-color: pink;
}

위의 css 문서에 의하면 회색 박스와 핑크색 박스가 위아래로 위치한, 노란색 박스의 왼쪽 상단에 파란색 박스가 위치한다.

이때 css 문서의 position_fixed_child 의 속성값에 다음과 같이 margin-top: 100px; 를 넣어 적용해보자.

#position_fixed_child {
  /* fixed 속성값은 선택된 태그를 화면에 고정 */
  position: fixed;
  width: 200px;
  height: 200px;
  background-color: blue;
  margin-top: 100px;
}

실행결과 fixed 속성값은 3차원 세계의 속성값으로, 부모자식 간의 마진 병합 현상이 일어나지 않아, 파란색 박스만 독립적으로 아래로 100px만큼 이동한다.

만약 가. static 속성값이었다면 부모자식 간의 마진 병합 현상으로, 부모인 노란색 박스까지 아래로 이동해 회색 박스와 노란색 박스 간 100px의 공백이 생길 것이다.

fixed 속성값은 top/right/bottom/left 속성과 함께 사용할 수 있다.

#position_fixed_child {
  position: fixed;
  width: 200px;
  height: 200px;
  background-color: blue;
  top: 100px;
}

위의 css 문서대로라면, 브라우저의 상단에서 100px 하단에서 파란색 박스가 위치하고 있을 것이다.

margin-top : 최초 파란색 박스가 생성된 지점을 기준으로 좌표 설정
top : 브라우저 왼쪽 상단을 좌표 기준점으로 설정


만약 부모의 높이가 없다면?

#position_fixed_parent {
  width: 500px;
  /* fixed 속성값은 부모의 높이에 영향을 줄 수 없다. */
  /* height: 500px; */
  background-color: yellow;
}

이 경우, 노란색 박스(parent)는 사라진다. static 속성값에서 부모의 높이가 없는 경우 자식의 높이의 영향을 받아 200px 의 높이가 설정된 반면, fixed 속성값은 자식의 높이와 관계없이 노란색 박스의 높이는 0px 이다.


다. relative 속성값

  • 2차원과 3차원 세계의 속성값
    • 부모 자식 간에 마진 병합 현상 발생
    • top/right/bottom/left 속성 적용
    • 자식의 높이가 부모의 높이에 영향을 미침
*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>relative 속성값</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="box1"></div>
    <div id="position_relative_parent">
      <div id="position_relative_child"></div>
    </div>
  </body>
</html>

* css 파일 #box1 {
  width: 500px;
  height: 500px;
  background-color: gray;
}

#position_relative_parent {
  width: 500px;
  height: 500px;
  background-color: yellow;
}

#position_relative_child {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: blue;

  /* relative 속성값에 margin-top 속성을 
       함께 사용하면 마진 병합 현상 발생 */
  margin-top: 100px;
}

위의 css 문서 실행 결과, 회색 박스(box1) 아래에 노란색 박스(parent)가 100px 의 공백을 두고 위치한다. 노란색 박스 안의 왼쪽 상단에는 파란색 박스(child)가 위치한다.

만약 margin-top 속성을 top 속성으로 바꾸면, 어떻게 될까?

* css 파일 #position_relative_child {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: blue;

  /* margin-top: 100px; */
  top: 100px;
}

위의 css 문서 실행 결과, 노란색 박스 상단에서 100px 아래로 떨어진 곳에 파란색 박스가 위치한다. 즉, fixed 속성값과 달리 파란색 박스가 생성된 최초 위치를 기준으로 좌표가 설정되는 것이다.


만약 부모의 높이가 없다면?

#position_relative_parent {
  width: 500px;
  /* relative 속성값은 부모의 높이에 영향을 준다. */
  /* height: 500px; */
  background-color: yellow;
}

#position_relative_child {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: blue;

  /* margin-top: 100px; */
  /* top: 100px; */
}

이 경우, 노란색 박스(parent)가 파란색 박스(child) 옆에 위치한다. static 속성값처럼 부모의 높이가 없는 경우 자식의 높이의 영향을 받아 200px 의 높이가 설정된 것이다.


라. absolute 속성값

  • 3차원 세계의 속성값
    • 부모 자식 간에 마진 병합 현상 X
    • top/right/bottom/left 속성 사용 가능
      ※ 부모의 position 상태에 따라 좌표 기준점 달라짐
    • 자식의 높이가 부모의 높이에 영향 X
*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>absolute 속성값</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="box1"></div>
    <div id="position_absolute_parent">
      <div id="position_absolute_child"></div>
    </div>
  </body>
</html>

* css 파일 #box1 {
  width: 500px;
  height: 200px;
  background-color: gray;
}

#position_absolute_parent {
  width: 500px;
  height: 500px;
  background-color: yellow;
}

#position_absolute_child {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: blue;

  /* 마진 병합 현상이 일어나지 않는다. */
  margin-top: 100px;
}

위의 css 문서 실행 결과, 노란색 박스 상단에서 100px 아래로 떨어진 곳에 파란색 박스가 위치한다. 파란색 박스가 생성된 최초 위치를 기준으로 좌표가 설정되는 것이다.


margin-top 이 아니라 top 속성값이라면 어떨까?

* css 파일 #position_absolute_child {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: blue;

  /* margin-top: 100px; */
  /* 브라우저 왼쪽 상단을 기준으로 top 속성 적용 */
  top: 100px;
}

위의 css 문서 실행 결과, 노란색 박스 상단에서 100px 위로 떨어진 곳에 파란색 박스가 위치한다. 브라우저 왼쪽 상단을 기준으로 top 속성이 적용되는 것이다.

absolute 속성값을 fixed 속성값과 비교한다면, 둘다 top/right/bottom/left 의 경우 브라우저 왼쪽 상단을 기준으로 적용된다. 하지만 absolute 속성값의 경우 부모 태그의 position이 static이라면 브라우저 왼쪽 상단을 좌표의 기준점으로 삼지만, 부모 태그의 position이 relative 속성값이라면 좌표 기준점이 부모로 바뀐다. 

* css 파일 #box1 {
  width: 500px;
  height: 200px;
  background-color: gray;
}

#position_absolute_parent {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: yellow;
}

#position_absolute_child {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: blue;

  /* 마진 병합 현상이 일어나지 않는다. */
  margin-top: 100px;
}

위와 같은 경우, 파란색 박스는 노란색 박스의 왼쪽 상단에서 100px 아래에 위치하는 것이다. margin-top과 top 속성이 동일한 결과를 출력하는 것이다.


만약 부모의 높이가 없다면?

#position_absolute_parent {
  width: 500px;
  /* absolute 속성값은 부모의 높이에 영향을 주지 않는다. */
  /* height: 500px; */
  background-color: yellow;
}

#position_absolute_child {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: blue;

  /* margin-top: 100px; */
  /* top: 100px; */
}

이 경우, 노란색 박스(parent)가 존재하지 않는다.

position 주요 속성값 차원 부모 자식 간에 발생하는
마진 병합 현상		 top, right, bottom, left 적용 자식의 높이 값이 부모에게 미치는 영향
static 2차원 O X O
fixed 3차원 X O X
relative 2차원, 3차원 O O O
absolute 3차원 X O X

댓글남기기

참고