CSS position 웹 페이지를 만들 때 어떤 요소를 개발자가 원하는 위치에 마음대로 배치할 수 있는 것이 position 속성인데요. 화면 어디든 배치하고 싶은 곳에 위치를 지정할 수 있습니다. 이 글에서는 position의 속성들을 알아보고 하나씩 예제를 만들어서 확인해보겠습니다. 먼저 posiont의 형식은 다음과 같습니다.
▶ aaa {position : 속성}
속성에는 크게 네 가지가 있는데요. static, relative, absolute, fixed입니다. 이것들을 하나씩 적용해서 예제를 만들어 볼게요.
1. static
이 속성은 문서의 전체적인 흐름에 맞게 배치하는 형식인데요. 따로 설정하지 않아도 자연스럽게 배치되는 형태라고 생각하시면 됩니다.
■ 간단하게 예제를 만들어서 position 값 없이 세 개의 박스를 배치해봤습니다. 여기에 'position:static' 속성을 넣어볼게요.
■ 세 개 모두 position의 속성을 static으로 변경했는데 아무런 변화가 없군요. 이렇게 static은 일반적인 배치라고 생각하시면 되구요.
2 relative
단어의 뜻에서도 알 수 있듯이 상대적으로 배치할 수 있는 기능입니다. 상대적이란 원래 이 박스들이 나타나야 할 위치 즉, 위쪽 그림처럼 나타나야 할 원래 위치를 기준으로 일정한 거리를 옮겨서 배치할 수 있다는 의미입니다.
■ 모든 박스의 포지션 속성을 relative로 설정했구요. 첫 번째는 따로 값을 지정해주지 않아서 원래 자리에 나타납니다. 두 번째 박스는 left : 200px 값을 넣었는데요. 원래 있어야 할 자리에서 200px 오른쪽으로 이동해서 나타난다는 의미입니다. 왼쪽으로 옮기고 싶으면 숫자 앞에 "-"를 붙이시면 되겠죠? 마지막 세 번째 박스는 위쪽으로 -50px, 오른쪽으로 40px만큼 이동시킨 상태입니다. 이렇게 원래 있어야 할 자리를 기준으로 위치를 옮겨서 설정할 수 있습니다.
3. absolute
이 속성은 문서의 흐름과는 관계없이 마음대로 아무 위치에나 배치할 수 있는 기능인데요. 부모 요소를 기준으로 거리를 지정해주면 됩니다. 따로 상위 요소가 없는 경우에는 화면의 왼쪽 위 모서리를 기준으로 왼쪽으로의 거리와 위쪽을 기준으로 아래로 거리를 지정해주면 되는데요. 이 역시도 예제를 보겠습니다.
■ 이렇게 position 값을 absolute로 설정하고 left와 top 값을 설정해서 각각의 위치를 잡아봤습니다. 웹 브라우저의 왼쪽 위 모서리를 기준으로 각각의 위치에 자리를 잡게 됩니다.
4. fixed
이 속성은 바로 앞에서 알아본 absolute 속성과 똑같이 위치를 잡으면 되거든요. 그런데 absolute와 다른 점은 화면을 벗어나도 스크롤 막대가 생기지 않는다는 점이에요. absolute는 위치를 잡았을 때 화면을 벗어나면 스크롤 막대가 생기고 이 속성은 생기지 않습니다. 위쪽 예제에서 세 번째 박스를 화면 밖으로 벗어나도록 위치를 잡아볼게요.
■ 속성은 그대로 두고 위치만 화면에서 벗어나도록 설정했습니다. 오른쪽에 스크롤 막대 생긴 거 보이시죠? 막대를 내리면 빨간색 박스가 모두 보이게 됩니다. 마지막으로 포지션 속성을 fixed로 바꿔볼게요.
■ 다른 값은 그대로 두고 position 속성만 fixed로 바꿨습니다. 이렇게 스크롤 막대가 사라지고, 박스가 제대로 보이지 않게 됩니다. 일부러 조금만 보이게 위치를 잡았지만, 화면에서 완전히 벗어난다면 이 녀석을 볼 수가 없게 되는 거에요. 두 가지 차이점을 아시겠죠? ㅎ
이렇게 해서 CSS position의 기본 속성들을 살펴봤습니다. 메모장에 직접 위치 잡아가면서 적용해보세요. ^^ 수고하셨습니다.
