positioning

 

-bottom

: position 속성과 함께 사용되며, 해당 position 이 어떤 값을 가지고 있느냐에 따라 bottom 의 위치값이 같아도 요소의 위치가 달라질 수 있다.

요소의 하단 모서리의 위치를 지정하는 속성이며 기준(0)은 하단에서 시작된다. {position:absolute;} 일때는 해당 요소가 포함된 영역 안에서 bottom 위치가 정해지며, {position:relative;} 일때는 기본 위치에서 bottom 위치가 정해진다. 만약 {position:static;} 이면 bottom 속성은 위치에 영향을 주지 않는다.

 

{ bottom:value; }

auto : 기본값(default), 브라우저가 bottom 모서리의 위치를 계산

length : px, cm 단위로 직접 bottom 모서리 위치 지정하며 음수값도 가능

% : 해당 요소의 % 만큼의 위치로 지정하며 음수값도 가능

inherit : 지정 요소의 위치를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { position:absolute; left:50px; bottom:10px; }

 

 

-clear

:float 된 요소를 해제시키는 방법으로 clear 속성에 지정된 값에 위치된 float 속성은 적용되지 않게 된다.

 

{ clear:value; }

left : 왼쪽에 floating 된 요소를 지정 해제

right : 오른쪽에 floating 된 요소를 지정 해제

both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제

none : 기본값(default), floating 을 해제하지 않음

inherit : 지정 요소의 부유 상태 해제를 부모(상위) 요소로부터 상속받음

 

사용 예)

img { float:left; }
div { clear:both; }

 

 

-clip

:해당 영역 안에서 절대 위치를 가지고 있는 어떤 부분만 보여질 수 있게 지정하는 속성이다. 포토샵이나 플래시의 마스크 기능과 비슷하며 현재 사각형 모양만 지원된다.

 

{ clip:rect(top,right,bottom,left); }

auto : 기본값(default), 클리핑되지 않은 상태를 보여준다

shape : 요소를 잘라서 보여주며 rect(top,right,bottom,left) 값만 지원한다

inherit : 지정 요소의 클리핑 상태를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { position:relative; }
div img { position:absolute; left:0; top:30px; clip:rect(0px, 60px, 200px, 0px); }

 

 

-coursor

:해당 요소에 마우스 포인터가 위치할 경우 커서의 타입(모양)을 지정한다.

 

{ cursor:value; }

url : 커서로 사용할 이미지의 url 경로를 콤마로 구분하여 지정

auto : 기본값(default), 브라우저에서 기본적으로 지원하는 모양으로 지정

crosshair : 십자모양의 커서

default : 기본 흰색 화살표 모양의 커서

e-resize : 좌우 검정 화살표 모양의 커서(동쪽(오른쪽)으로 사이즈 조절이 가능하다는 의미)

help : 기본 화살표 모양 옆에 물음표 아이콘이 나타난다

move : 브라우저 상에서 창 이동을 나타내는 십자모양 화살표 커서

n-resize : 상하 검정 화살표 모양의 커서(북쪽(윗쪽)으로 사이즈 조절이 가능하다는 의미)

ne-resize : 북동쪽 검정 화살표 모양의 커서(북동쪽으로 사이즈 조절이 가능하다는 의미)

nw-resize : 북서쪽 검정 화살표 모양의 커서(북서쪽으로 사이즈 조절이 가능하다는 의미)

pointer : 손모양의 커서

progress : 기본 화살표 모양 옆에 로딩 중일 때 나타나는 모래시계 아이콘 모양의 커서가 나타난다

s-resize : 상하 검정 화살표 모양의 커서(남쪽(아래쪽)으로 사이즈 조절이 가능하다는 의미)

se-resize : 남동쪽 검정 화살표 모양의 커서(남동쪽으로 사이즈 조절이 가능하다는 의미)

sw-resize : 남서쪽 검정 화살표 모양의 커서(남서쪽으로 사이즈 조절이 가능하다는 의미)

text : 브라우저에서 텍스트에 마우스 가져다 대면 나타나는 일자 모양의 커서

w-resize : 좌우 검정 화살표 모양의 커서(좌쪽(왼쪽)으로 사이즈 조절이 가능하다는 의미)

wait : 로딩 중일 때 나타나는 모래시계 모양의 커서

inherit : 지정 요소의 커서 모양을 부모(상위) 요소로부터 상속받음

 

사용 예)

div.cont { cursor:pointer; }

 

 

-display

