div의 overflow 및 postion

div 태그에서 스크롤을 사용하기 위헤서는 overflow속성을 이용한다.

2D인 화면에서 스크롤은 x, y 축으로 발생할수 있는데, 각각을 따로 설정하기 위해서는 overflow-x, overflow-y를 사용하고, 둘다 한꺼번테 컨트롤 하기 위해서는 overflow만을 사용한다.

 

속성값은 항상 보이기 위해서는 scroll, div영역이 해당 설정영역을 넘어갈때 자동으로 스크롤을 보이게 하기 위해서는 auto를 값으로 사용한다. 또한, 스크롤을 숨기기위해서는 hidden을 사용하면 된다.

 

 

 

몇가를 예를 보자.

1. 가로 600px 이상이 되면 스크롤이 생김, 스크롤은 600이 넘지 않아도 보임

<div style="width:600px; overflow-x:scroll></div>

 

2. 가로 600px 이상이 되면 스크롤이 자동으로 생김. 가로 600이 넘지 않으면 스크롤은 보이지 않음

<div style="width:600px; overflow-x:auto></div>

 

3. 조금 복잡하게 사용해 보자.

스크롤을 자동으로 생기도록 하는데, 세로 스크롤이 처음부터 생기는것을 패딩해 주고, overflow-y=hidden으로 세로 스크롤을 강제로 보이지 않도록 하면된다.

<div style="width:600px; overflow:auto; overflow-y:hidden; height:auto; padding:0 0 17px 0;">

 

오랫만에 html / css 글을 작성합니다.
오늘은 css의 속성인 포지션 (position) 에 대해 포스팅해 보겠습니다.

사용된 이미지를 클릭하시면 조금은 크게 보실 수 있습니다.

일단 포지션(position) 을 이용한 예를 정리해 보겠습니다.

1. 포지션(position)을 이용한 예

다음 뷰 position:absolute;

다음뷰에서 볼 수 있는 화면입니다.
해당 제목에 마우스 오버를 하게 되면 간략한 내용의 박스가 나타나는 형태입니다.
이것도 포지션 (position)을 이용한 방법입니다.

지마켓 홈페이지 position:absolute;

홈페이지에서 많이 사용되는 퀵메뉴 or 윙메뉴 입니다.
홈페이지의 스크롤에 따라다니는 메뉴바 형태입니다.
이런 형태 또한 포지션(position) 을 이용해 위치를 고정시키고, 자바스크립트를 이용해 스크롤을 따라다는 모양으로 만들어 줍니다.

배너 position:absolute;

故노무현 전 대통령 서거 당시 블로그에 많이 보였던 배너 형태입니다.
이렇게 브라우져의 한 부분으로 위치시킬 경우에도 포지션(position)을 사용합니다.

2. 포지션 (position) 이란?

포지션 (position)은 요소의 위치를 설정할때 사용합니다.
위의 예처럼, 자신이 원하는 위치에 설정할 수 있습니다.

포지션 (position)의 속성 값에는 absolute, relative, fixed, static, inherit  총 5가지가 있습니다.
그리고 위치 설정을 하기 위해서는 top, left, bottom, right 의 스타일을 추가해주면 됩니다.
예) position:absolute, top:20px; left:20px;  절대적인 위치로 위로부터 20px 왼쪽으로부터 20px 떨어진 위치에 고정됩니다.

static - 포지션의 기본값으로 위치 설정을 해줄 수 있습니다.
absolute - 절대위치
relative - 상대위치
fixed - 위치를 고정시킵니다. 브라우져의 스크롤을 이동해도 정해진 위치에 고정시킵니다.
inherit  - 부모의 속성을 상속시켜줍니다.

지금까지는 사전적인 의미입니다.

3. 포지션 (position) 예제

가장 많이 이용하는 absolute, relative, fixed 를 예제로 보여드리겠습니다.

포지션 (position)의 속성이 relative 일 경우에는 현재 위치에서의 상대적인 위치에 이동을 합니다.

포지션 (position)의 속성이 absolute 일 경우에는 두가지 형태로 나뉘게 됩니다.
absolute 된 엘리먼트의 상위 엘리먼트의 속성이 relative 인것과 아닌것으로 나뉩니다.
아닐 경우에는, 브라우져 (body) 를 기준으로 절대적인 위치를 가지게 되고,
상위 엘리먼트의 속성이 relative 일 경우에는 상위 엘리먼트를 기준으로 절대적인 위치로 이동합니다.

포 지션 (position)의 속성인 fixed는 이미지에서 보는거와 같이 스크롤이 이동해도 항상 자신의 위치에서 이동이 없습니다. fixed 의 기준점은 브라우져 (body) 입니다. 그러므로, 브라우져의 스크롤을 이동하여도 브라우져가 기준점이기 때문에 이동하지 않습니다.

1.포지션(position)의 예에서도 보듯이, absolute의 속성을 많이 이용합니다.
relative는 주로, absolute 된 엘리먼트의 기준점으로 사용하기 위해 이용합니다.