5. position 속성 -바닥부터 시작하는 CSS-

이전 다음 2024.5
일	월	화	수	목	금	토
			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

2016. 12. 24. 09:59 from COMPUTER/CSS

5. position 속성

css를 이용해서 각각의 박스를 배치하는 방식에는 일반적인 상황에서 배치되는 Normal-flow 방식, 앞서 공부한 float 상태에서의 배치 방식, 그리고 position으로 배치되는 방식, 이렇게 세 가지로 나눌 수 있습니다.

position 속성에 적용되는 값은 static, relative, absolute, fixed, inherit가 있습니다.

1) static

static값은 Position 속성 값으로 아무 것도 지정하지 않았을 때 default 값으로 사용됩니다. 이 경우 일반적인 normal-flow에 따라서 각각의 요소들을 배치하게 됩니다.

static을 사용하게 되면 자식 요소에 absolute를 적용한다 하더라도 원하는 대로 배치되지 않게 됩니다.

static을 사용하는 경우에는 top, left, right, bottom과 같은 속성에 값을 줘도 아무런 변화가 없습니다.

예 5-1
<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .div1 {
    background-color: pink;
    top: 30px;
  }
  .div2 {
    background-color: cyan;
  }
</style>
<body>
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</body>

예 5-1
<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .div1 {
    background-color: pink;
    top: 30px;
  }
  .div2 {
    background-color: cyan;
  }
</style>
<body>
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</body>

<body>태그에 margin을 0으로 주면 브라우저에서 기본적으로 적용되는 마진 값을 없애서 화면에 출력되는 객체가

브라우저 창의 좌, 상단에 딱 붙어서 출력됩니다.

position의 좌표 속성을 좀 더 정확히 확인하기 위해서 이렇게 margin 값을 0으로 지정했습니다.

div1과 div2는 특별한 position 값이 없으므로 기본 값인 static으로 지정됩니다.

static 이므로 top: 30px;를 적용했지만 아무런 영향이 없이 그냥 block 요소의 normal-flow대로 출력되어 버립니다.

2) absolute

absolute는 relative와 마찬가지로 좌표 값을 사용하지만, absolute 값을 갖는 객체는 공중에 떠있는 부유 상태라서 다른 객체에는 영향을 끼치지 않고 단독적으로 위치를 잡을 수 있습니다.

예 5-2
<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .div1 {
    background: pink;
    position: absolute;
    top: 50px;
    left: 50px;
  }
  .div2 {
    background: cyan;
  }
</style>
<body>
  <div class="div1">absolute 속성의 div1</div>
  <div class="div2">div2</div>
</body>

예 5-2

<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .div1 {
    background: pink;
    position: absolute;
    top: 50px;
    left: 50px;
  }
  .div2 {
    background: cyan;
  }
</style>
<body>
  <div class="div1">absolute 속성의 div1</div>
  <div class="div2">div2</div>
</body>

div2는 div1이 없는 것처럼 배치됩니다.

div1이 먼저 배치되었는데 div2의 위에 있는 이유는 div1의 position 속성이 static이고, 이 경우 z-index속성 값은 auto입니다.

auto는 부모의 z-index값을 상속받는데, 최상위 태그의 z-index값은 0 이고 이것을 물려받는 div2의 z-index값도 0이 됩니다.

position속성이 absolute인 경우 z-index 기본 값은 1이 됩니다. 따라서 div1의 z-index값이 1이 되어 div1보다 큰 값을 가지므로 div1이 div2를 덮게 됩니다.

absolute 값을 갖는 객체는 좌표 값에만 영향을 받으므로 float 속성을 선언해도 소용이 없습니다.

예 5-3
<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .div1 {
    background: pink;
    position: absolute;
    float: left;
    top: 50px;
    left: 50px;
  }
  .div2 {
    background: cyan;
  }
</style>
<body>
  <div class="div1">absolute 속성의 div1</div>
  <div class="div2">div2</div>
</body>

예 5-3

<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .div1 {
    background: pink;
    position: absolute;
    float: left;
    top: 50px;
    left: 50px;
  }
  .div2 {
    background: cyan;
  }
</style>
<body>
  <div class="div1">absolute 속성의 div1</div>
  <div class="div2">div2</div>
</body>

absolute 값을 갖는 객체는 자신의 부모 객체가 static이 아닌 값을 가진 경우, 즉 relative, absolute, fixed 값을 가진

부모 객체의 위치를 기준으로 삼습니다.

