이전 글에서 상대위치(Relative Position)에 대해서 알아보고 제목타이틀에 상대위치를 적용해서 리본만들기를 해보았습니다. 이번 글에서는 포지션의 다른 속성인 절대위치(Absolute Position)를 이용한 포지션 방법과 고정위치(Fixed Position)을 이용해서 html 요소를 화면에 고정시키는 방법을 알아봅니다.
Project(7).zip1. 절대위치를 이용한 요소의 포지션
첨부파일을 열어보면 html부분과 CSS부분이 좀 바뀌었습니다. 1은 2부분을 스타일링한 것인데 마우스 스크롤시 화면이 이동되는 것을 보기위한 용도로 삽입한 것입니다. div#third 는 두개의 클래스 div요소를 삽입하고 다시 각각의 요소에 <h2>태그로 숫자를 넣었습니다.
우선 이전 글에서 한 내용을 기억을 되살려서 상대위치를 적용해봅니다. div#third에 대해서 포지션을 relative로 하고 left의 수치를 -200픽셀 설정했더니 요소 전체가 원래 있던 자리에서 좌측으로 200픽셀 이동했습니다. 그러면서 원래의 자리는 그대로 남아있습니다. 이처럼 상대위치는 이동을 하면 다른 형제요소와의 관계에서 상대적으로 위치를 변경합니다. 하지만 절대위치는 이동을 하면 원래의 자리는 보존하지 않고 이동을 하게 되며 부모요소의 포지션이 어떤 값을 갖느냐에 따라 달라집니다.
이번에는 relative 포지션을 비활성화하고 absolute를 활성화합니다. 수치는 left:200px;로 설정하니 원래의 있던자리에서 나와서는 화면끝에서 200픽셀 떨어진 부분에 위치하고 있습니다. 또한 원래의 자리는 아래에 있던 다른 요소가 자리를 차지했습니다. 이제 3의 요소는 원래의 부모요소와 상대를 하지 않고 루트요소인 body를 상대로 위치를 정하게 됩니다. 현재 body태그에는 어떤 포지션 설정이 되어있지 않지만 마지막 부모요소이므로 이 루트요소를 상대로 위치를 정하게 되는 것입니다. 그러면 3의 요소의 다른 부모요소에 포지션을 설정하면 어떻게 될까요.
직속 부모요소인 div#outer에 대해서 포지션을 relative로 설정했더니 이제는 부모를 찾아서 위치를 정합니다. 원래의 있던 자리에서 200픽셀 우측으로 이동한 것은 그대로이지만 이제는 body요소가 아니라 직속 부모을 상대로 위치를 정하는 것입니다. 하지만 원래의 자리를 보존하지 못하므로 다른 요소가 자리를 차지하는 것은 이전과 같습니다. 이처럼 절대위치는 자신의 부모요소가 포지션을 설정했는지에 따라서 상대적으로 자신의 위치를 찾게 됩니다. 하지만 다른 형제요소와의 관계에서는 절대적인 관계에 있으므로 형제요소와는 위치를 무시합니다.
이번에는 3개의 요소에 대해서 절대위치로 설정하고 각각의 위치는 left:0;, 200px, 400px로 설정했더니 7과 같이 나옵니다. 요소들이 나란히 배치되었습니다. 레이아웃에서 float를 설정한것과 마찬가지의 결과가 나옵니다. 이때 항상 부모요소는 포지션이 9처럼 relative로 되어있어야합니다. 안그러면 body요소를 상대로 위치를 잡게 됩니다.
이와같은 성질을 이용하면 이전글에서처럼 절대위치속성을 이용하여 제목에 리본만드는 작업을 할 수도 있습니다. 또한 본문에서 나와서 스크롤함에 따라 같이 움직이는 아이콘을 설정할 수도 있습니다.
현재 4와 5라은 숫자가 있는 box100 클래스 요소에 대해서 절대위치를 설정하고 수치는 -100픽셀로 했습니다. 절대위치를 설정했으니 부모요소에 상대위치를 설정해야하는데 직속 부모요소인 3에 설정해도 되고 할아버지 요소인 div#outer에 설정해도 같은 결과가 나옵니다. 지금 숫자가 5만 보이는데 이것은 두개의 숫자가 box100이라는 클래스에 의해서 절대 위치를 설정했으므로 자식요소도 상속을 받아 절대위치를 잡아서 겹쳐진 것입니다. 이런 기능은 본문의 밖에 어떤 아이콘을 배치한다든가하여 눈에 잘띄게 할때 사용합니다. 그러면 이렇게 본문에서 나와서 눈에 띄게 하는 것은 좋은데 스크롤을 하게 되면 다른요소와 함께 이동을 합니다. 이것을 화면에 항상 나오도록 고정시키려면 다음에 나오는 position:fixed;를 이용하면 됩니다.
2. 고정위치(Fixed Position)을 이용한 요소의 화면고정
box100에 대해서 포지션을 fixed로 바꾸고 수치를 left:0;으로 하면 5라는 요소는 화면 좌측끝에 바짝 붙어서 고정됩니다. 스크롤을 해도 움직이지 않습니다. 그런데 이요소는 원래 3의 요소 바로 아래에 있었기 때문에 3요소 이상으로는 올라가지 않습니다. 위로 위치를 변경하려면 3의 top에 수치를 입력하면 됩니다. top의 수치는 화면 상단을 기준으로 합니다. top:0;으로 하면 화면 상단에 붙게 되고 수치를 증가시킨 만큼 화면과 떨어지게 됩니다. bottom을 사용하면 화면 아래를 기준으로 합니다.
1처럼 bottom:0; 으로 설정했더니 화면 좌측 하단에 붙어서 스크롤해도 움직이지 않고 고정됩니다. 제 블로그의 화면 좌측에 붙어있는 뷰온버튼은 이러한 고정포지션을 사용한 것입니다. 뷰온버튼을 고정시키는 방법은 이곳을 참고하세요. 그리고 화면 스크롤함에 따라 애니메이션되는 트윗버튼은 CSS뿐만아니라 제이쿼리를 사용한 것이며 절대위치를 사용합니다. 이곳 을 참고하세요.
더보기
'부트스트랩.CSS.JS/CSS기초' 카테고리 관련글
