배치(1)

우리는 position이라는 속성을 통해 요소를 원하는 위치에 배치할 수 있다.

이때 top, bottom, left, right 라는 속성을 통해서 떨어진 정도를 지정할 수 있는데 이때 어디를 기준으로 해서 요소를 배치할까??

1. relative

요소 자신을 기준으로 요소를 배치한다.

relative라는 속성 값을 부여한 다음 위치를 배치하게 되면, 원래 자신의 위치를 기준으로 배치된다.

이때 배치 전 원래 요소가 존재했던 자리는 비어있는 상태로 유지가 된다.

그래서 2번이 있었다는 사실을 모른 채로 요소의 배치를 보게 되면 1번과 3번이 붕 떠서 떨어져있기 때문에 왜 그 사이에 공간이 발생했는지 알 수 없다. 그렇기 때문에 실제에서 relative 속성을 사용해서 요소를 배치하는 경우는 잘 없다.

 

2. absolute

위치 상 부모 요소를 기준으로 배치한다.

이때 "위치 상"이라는 말이 잘 이해가 되지 않을 수 있다.

absoulte 속성 값을 부여한 후 요소를 배치하게 되면 relative 속성을 배치했을 때와는 달리 붕 뜬 공간이 발생하지 않는다.

2번 요소는 더 이상 주변 요소와의 상호 작용을 고려할 필요가 없기 때문에 주변 요소와의 상호 작용이 무너지게 된다.

그렇기 때문에 1번과 3번이 연속된 위치에 배치가 되게 된다.

 absolute 값을 부여하면 위시 상 부모 요소를 기준으로 배치가 된다고 했는데 그렇다면 위치 상 부모 요소는 어떤 요소를 가리키는 것일까?

이때 주의해야할 점은 구조 상 부모 요소가 반드시 위치 상 부모 요소와 동일한 것은 아니다.

2번 요소의 구조 상 부모 요소는 파란색 요소이지만, 요소를 배치할 때를 보면 뷰포트를 기준으로 해서 배치가 된 것을 볼 수 있다. 이것은 구조 상 부모 요소인 요소는 position 속성 값이 별도로 지정되지 않아 현재 위치 기준이 없기 때문이다.

파란색 부모 요소에 position: relative; 라는 값을 지정해서 위치 상 부모 요소가 되도록 지정을 했다.

그렇게 되면 2번 요소의 위치 상 부모 요소는 파란색 부모 요소가 되고 이 요소를 기준으로 2번 요소가 배치된다.

2번 요소의 구조 상 부모의 부모 요소가 추가되었다고 해보자. 이때 부모 요소와 조상 요소 모두에 position 값이 별도로 지정되어 있다면, 위치 상 부모 요소는 여전히 부모 요소인 파란색 부모 요소가 되기 때문에 이전 상황과 달라지는 것이 없다.

 

그러나 파란색 부모 요소에 position을 사용하지 않겠다는 의미로 static 값을 부여한다면, 파란색 부모 요소는 더 이상 위치 상 부모 요소가 될 수 없기 때문에 그 상위 요소인 부모의 부모 요소가 위치 상 부모 요소가 된다.

부모 요소와 부모의 부모 요소 모두 position을 사용하지 않는다면, 어떠한 구조 상 부모 요소도 위치 상 부모 요소가 될 수 없으면 위치 상 부모 요소는 뷰포트가 된다.