[CSS] 요소의 위치를 어떻게 지정해야할까 - 1

시치송·2023년 11월 23일

CSS html position

HTML+CSS

목록 보기

1/2

📌 요소 위치를 어떻게 지정할까

CSS에서 위치를 지정할때는
요소를 입력한 순서대로 상대적 위치를 지정하는 방법이 있고
요소의 X좌표와 Y좌표를 설정해 절대적 위치를 지정하는 방법이 있다.

이때 position 태그를 사용하는데,
position 태그에는 다음과 같은 속성이 있다.

💡 position 태그의 속성

절대 위치 좌표: absolute, fixed
상대 위치 좌표: relative, static

이중에서도 가장 많이 쓰이는 속성인 relative 와 absolute 에 대해서 알아보자

📌 relative 속성

먼저 head에 다음과 같이 스타일 속성을 작성하여 relative 속성을 지닌 빨간 박스 하나와 파란 박스 하나를 생성해보자

<style>
    .box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
    
    .box2{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: relative;
    }
</style>

그리고 body에 다음과 같이 입력하여 박스를 생성해본다.

<h1>Relative</h1>
<div class="box1"></div>
<div class="box2"></div>
<div>this is relative</div>

그러면 다음과 같은 결과가 나올 것이다.

결과에서 볼 수 있듯이 relative 속성으로 지정을 하면
먼저 입력된 빨간 박스가 위에 오고 그 다음 입력된 파란 박스가 빨간 박스 밑에 온다.
즉, 각 요소들이 위에서부터 차례대로 위치하는 것이다.

그렇다면 absolute 속성으로 지정을 하면 어떻게 될까?

📌 absolute 속성

위의 스타일 속성에서 position 의 속성만 absolute로 바꿔보자.

<style>
    .box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }
    
    .box2{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
    }
</style>

결과를 확인해보자.

빨간박스와 파란박스가 겹쳐져있고 글자 위에 박스가 올려져있고...
정말 엉망잔칭이다.
~~심지어 제목도 Relative로 되어있다~~

왜 이런 결과가 나왔을까?

absolute 속성을 가진 요소는 다른 요소와 상관없이 절대적인 위치를 가진다. 따라서 요소의 좌표를 설정해주어야한다.

그럼 좌표를 어떻게 설정해 줄까?

그림에서 보이는 것처럼 방향마다 얼만큼 이동할 것인지를 지정해주면 된다.

즉, 왼쪽 벽에서 오른쪽으로 10px 이동하고싶다면
left: 10px이라고 지정해주면된다.

반대로 오른쪽 벽에서 왼쪽으로 10px 이동하고 싶다면
right: 10px이라고 지정해주면된다.

이해가 잘 되지 않는다면 코드로 직접 작성하여 이해해보자.

<style>
    .box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0px;
    }
    
    .box2{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      right: 0px;
    }
</style>