<HTML5+CSS3> 여러 요소를 원하는 형태로 배치하기

position 속성 – 원하는 형태로 요소 배치하기

-웹 문서 안의 요소들을 자유자재로 배치해 주는 속성이다. 텍스트나 이미지를 나란히 배치하기도 하고 여러개의 요소를 가로나 세로로 원하는 위치에 배치할 수 있다.

 

position속성 값

(1)static : 요소를 문서의 흐름에 맞춰 배치합니다

(2)relative : 이전 요소에 자연스럽게 연결해서 배치합니다.

(3)absolute : 원하는 위치를 지정하여 배치합니다

(4)fixed : 지정한 위치에 고정하여 배치한다. 요소가 화면에 잘릴 수 있다.

 

absolute의 예시

ex) #a { position:absolute; //left와 top값에 맞춰 위치 고정

left:30px; //수평 좌표

top:50px; //수직 좌표

 

position:static 속성 – 문서의 흐름대로 배치하기

-일반적으로 왼쪽 위 모서리를 기준으로 가로가 얼마나 떨어져 있는지를 나타내는 left속성과 세로로 얼마나 떨어져 있는지 나타내는 top속성을 사용한다. 하지만 static속성을 사용할 경우 left나 top 속성을 사용해서 요소의 위치를 임의대로 지정할 수 없다.

 

position:relative속성 – 자연스럽게 배치하기

-relative는 ‘상대적’이라는 의미이다. 해당 요소가 나타나야 하는 위치를 기준으로 상대적인 위치를 말한다. 고정되어 있지 않고 다른 요소에 의해 바뀔 수 있는 위치이다. 다른 요소와 조화롭게 배치되는 형태이다.

static과 달리 left나 top속성을 이용해 요소의 위치를 옮길 수도 있다.

relative를 사용 했기 때문에 이전 요소와 겹치지 않게 표시되고 원래의 위치에서 left나 top값을 이용해 이동을 할 수 있다.

position:absolute속성 – 원하는 위치에 배치하기

-이 속성은 문서의 흐름과는 상관 없이 left와 right,top,bottom속성을 이용해 원하는 위치에 요소를 배치할 수 있다. 요소의 위치는 가장 가까운 부모 요소의 위치를 기준으로, 왼쪽으로 얼마나 떨어져 있는지, 아래로는 얼마나 떨어져 있는지를 지정해서 나타낸다. 만약 부모요소의 위치가 정해져 있지 않다면 브라우저 창의 가장 왼쪽 위 모서리를 기준으로 위치를 계산한다.

 

%absolute값을 사용하면 요소들을 가로로 배치하는 것도 가능합니다.

relative와 차이점 : relative는 left와 top속성을 지정하면 그 요소가 표시되어야 할 위치가 기준이 되지만, absolute로 지정 후 left와 top 속성을 지정하면 부모 요소의 왼쪽 위 모서리가 기준이 된다.

position:fixed속성 – 고정시키기

-문서에서 요소의 위치는 position : absolute에서와 똑같이 계산 합니다. but !! postion:fixed로 지정하면 일부 장치에서 요소가 지정한 위치에 고정되어 버립니다.

단점 : 요소가 화면 크기를 벗어났을 경우 그대로 화면 바깥에 있고 스크롤 막대도 나타나지 않는다

visibility속성- 요소를 보이게 하거나 보이지 않게 하기

-이 속성은 특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹쳐지게 설정하는 속성입니다. hidden으로 하면 감춘 요소들은 눈에 보이진 않지만 실제로는 공간에 남아있습니다.

%display와 차이점 : display:none을 이용해 요소를 감추면 실제 공간 차지 X 없는 요소 취급

속성 값

(1)visible = 요소를 화면에 표시한다 (기본 값)

(2)hidden = 요소가 화면에서 감춰진다 크기는 그대로 유지 배치에 영향을 줌

(3)collapse = 표의 행이나 열,행그룹,열그룹 등에서 지정하면 서로 겹쳐지도록 조절

(4)inherit = 부모 요소의 visibility속성을 상속합니다.

 

z-index속성 – 요소 쌓는 순서 정하기

- z-index값이 작을수록 아래에 쌓이고 클수록 값이 작은 요소보다 위에 쌓입니다. 값을 명시하지 않을 경우 가장 먼저 삽입하는 요소가 z-index:1 값을 가지며 그후 삽입 값들은 점점 커집니다.

ex) z-index:숫자값;

 

z-index:999처럼 값을 아주 크게 했을 경우 무조건 맨 앞에 표시됩니다.

 

float속성-요소를 떠 있게 하기

-요소를 문서 위에 떠 있게 하는 것. 여기에서 “떠 있다” 라는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 것이다.화면의 크기가 달라져 문서의 배치가 바뀌면 떠 있는 요소들의 위치에도 영향을 받는다. 따라서 정확히 위치 값을 가지고 배치하는 것과는 구분해서 “떠 있다 ” 라거나 “플로팅된다”라고 한다.

float속성은 문서의 레이아웃을 조절하려고 할 때 사용된다. 이때 요소가 떠 있으려면 위치가 고정되면 안되기 때문에 position속성에서 absolute를 사용하면 안된다.

ex)float:속성 값;

 

속성 값

종류 : left, right, none (좌우 어느쪽으로도 배치되지 않은 상태)

 

이미지와 텍스트를 나란히 표시하려고 할 때 이미지에 float속성을 사용한다.

ex) img { float : left ; } ->이미지를 왼쪽에 떠 있게 함

 

clear 속성 - float 속성 무효로 만들기

- float 속성을 이용하여 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다.

속성 값

(1)left : 왼쪽으로 떠 있지 않도록 한다

(2)right : 오른쪽으로 떠 있지 않도록 한다

(3)both : 둘다 떠있지 않도록 한다

(4)none: 모두에 뜰 수 있다 (기본 값)

 

예를 들어, folat속성으로 오른쪽에 배치하면 그 다음에 오는 푸터 역시 오른쪽으로 배치된다 이것을 방지하기위해 clear속성을 사용한다.