웹디자인에서 요소의 위치를 변경하고자 할 때 HTML의 요소를 이동하면 되지만 부모 요소의 범위 안에서만 변경이 가능합니다. 부모 요소의 제약을 받지 않고 벗어나서 배치할 수 있게 하려면 CSS의 포지션을 사용합니다. 어제 방문자님이 고정위치 포지션으로 배치된 것을 수정하고자 방명록에 글을 올렸는데 이를 변경하는 방법을 알아보겠습니다. 제 글의 CSS 기초부분을 보면 포지션에 관해 이해를 돕기 위해 상세히 나오지만 좀 장황하죠. 이번 글은 방문자님의 블로그를 예로 들어 설명해 보겠습니다.
위 블로그로 가서 보면 뷰온 버튼이 글 박스의 우측에 떨어져서 배치돼 있습니다. 수정을 하고나면 변경이 되겠죠.
이 요소가 어떤 식으로 배치가 됐는지 알아보려면 개발자 툴을 사용합니다. 웹브라우저마다 개발자 툴이 있는데 구글 크롬이 가장 편리합니다. 원래는 파이어폭스에서 파이어버그라는 애드온으로 시작됐는데 이제는 모든 웹브라우저에 포함돼 있어서 웹개발자나 디자이너들에게 없어서는 안될 툴입니다.
방문자님의 고민은 자신의 블로그가 데스크탑 화면에서 보면 뷰온 버튼이 글 박스에서 떨어져 있어서 괜찮지만 태블릿 PC와 같은 화면 폭이 좁은 PC에서는 뷰온 버튼이 글 박스에 겹치는 것입니다. 그래서 코드가 어떤 상태인지 확인해보려면 요소검사를 합니다. 원하는 요소를 검사하자면 해당 요소를 마우스 우클릭해서 요소검사를 선택하면 되지만 우클릭 방지이므로 F12키를 누릅니다.
개발자툴이 하단에 나타나는데 하단에서 돋보기툴을 선택하고 마우스를 블로그 화면에 올리면 요소가 하이라이트됩니다. 뷰온버튼을 클릭하면 하단 좌측의 HTML 요소가 하이라이트됩니다. 우측에는 CSS가 나오죠. HTML 요소인 object 태그에 의해 버튼이 만들어져 있습니다. 요소의 위치를 결정하는 CSS에는 width와 height만 있어서 부모요소를 요소검사 해봐야 합니다. 부모요소는 HTML의 트리구조에서 위로 올라가면 됩니다. object의 부모는 td이고 이것의 부모는 tr, ...그래서 뷰온버튼의 최종 부모요소는 a태그입니다. 이곳을 클릭해봅니다.
CSS창에서 포지션을 보니 fixed로 돼있어서 화면을 스크롤해도 고정되는 방식입니다. CSS에서 position이라는 속성을 사용하면 위치를 조정하기 위해서 top, right, bottom, left 라는 속성을 같이 사용합니다. 현재 상황을 보면 top이 300px이므로 화면 상단으로부터 300픽셀 떨어져있고, right가 0이므로 화면 우측으로부터 0 떨어져 있어야하지만 margin-right가 15%이므로 화면폭을 기준으로 우측에서 15% 떨어지게 됩니다. 그러니 화면 폭이 클 때는 겹치지 않지만 줄이면 위처럼 겹칠 수 밖에 없습니다.
화면폭의 크기에 변함없이 요소를 고정 배치하려면 중앙을 기준으로 배치해야합니다. 현재 CSS패널에서 직접 수정해보겠습니다. 개발자툴은 이래서 편리하죠. 수정한다고 해서 서버의 코드가 바로 수정되는 것이 아니라 미리 실험해보고 원하는대로 나타나도록 수정하기 위한 테스트일 뿐입니다. 이곳에서 보면서 수정한 뒤 파일에 붙여넣으면 되므로 편리한 것이죠.
속성에 클릭하면 수정할 수 있도록 하이라이트됩니다. RIGHT를 left로 수정합니다. 화면 좌측을 기준으로 합니다.
엔터키를 누르면 속성에 대한 값을 수정할 수 있도록 값 부분이 하이라이트되면서 블로그 화면에서는 요소가 이동합니다. 수정됐으니 당연하죠. 좌측을 기준으로 현재 입력돼 있는 값인 0%에 해당하므로 요소가 화면 좌측에 붙습니다.
값을 50% 입력하니 중앙에 배치됩니다. 그러면 화면 폭에 관계없이 항상 중앙에 위치하게 됩니다. 이제 이 위치를 기준으로 글 박스 밖으로 이동시키면 됩니다.
위에서 left 라는 속성을 사용했으니 마진도 margin-left로 수정하고 중앙을 기준으로 몇 px를 이동할지 값을 입력합니다. 500픽셀로 하니 위처럼 이동됩니다.
이제 화면 폭을 확대해도 항상 글 박스를 기준으로 위치를 잡습니다. 이전 사진에서 CSS 패널을 보면 선택자가 element.style 로 돼 있는데 이것은 HTML 코드에 직접 CSS가 입력된 상태라서 그렇습니다. 인라인 방식으로 스타일시트가 사용된 것이죠. 그러니 블로그에서 수정하려면 CSS 창에서 수정할 것이 아니라 HTML 창에서 해당 요소를 찾아서 수정해줘야합니다.
