레이아웃

CSS로 display 속성 변경하기

div { display;                       inline; }

  블록,인라인요소결정        인라인(블록을 넣으면 블록요소로 바낌)

인라인요소안에 블록요소는 넣을 수 없다.

요소 위치 정하기

#target { top; 100px; left:200px: }

         기준점에서 100과200 사이에 배치

기준 위치는 position 속성으로 결정 CSS의 position 속성은 요소의 위치 설정 방법을 나타냄

position을 설정하지 않는다면 top left right bottom 은 작동하지 않는다.

CSS는 4가지 설정 방법이 존재한다.

• 정적 위치 설정(static position) : 정상적인 흐름에 따른 배치
• 상대 위치 설정(relative position) : 정상적인 위치가 기준이 된다.
• 절대 위치 설정(absolute position) : 컨테이너 원점이 기준점이 된다.
• 고정위치 설정(fixed position) : 윈도우의 원점이 기준점이 된다.

float 속성

요소의 위치를 잡을 때 쓰는 속성

float된 요소 후에 추가 되는 요소는 float를 감싸면서 배치된다.

float 속성으로는 요소의 컨테이너 왼쪽이나 오른쪽으로만 배치가능하다 위아래x

float 를 여러번 적용할 경우 화면에 여유가 있다면 이전요소에 이어 배치된다.

float 는 어디에 이용되는가?웹 페이지의 레이아웃을 잡을 때 사용할 수 있다.

<div>요소는 근본적으로 블록요소라 한 줄을 차지하지만 같은줄에 배치하고자 할 때 float:left와 float;right로 선언하여 배치한다

float 속성을 없에는법

float 와 불가분의 관계에 있는 것이 clear 다 clear 는 float 의흐름을 제거한다.

빈곳을 채우기 위해 올라오는 Footer을 올라오지못하게 할수있다.

z-index

z-index요소의 겹침에서 요소의 스택순서 즉 요소가 앞에 있느냐 뒤에 있느냐를 지정한다.

요소는 양수혹은 음수의 스택순서를 가질 수 있다.

여기서 주의할 점은 z-index의 position 속성이 absolute나 fixed로 설정되어 있어야 한다.

요소의 크기 설정

width,weght 속성으로 결정 요소를 설정하지 않으면 브라우저가 요소 안의 콘텐츠 크기를 계산해서 요소의 크기를 결정함.

• width,height : 요소의 크기
• min-width, min-height : 요소의 최소 크기
• max-width, max-height : 요소의 최대 크기

overflow 속성

overflow 속성은 자식 요소가 부모 요소의 범위를 벗어 났을 때, 어떻게 처리할 것인지를 지정

hidden : 부모 영역을 벗어나는 부분을 보이지 않게 한다.

scroll : 부모 영역을 벗어나는 부분을 스크롤 할 수 있도록 한다.

auto: 자동으로 스크롤바가 나타난다.

학습 내용 정리

 

속성	설명
position	static : 디폴트위치; 요소는 정상적인 흐름에 따라서 배치된다. top/left/bottom/right 속성은 무시된다
	relative : 요소는 정상적인 위치에서 오프셋만큼 떨어진 곳에 배치된다.
	absolute : 요소는 컨테이너 안에서 고정된 위치에 배치된다.
	fixed : 브라우저 윈도우 안에서 고정된 위치에 배치된다. (페이지가 스크롤되어도 움직이지 않는다.)
top,bottom,left,right	이들 속성은 요소의 위치를 결정한다. 이들 값은 모두 오프셋(offse)이다. top : 위로부터의 오프셋 bottom : 아래로부터의 오프셋 left : 왼쪽으로부터의 오프셋 right : 오른쪽으로부터의 오프셋
width,height	요소의 너비와 높이를 설정한다.
float	이 속성은 "position:static 의 블록 요소에 사용된다. 이 속성이 사용되면 컨테이너 안 다른 요소가 이 요소를 감싸며 배치된다. (이 속성이 사용되면 position 과 offset 설정은 모두 무시된다.)