html 객체 위치 설정 할 때 암것도 모르는 초보자들이 행할 수 있는 실수(position 태그의 중요성)

<div>로 레이아웃을 만들어 많은 그림을 넣어보니 가로로 일렬로 나열 되어 있다. 

그럼, style top이나 right로 지정하면 되겠지 하고 코드를 써 넣어도 변화가 없다...

만약 세로로 그림을 나열하고 싶다면 간단하게 width를 좁게 설정하면 된다. 

<div style="width:300"></div>

그럼 어쩔 수 없이 좁혀진 레이아웃에 맞춰 그림이 세로로 나열 될 것이다. 

하지만 그림을 겹치게 나열 하려면 어떻하지?

이럴 때 필요한 것이 position 속성 이다.

position 속성에는 기본 적인 static, 객체 관계로 위치를 잡아주는 relative, fixed와 비슷하지만 상위의 레이아웃을 참조하여 절대적인 자리를 잡아주는 absolute, 마지막으로 걍 myway, 상위에 관계없이 절대적인 자리를 잡아 드시는 fixed가 있다.

이들 중 마음에 드는 속성을 각 그림에 넣어주고 설정하면 굳이 <div>의 width를 좁히지 않더라도 원하는 위치에 설정 되게 된다.

예를 들어 position=’relative’를 설정하고 top으로 설정하게 되면 각 그림은 순서대로, 앞의 객체를 기준으로 아래에 위치하게 되어 현재 왼쪽에 볼 수 있는 대게와 회 플로팅 같은 결과를 볼 수 있다. 

여기다 top의 값을 ‘-’로 주게 되면 각 객체는 겹치게 된다. 물론 relative뿐만 아니라 static이나 absolute를 설정하여 그에 맞는 위치값을 지정 해 줘도 된다.

 

<div>

<img position=’relative’ style=“top:0px;” src=‘‘/>

<img position=’relative’ style=“top:-20px;” src=‘‘/>

</div>

 

일단 여러 가지 코드를 적용 시킬 것을 염두에 굳이 4가지 영역으로 나눠 플로팅을 배치하였지만, 코드의 간결성을 생각한다면 하나의 <div>를 만들어 모든 플로팅을 집어넣는 것이 바람직하다. 얼마 전 까지만 해도 묶음처리 없이 각 개체에다 일일이 자바스크립트인 fade() 함수를 걸어 첫 시작(로딩)에 부담(?)을 주었지만 어느정도 묶음처리 하니 그 부담이 많이 줄어들었다.

그 결과물은 지금 여러분들이 확인하고 있고.

(다만, 클릭몬의 히트뷰박스나 여러 광고를 넣는다고 로딩이 점 점 길어지고 있는 것은 함정 아닌 함정이다.)