예 5-4
<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .container1 {
    width: 150px;
    height: 150px;
    background: pink;
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .container2 {
    width: 150px;
    height: 150px;
    background: lime;
    position: relative;
    top: 10px;
    left: 170px;
  }
  .container3 {
    width: 150px;
    height: 150px;
    background: cyan;
    position: fixed;
    top: 10px;
    left: 330px;
  }
  .div1 {
    background: yellow;
    position: absolute;
    top: 30px;
    left: 25px;
  }
</style>
<body>
  <div class="container1">
    <div class="div1">absolute 속성의 div1</div>
    absolute; container1</div>
  <div class="container2">
    <div class="div1">absolute 속성의 div1</div>
    relative; container2</div>
  <div class="container3">
    <div class="div1">absolute 속성의 div1</div>
    fixed; container3</div>
</body>

예 5-4

<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .container1 {
    width: 150px;
    height: 150px;
    background: pink;
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .container2 {
    width: 150px;
    height: 150px;
    background: lime;
    position: relative;
    top: 10px;
    left: 170px;
  }
  .container3 {
    width: 150px;
    height: 150px;
    background: cyan;
    position: fixed;
    top: 10px;
    left: 330px;
  }
  .div1 {
    background: yellow;
    position: absolute;
    top: 30px;
    left: 25px;
  }
</style>
<body>
  <div class="container1">
    <div class="div1">absolute 속성의 div1</div>
    absolute; container1</div>
  <div class="container2">
    <div class="div1">absolute 속성의 div1</div>
    relative; container2</div>
  <div class="container3">
    <div class="div1">absolute 속성의 div1</div>
    fixed; container3</div>
</body>

부모 객체가 static이라면 조상 객체를 거슬러 올라가 static이 아닌 조상 객체를 찾아 좌표의 기준으로 삼고, 없다면

브라우저 창이 기준이 됩니다.

예 5-5
<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .container1 {
    width: 250px;
    height: 250px;
    background: pink;
    position: absolute;
  }
  .container2 {
    width: 200px;
    height: 200px;
    background: lime;
  }
  .container3 {
    width: 150px;
    height: 150px;
    background: cyan;
  }
  .div1 {
    border: 1px solid red;
    position: absolute;
    top: 30px;
    left: 30px;
    padding: 30px 0;
    color: red;
  }
</style>
<body>
  <div class="container1">absolute; container1
    <div class="container2">static; container2
      <div class="container3">static; container3
        <div class="div1">absolute 속성의 div1</div>
      </div>
    </div>
  </div>
</body>

예 5-5

<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .container1 {
    width: 250px;
    height: 250px;
    background: pink;
    position: absolute;
  }
  .container2 {
    width: 200px;
    height: 200px;
    background: lime;
  }
  .container3 {
    width: 150px;
    height: 150px;
    background: cyan;
  }
  .div1 {
    border: 1px solid red;
    position: absolute;
    top: 30px;
    left: 30px;
    padding: 30px 0;
    color: red;
  }
</style>
<body>
  <div class="container1">absolute; container1
    <div class="container2">static; container2
      <div class="container3">static; container3
        <div class="div1">absolute 속성의 div1</div>
      </div>
    </div>
  </div>
</body>

빨간 선으로 표시된 div1의 영역이 static 속성 값을 가진 container1과 container2를 무시하고 absolute 값을 가진

container1의 좌 상단을 기준으로 지정한 값만큼 떨어진 곳에 출력됩니다,

3) relative

position 속성이 relative가 지정된 박스의 경우는 부모의 position속성과 상관없이 Normal-flow에 따라 배치됩니다.

top, left, right, bottom속성 값을 지정해서 상대적 위치를 지정할 수 있습니다.

하지만 다음에 오는 박스에는 아무런 영향도 주질 않기 때문에 전체적인 흐름에는 변화를 주지 않습니다.

기본적으로 float 속성을 통해 객체를 정렬했다면, position: relative를 이용해서 세밀한 조정을 하는 것이 일반적입니다.

예 5-6
<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
    text-align: center;
  }
  .div1 {
    background: cyan;
  }
  .div2 {
    background: yellow;
    position: relative;
    left: 110px;
  }
  .div3 {
    background: pink;
  }
</style>
<body>
  <div class="div1">
    div1 영역
  </div>
  <div class="div2">
    div2 영역
  </div>
  <div class="div3">
    div3 영역
  </div>
</body>

예 5-6

<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
    text-align: center;
  }
  .div1 {
    background: cyan;
  }
  .div2 {
    background: yellow;
    position: relative;
    left: 110px;
  }
  .div3 {
    background: pink;
  }
