[CSS] CSS 위치 속성 : 디스플레이, 포지션, 플로트, 정렬

728x90

디스플레이

˙ 웹 페이지의 레이아웃을 결정하는 속성

˙ 해당 HTML 요소가 웹 부라우저에 언제, 어떻게 보이는가를 결정

˙ 대부분의 HTML 요소는 블록(block) / 인라인(inline) 두 가지 값 중 하나의 값을 가진다

블록 (block)

: 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지

인라인 (inline)

: 새로운 라인에서 시작하지 않고, 요소는 해당 HTML 요소의 content 만큼만 너비를 차지

인라인-블록 (inline-block)

: 요소 자체는 인라인처럼 동작, 해당 요소 내부에서는 블록처럼 동작

visibility

- 해당 요소가 웹 페이지에 표현될지 아닐지

- visible / hidden / collapse

HTML 요소 숨기는 방법

1. display 속성을 none으로 설정

2. visibility 속성값을 hidden으로 설정 : 웹 페이지의 레이아웃에는 존재

opacity

- 요소의 투명도를 조절

- 0.0(투명) ~ 1.0까지

포지션 (position)

static position

- top, right,... 속성값에 영향 받지 않음

- 단순히 웹 페이지 흐름에 따라 차례대로 요소들을 위치시키는 방식

- 모든 HTML 요소의 기본 설정값

relative position

- 기본 위치(정적 위치)를 기준으로 위치를 설정하는 방식

fixed position

- 뷰포트(viewport) 기준으로 위치 설정하는 방식

- 스크롤되어도 fixed position으로 지정된 요소는 항상 같은 곳에 위치

absolute position

- fixed position과 비슷하지만, view port가 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정

- 조상 요소를 가지지 않는다면, HTML 문서의 body를 기준으로

z-index 속성

- 겹치는 요소들이 쌓이는 스택(stack)의 순서를 설정

- 음수도 가능하며, 크기가 클수록 앞쪽에 위치한다

속성	설명
clip	absolute position 방식으로 위치한 요소를 자름
cursor	마우스 커서 모양 설정
overflow	내용의 크기가 박스를 넘어갈 때 처리하는 방식 설정
overflow-x	- 수평 방향
overflow-y	- 수직 방향

Float

속성	설명
float	HTML 요소가 주변 다른 요소들과 자연스럽게 어울리도록 설정
clear	float 적용 후 나타나는 요소들이 더 이상 float 속성에 영향 받지 않도록 설정
overflow	content의 크기가 해당 요소를 감싼 컨테이너 요소보다 클 때 어떻게 처리할지 설정
overflow-x	- 수평 방향 박스
overflow-y	- 수평 방향 박스

정렬 (align)

1. margin 속성을 이용한 가운데 정렬 : margin을 auto로 설정

- 해당 요소를 감싼 컨테이너 요소를 기준으로 수평 방향 가운데 정렬

- 해당 요소는 특정 너비를 가져야 하므로 width 속성값을 먼저 설정해야 함

2. position 속성을 이용한 좌우 정렬 : <body> 요소에 margin과 padding 속성값 설정

- 수평 방향 좌우 정렬

3. float 속성을 이용한 좌우 정렬 : <body> 요소에 margin과 padding 속성값 설정