Visual Studio Code Position에 대해서

Visual Studio Code/Visual Studio Code icia 32일차

Visual Studio Code Position에 대해서

swkn 2023. 4. 6. 16:58

1. Position이란?

말 그대로 요소를 배치할 때 사용하는 속성이다.

좌표값을 사용한다

X(Left), Y(top) 좌표

좌표를 지정하는 방식이 여러 개 제공된다 ( 좌표계 > 기준점 )

2. Position의 종류

2 - 1 . Position - static

정적좌표이며 기본값이다 ( 디폴트값 )
FlowLayout 방식이다.
워드프로세서 방식이다
코딩 순서대로 출력된다 ( 위 > 아래, 왼쪽 > 오른쪽 )
좌표값이 지원 안된다 ( Left , Top 사용 불가능하다)

2 - 2 . Position - absolute

절대 좌표이다
기준점은 문서의 좌측 상단
모든 태그가 동일하게 문서의 좌측 상단을 원점으로 한다
원래 있던 공간이 유지되지 않는다.
기준점(원점)은 자신의 부모에 가장 최근 position이 static이 아닌 태그를 원점으로 한다.
( 위치를 지정할 때 부모요소에 relative 속성을 주고 위치를 잡으려는 자식요소에 absolute 속성을 지정하여
위치를 잡는다. )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>relative</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0px;
        /* 테두리 크기까지 고려해서 요소 크기 지정 */
      }
      #container1 {
        border: 5px solid red;
      }
      #container2 {
        border: 5px solid green;
        position: relative;
        /* top: 20px;
        left: 30px; */
      }
      #container3 {
        border: 5px solid blue;
        position: relative;
      }
      div {
        width: 300px;
        height: 300px;
      }
      #child1 {
        border: 2px dashed yellow;
        background-color: violet;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 30px;
        left: 50px;
      }
      #child2 {
        border: 2px dashed black;
        background-color: yellow;
        width: 150px;
        height: 150px;
      }
      #child3 {
        border: 2px dashed dodgerblue;
        background-color: red;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 30px;
        left: 50px;
      }
    </style>
  </head>
  <body>
    <div id="container1">div1</div>
    <div id="container2">
      div2
      <div id="child1">child1</div>
    </div>
    <div id="container3">
      div3
      <div id="child2">
        child2
        <div id="child3">child3</div>
      </div>
    </div>
  </body>
</html>

div1에는 div1 만 있고 div2에는 안에 child1이 있고 , div3안에 child2가 있으며 child2 안에 child3가 있다.

child1에는 position이 absolute 속성이고 child2는 position 속성이 없으며 child3도 absolute 속성이다.

div1은 position 속성이 없고 div2 , 3 에는 relative 속성이다.

child1은 div2 안에 있는데 div2가 relative 속성이니 child1의 원점은 div2의 좌측최상단이 된다.

좌측 최상단에서 top으로 30px만큼 , left로 50px만큼 떨어져 있으니 위의 그림에 보라색배경으로 위치된다.

child2는 div3안에 있고 속성이 없기 때문에 그대로 나온다.

child3은 child2안에 있고 absolute이기 때문에 그위의 부모인 child2가 속성이 없으므로 한층 더 올라가서 속성이 relative인 dlv3 안에 top으로 30px만큼 , left로 50px만큼 자리 잡은 것이다.

2 - 3 . Position - relative

상대 좌표이다
기준점은 원점이다
태그가 각각 자신의 원래 위치를 원점으로 한다
본래 있던 공간은 유지된다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>relative</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0px;
        /* 테두리 크기까지 고려해서 요소 크기 지정 */
      }
      #container1 {
        border: 5px solid red;
        position: static;
      }
      #container2 {
        border: 5px solid green;
        position: relative;
        bottom: 30px;
        /* margin-top: 30px; */
      }
      #container3 {
        border: 5px solid blue;
        position: relative;
        top: 20px;
      }
      div {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="container1">div1</div>
    <div id="container2">div2</div>
    <div id="container3">div3</div>
  </body>
</html>

div1은 static이므로 반응이 없고

div2은 relative

div3도 relative이다.

div2가 relative이기 때문에 이동해도 그 자리는 그대로 남아 div3의 위치가 변하지 않았다.

2 - 4 . Position - fixed

고정 좌표이다
기준점(원점)은 브라우저 화면 좌측 최상단이다.
스크롤에 반응하지 않고 화면에 고정된다.
원래 있던 공간은 사라진다.
헤더나 배너 등을 고정시킬 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fixed</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0px;
        /* 테두리 크기까지 고려해서 요소 크기 지정 */
      }
      body {
        height: 3000px;
      }
      #container1 {
        border: 5px solid red;
      }
      #container2 {
        border: 5px solid green;
        /* top: 20px;
        left: 30px; */
      }
      #container3 {
        border: 5px solid blue;
        position: fixed;
        top: 0px;
        right: 0px;
      }
      div {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="container1">div1</div>
    <div id="container2">div2</div>
      <div id="container3">div3</div>
    </div>
  </body>
</html>

2 - 5 . Position - sticky

스크롤을 따라 움직인다.
스크롤과 함께 사용되는 경우가 많다.
스크롤을 내릴 때 메뉴가 상단에 고정되는 상황에서 활용된다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>sticky</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0px;
        /* 테두리 크기까지 고려해서 요소 크기 지정 */
      }
      body {
        height: 3000px;
      }
      #container1 {
        border: 5px solid red;
      }
      #container2 {
        border: 5px solid green;
      }
      #container3 {
        border: 5px solid blue;
        position: sticky;
        top: 0px;
      }
      div {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="container1">div1</div>
    <div id="container2">div2</div>
      <div id="container3">div3</div>
    </div>
  </body>
</html>

div1 , 2 , 3 중에서 div3 만 top 0px에 position을 sticky로 지정했다.

저작자표시