</style>
<body>
  <div class="div1">
    div1 영역
  </div>
  <div class="div2">
    div2 영역
  </div>
  <div class="div3">
    div3 영역
  </div>
</body>

div1은 normal-flow에 따라 맨 위에 일반적으로 배치되고 div2는 relative이면서 left: 110px값을 지정했으므로 원래 위치의 왼쪽에서 110px만큼 떨어진 위치에 배치됩니다.

그리고 div3는 원래 div1이 있어야 하는 위치에서 normal-flow에 따라 그 아래에 배치됩니다.

4) fixed

fixed는 absolute와 마찬가지로 부유 객체이고 브라우저의 창을 기준으로 top, left등으로 지정한 상대 위치에 객체를 배치하며

부모 요소가 있더라도 독립적으로 자리를 잡습니다.

가장 큰 특징은 화면이 스크롤되더라도 항상 화면의 정해진 위치에 출력이 되므로 화면의 특정 위치에 항상 보여주고 싶은 경우 사용합니다.

예 5-7
<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .div1 {
    background-color: pink;
    position: relative;
  }
  .div2 {
    background-color: cyan;
  }
  p {
    position: fixed;
    top: 10px;
    left: 10px;
  }
</style>
<body>
  <div class="div1">
    <p>
      div1 영역</p>
  </div>
  <div class="div2">
    <p>
      div2 영역
    </p>
  </div>
</body>

예 5-7

<style>
  body {
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
  }
  .div1 {
    background-color: pink;
    position: relative;
  }
  .div2 {
    background-color: cyan;
  }
  p {
    position: fixed;
    top: 10px;
    left: 10px;
  }
</style>
<body>
  <div class="div1">
    <p>
      div1 영역</p>
  </div>
  <div class="div2">
    <p>
      div2 영역
    </p>
  </div>
</body>

<p>태그 position 속성을 fixed로 지정하였고. 부모 객체인 div1은 relative, div2는 static으로 지정된 상태입니다.

부모 객체의 position속성 값이 뭐든지 간에 <p>태그의 출력은 모두 동일한 곳에 위치합니다.

브라우저의 창을 위, 아래로 스크롤해보아도 동일한 위치에 있음을 알 수 있습니다.

5) inherit

부모 element의 position속성을 상속합니다. (IE7까지는 지원하지 않음)

★: position을 absolute 나 fixed로 설정 시 가로 크기가 100%가 되는 block 태그의 특징이 사라지며 inline-box처럼

크기에 맞게 딱 붙게 됩니다.

예 5-8
<style>
  body {
    margin: 0;
  }
  .div1 {
    background: pink;
  }
  .div2 {
    background: coral;
    position: absolute;
    top: 50px;
  }
  .div3 {
    background: cyan;
    position: fixed;
    top: 100px;
  }
</style>
<body>
  <div class="div1">
    div1 static
  </div>
  <div class="div2">
    div2 absolute
  </div>
  <div class="div3">
    div2 fixed
  </div>
</body>

예 5-8

<style>
  body {
    margin: 0;
  }
  .div1 {
    background: pink;
  }
  .div2 {
    background: coral;
    position: absolute;
    top: 50px;
  }
  .div3 {
    background: cyan;
    position: fixed;
    top: 100px;
  }
</style>
<body>
  <div class="div1">
    div1 static
  </div>
  <div class="div2">
    div2 absolute
  </div>
  <div class="div3">
    div2 fixed
  </div>
</body>

div1은 block 요소의 일반적인 특징으로 배치되어 가로 길이의 100%를 차지하지만 div2와 div3는 안에 있는 콘텐츠의 크기만큼의 길이를 가집니다.

여기까지 CSS에서 레이아웃을 만드는데 가장 중요한 display, float, position을 공부했습니다.

부족한 게 많다고 생각되지만 여기서 빠진 내용들은 다른 것들을 공부하면서 더 설명하기로 하고 오늘은 여기서 끝입니다.

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

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

7. text에 관련된 속성들 -바닥부터 시작하는 CSS- (0)	2017.01.05
6. margin, padding, border 속성 -바닥부터 시작하는 CSS- (0)	2016.12.30
4. float 속성 -바닥부터 시작하는 CSS- (0)	2016.12.08
CSS의 절대단위와 상대단위 -막간학습- (0)	2016.12.07
display 속성의 table계열 속성 값 -막간학습- (0)	2016.12.04

Posted by star story :

나라 공부방 RSS FEED

달력

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

5. position 속성 -바닥부터 시작하는 CSS-

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

티스토리툴바

티스토리툴바