:인라인(inline) 타입인지 블럭(block) 타입인지 등에 관한 해당 요소의 유형을 지정한다.

 

{ display:value; }

none : 해당 요소가 생성되지 않음

block : 위아래 줄바꿈이 되는 블럭 요소로 지정

inline : 기본값(default), 위아래 줄바꿈이 되지 않는 인라인 요소로 지정

inline-block : 인라인 요소로 배치 되지만 블럭 요소의 특징을 가짐

inline-table : 인라인 요소로 배치 되지만 테이블 요소의 특징을 가짐

list-item : 블럭 요소로 배치되면서 list 항목을 인라인으로 만든다

run-in : 해당 문맥에 의존하는 블럭 또는 인라인 박스를 만든다

table : 앞뒤 줄바꿈이 되는 테이블처럼 나타낸다

table-caption : 테이블 캡션처럼 나타낸다

table-cell : 테이블 셀처럼 나타낸다

table-column : 테이블 컬럼 처럼 나타낸다

table-column-group : 테이블 컬럼그룹(colgroup) 처럼 나타낸다

table-footer-group : 테이블의 푸터 행 그룹처럼 나타낸다

table-header-group : 테이블의 헤더 행 그룹처럼 나타낸다

table-row : 테이블 행 처럼 나타낸다

table-row-group : 테이블 행 그룹처럼 나타낸다

inherit : 지정 요소의 유형을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { display:inline; }

*none, block, inline, inline-block 외에 나머지 값들이 하위 버전의 브라우저에서 지원하지 않는 것이 많으므로 사용에 주의해야 한다.

*{ visibility:hidden; } 은 보여지지 않지만 공간은 차지하고 있으며, { display:none; } 은 보여지지 않으면서 공간도 없어지게 된다. 두 속성의 차이점을 주의해야 한다.

 

 

-float

:박스요소를 부유(띄울)할 위치를 지정한다. 만약 position 속성에서 absolute(절대 위치 값) 가 지정되어 있다면 flot 속성은 무시된다.

 

{ float:value; }

left : 요소를 왼쪽 방향으로 띄워지게 지정

right : 요소를 오른쪽 방향으로 띄워지게 지정

none : 기본값(default), 요소를 띄우지 않음. 텍스트가 위치하는 곳에 위치됨

inherit : 지정 요소의 부유 상태를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { float:left; }

*float 된 요소는 브라우저의 정상흐름을 벗어나 해당 문서(또는 부모요소 또는 Wrap된)의 가장 왼쪽 또는 오른쪽에 위치된다.

*float 할 요소는 width 값을 지정해준다. 너비를 지정해 주지 않으면 각 브라우저 마다 랜더링이 달라진다.

 

 

-left

:position 속성과 함께 사용되며, 해당 position 이 어떤 값을 가지고 있느냐에 따라 left 의 위치값이 같아도 요소의 위치가 달라질 수 있다.

요소의 좌측 모서리의 위치를 지정하는 속성이며 기준(0)은 왼쪽에서 시작된다. {position:absolute;} 일때는 해당 요소가 포함된 영역 안에서 left 위치가 정해지며, {position:relative;} 일때는 기본 위치에서 left 위치가 정해진다. 만약 {position:static;} 이면 left 속성은 위치에 영향을 주지 않는다.

 

{ left:value; }

auto : 기본값(default), 브라우저가 left 모서리의 위치를 계산

length : px, cm 단위로 직접 left 모서리 위치 지정하며 음수값도 가능

% : 해당 요소의 % 만큼의 위치로 지정하며 음수값도 가능

inherit : 지정 요소의 위치를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { position:absolute; left:50px; top:10px; }

 

 

-overflow

:요소의 박스가 해당 콘텐츠를 넘쳤을 때 스크롤로 나타낼지 넘친 부분을 보이지 않게 할지 등 어떤 식으로 표현할지를 지정한다.

 

{ overflow:value; }

visible : 기본값(default), 해당 영역에서 벗어난 부분을 짜르지 않고 모두 보여주게 지정

hidden : 해당 영역에서 벗어난 부분을 숨겨서 보이지 않게 지정

scroll : 해당 영역에서 벗어난 부분을 숨기되 스크롤을 생성하여 볼 수 있게 지정

auto : 해당 영역을 벗어난 부분이 있으면 자동으로 스크롤을 생성하게 지정

inherit : 지정 요소의 overflow 값을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { width:200px; height:200px; overflow:scroll; }

 

 

