웹 브라우저에서 오브젝트의 위치 변경 방법

오브젝트의 자유로운 이동과 모양 변경

XELF에서는 오브젝트(HTML Element)의 위치, 크기 등을 마우스 클릭과 드래그만으로 편집할 수 있습니다. 사용자가 직접 오브젝트의 위치, 크기 값 등을 수정하거나, HTML 파일을 열어 내용을 수정하지 않아도 되기 때문에 간편합니다. 하지만 사용자가 직접 오브젝트의 위치, 크기 값 등을 수정하지 않더라도 프로그램 내부에서는 사용자의 마우스 클릭, 드래그 등의 입력을 받아 오브젝트의 위치, 크기 값 등을 변경하고 있습니다. 프로그램 내부의 처리가 있기 때문에 사용자는 간편하게 XELF를 사용할 수 있는 것이죠. 프로그램 내부에서는 어떤 일을 하고 있는 것일까요? 그중 오브젝트의 위치를 변경하는 방법에 대해서 알아보겠습니다.

오브젝트의 위치를 변경하는 방법

반적으로 오브젝트(HTML Element)의 위치, 모양 등을 변경할 때는 CSS(Cascading Style Sheets)를 이용합니다. CSS를 이용할 때는 오브젝트에 직접 CSS 속성을 적용시키거나 CSS 파일을 불러와서 적용시킵니다. 이 두 가지 방법은 서로 장단점이 있고 상황에 맞게 섞어서 쓸 수 있습니다.
오브젝트의 위치는 오브젝트 간 계층 구조와 CSS 속성으로 결정됩니다. 이번에는 오브젝트의 위치를 자유롭게 이동시키는 것이 목적이기 때문에 CSS 속성 중 left, top을 이용하는 방법에 대해 알아보겠습니다.
CSS 속성 중 left, top, right, bottom 속성은 부모(parent) 오브젝트와 자식(child) 오브젝트 사이의 거리를 나타냅니다. 또한 이 속성이 정상적으로 적용되려면 부모 오브젝트는 position 속성이 relative 또는 absolute이어야 하고, 자식 오브젝트는 position 속성이 absolute이어야 합니다. 자식 오브젝트의 position 속성이 relative 일 경우 left, top, right, bottom 속성의 의미가 바뀌게 됩니다.

left, top, right, bottom 속성
<div id=”obj1″></div>
<div id=”obj2″></div>
<div id=”obj3″></div>
div {
position: absolute;
width: 100px;
height: 100px;
}
#obj1 {
background-color: #ff6b6b;
left: 100px;
top: 100px;
}
#obj2 {
background-color: #5c7cfa;
left: 150px;
top: 150px;
}
#obj3 {
background-color: #a9e34b;
left: 300px;
top: 100px;
}

<위치가 이동된 오브젝트>

CSS에 지정한 left, top 값으로 오브젝트가 이동한 것을 확인할 수 있습니다.
지금까지 웹 브라우저에서 오브젝트의 위치를 변경하는 방법에 대해서 알아보았습니다. XELF에서는 오브젝트의 위치뿐만 아니라 모양, 크기, 회전 등의 속성 변경이 필요하기 때문에 위에서 알아본 내용 이외에도 다른 속성들을 이용합니다. 그리고 사용자의 마우스 입력 등을 받아야 하기 때문에 프로그램 적인 코드가 들어갑니다. 위에서 알아본 것 외의 내용은 다음에 소개하겠습니다.

댓글 남기기

이메일은 공개되지 않습니다.