티스토리 뷰
CSS 속성공부 #6 / 위치(position) 속성
보통 프로그램을 개발할 때 요소의 위치는 다음 두 가지 방법으로 설정한다.
- 절대 위치 좌표: 요소의 X 좌표와 Y 좌표를 설정해 절대 위치를 지정함.
- 상대 위치 좌표: 요소를 입력한 순서에 따른 상대 위치를 지정함.
절대 위치 좌표는 드래그해서 만들 수 있으므로 상대 위치 좌표보다 개발이 쉽다.
하지만 현대에는 사람들이 각기 다른 디바이스(모바일, PC)에서 사용하므로 해상도가 고정되어 있지 않다. 따라서 상대 위치 좌표를 대부분 사용한다.
그렇다고 절대 위치 좌표가 쓰이지 않는 것은 아니다. 절대 위치 좌표는 일정 크기의 영역을 지정한 태그 내부에서 많이 사용한다.
position 속성
이제 실습을 통해 position 속성을 익혀보자.
100x100 크기인 상자를 3개 만들고 각 상자에 background-color를 입혔다. absolute(절대 위치)로 설정했다.
실행결과 파란 박스 하나밖에 안보인다. 이제 각 상자에 left와 top 속성을 적용해보도록 하겠다.
이제 모든 box가 잘 보인다.
참고로 붉은 상자가 맨 뒤에 있고, 파란색 상자가 맨 앞에 있는 이유는 코드의 작성순서 때문이다. 코드는 위에서부터 아래로 실행되기 때문에 먼저 작성된 코드가 먼저 실행된다. 만약 빨간색 상자를 맨 앞으로 변경하고 싶다면 코드의 순서를 바꾸거나 z-index 라는 속성을 추가하면 된다.(z-index의 수치가 높을 수록 나중에 그려짐)
일반적으로 반드시 앞에 있어야 하는 항목이 있다면 태그의 z-index 속성에 9999와 같은 값을 넣는 경우도 있다. 하지만 너무 큰 값을 입력하면 웹 브라우저가 인식하지 못하는 경우도 있으니 주의해서 사용하기 바란다.
position 속성 응용
코드의 body 부분을 다음과 같이 변경해보겠다.
이 코드의 문제점은 색상이 적용된 상자의 부모 태그(div)가 영역을 차지하지 않는다는 것과 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않는다는 것이다.
위 문제를 해결하기 위해 우선 부모 태그의 크기부터 지정한다. 그리고 상자들이 부모를 기준으로 잡기 위해 부모의 position을 relative로 설정해준다. 이렇게 하면 자식태그가 부모의 위치를 기준으로 절대 좌표를 설정한다.
overflow 속성
overflow는 내부요소가 부모의 범위를 벗어날 때 처리하는 방법을 지정하는 속성이다.
그러면 두 키워드를 모두 사용해보겠다.
<overflow hidden>
<overflow scroll>
overflow scroll 사용 시 모든 측에 scroll bar가 생성되는데 하나의 측만 생성되게 하려면 overflow 대신 overflow-x/y 속성을 사용하면 된다.
진행한 실습코드는 여기에서 다운로드 받을 수 있다.
