CSS 배치

요소의 display 종류

현재 쓰고 있는 요소가 어떠한 방식인지 아는 것은 중요하다.

1. 블럭(block) 요소
   1. 영역의 크기를 설정할 수 있다. (기본값 width:100%)
   2. 세로로 정렬된다 (한 줄에 한 요소)
   3. 종류 : div, p, h1~h6, ul, ol, li, form, dl, dt, dd 등
2. 인라인(inline) 요소
   1. 요소의 크기를 지정해줄 수 없다.
   2. 가로로 나열된다
   3. 종류 : span, b, i, img, input, select, textarea, a
3. 인라인 - 블럭(inline-block) 요소
   1. 블럭과 인라인의 특징을 둘 다 가진다.
   2. 영역의 크기를 설정할 수 있다.
   3. 가로로 나열된다.

 

Display 이용

div { display : inline; }  /* 영역을 가로로 나열할 수 있다. 크기 지정 불가. */

span { display : block; }  /* 글씨에 영역을 줄 수 있다. 가로 나열 불가. */

a { display : inline-block; }  /* 가로로 나열하면서 크기를 지정해줄 수 있다. */

 

 

Float 이용

.clear { clear : both; }  /* float 해제 */

#box {
	/* float -> 요소를 위로 뛰워서 다른 요소와 겹칠 수 있게 한다 */
	float : left;     /* 요소를 왼쪽으로 뛰운다 */
	float : right;     /* 요소를 오른쪽으로 뛰운다 */
}

clear 이용법

1. float을 다 이용하고 나서 밑에 <div class="clear"></div>를 이용해 float을 끊어주는 것이 일반적이다.
2. clear는 보통 common.css 파일에 초기화와 함께 삽입한다.

 

 

Position 이용

#box {
	/* position */
	position : static;      /* 기본값. 영향 X */
	position : relative;    /* 상대적 주소. 자기 위치를 원점으로 계산. */
	position : absolute;    /* 절대적 주소. 문서의 좌측 상단을 원점으로 계산. */
	position : fixed;       /* 스크롤 내려도 고정 */
}

position 이용법

1. 부모에게 position : relative를 주고, 자식에게 position : absolute를 주면, 부모의 원점으로부터 계산한다.