-position

:해당 요소가 문서나 브라우저 상에서 어디에 위치 될지를 지정한다.

 

{ position:value; }

static : 기본값(default), 문서의 흐름에 따라 순서대로 위치를 지정

absolute : 해당 요소의 첫번째 부모 요소 위치(static 이 아닌)에 따라 지정

fixed : 해당 영역에 위치를 고정

relative : 해당 요소의 기본위치에 따라 지정, 예를 들어 {left:20} 이면 20픽셀이 요소의 왼쪽 위치에 추가된다.

inherit : 지정 요소의 위치를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { position:absolute; left:50px; top:10px; }

 

 

-right

:position 속성과 함께 사용되며, 해당 position 이 어떤 값을 가지고 있느냐에 따라 right 의 위치값이 같아도 요소의 위치가 달라질 수 있다.

요소의 우측 모서리의 위치를 지정하는 속성이며 기준(0)은 오른쪽에서 시작된다. {position:absolute;} 일때는 해당 요소가 포함된 영역 안에서 right 위치가 정해지며, {position:relative;} 일때는 기본 위치에서 right 위치가 정해진다. 만약 {position:static;} 이면 right 속성은 위치에 영향을 주지 않는다.

 

{ right:value; }

auto : 기본값(default), 브라우저가 right 모서리의 위치를 계산

length : px, cm 단위로 직접 right 모서리 위치 지정하며 음수값도 가능

% : 해당 요소의 % 만큼의 위치로 지정하며 음수값도 가능

inherit : 지정 요소의 위치를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { position:absolute; right:50px; top:10px; }

 

 

-top

:position 속성과 함께 사용되며, 해당 position 이 어떤 값을 가지고 있느냐에 따라 top 의 위치값이 같아도 요소의 위치가 달라질 수 있다.

요소의 상단 모서리의 위치를 지정하는 속성이며 {position:absolute;} 일때는 해당 요소가 포함된 영역 안에서 top 위치가 정해지며, {position:relative;} 일때는 기본 위치에서 top 위치가 정해진다. 만약 {position:static;} 이면 top 속성은 위치에 영향을 주지 않는다.

 

{ top:value; }

auto : 기본값(default), 브라우저가 top 모서리의 위치를 계산

length : px, cm 단위로 직접 top 모서리 위치 지정하며 음수값도 가능

% : 해당 요소의 % 만큼의 위치로 지정하며 음수값도 가능

inherit : 지정 요소의 위치를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { position:absolute; left:50px; top:10px; }

 

 

-visibility

:해당 요소를 보여지게 할지 안보여지게 할지를 지정한다.

 

{ visibility:value; }

visible : 기본값(default), 요소가 보여지게 지정

hidden : 요소가 보여지지 않게 지정(해당 요소의 공간은 유지됨)

collapse : table 요소를 위한 값이며, 다른 요소에 사용 된다면 “hidden” 으로 처리된다. table 의 row/column 을 제거하지만 전체 table 의 레이아웃에는 영향을 주지 않는다.

inherit : 지정 요소의 보여짐 상태를 부모(상위) 요소로부터 상속받음

사용 예)

div { visibility:hidden; }

*{ visibility:hidden; } 은 보여지지 않지만 공간은 차지하고 있으며, { display:none; } 은 보여지지 않으면서 공간도 없어지게 된다. 두 속성의 차이점을 주의해야 한다.

 

 

-z-index

:해당 요소에 대한 순차적인 위치를 지정한다. 가장 숫자가 크게 지정된 요소가 항상 제일 앞(위)쪽에 위치하며 position 속성이 적용된 요소에만 지정 가능하다.

(여기서 순서라는 것은 상하좌우의 2차원 순서가 아닌 속성 이름에서도 알 수 있듯이 z 축의 3차원 순서를 의미한다. 결국 가장 위쪽에 위치한다는 말은 z축을 기준으로 겹침 상태에서의 가장 위를 의미한다.)

 

{ z-indec:value; }

auto : 기본값(default), 해당 요소의 부모와 순서를 같게 지정

number : 요소의 순서를 숫자로 지정하며 음수도 허용된다

inherit : 지정 요소의 순서를 부모(상위) 요소로부터 상속받음

 

사용 예)

div.box1 { position:absolute; left:0; top:0px; z-index:10; }
div.box2 { position:absolute; left:0; top:30px; z-index:20; }

 

 

출처 : http://htmlcss.kr/css/positioning/