[CSS] 레이아웃 속성

 

 

display 속성

✅ 모든 요소는 자기가 기본적으로 가지고 있는 display값이 있다.

✅ Display값에 따라 블록레벨, 인라인레벨 등 렌더링 박스의 유형이 결정된다.

✅ Display 속성으로 해당 요소의 렌더링 박스의 유형이 결정되고 렌더링 여부 또한 결정할 수 있다.

 

속성 값

none	요소가 렌더링 되지 않음
inline	inline level 요소처럼 렌더링
block	block level 요소처럼 렌더링
inline-block	inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 cf) height 나 width 등과 같은 박스모델 속성을 적용할 수 있음

✅ 이외에도  list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재한다.

 

Visibility 속성

✅ 요소의 화면 표시 여부를 지정하는 속성이다.

✅ Display: none과의 차이점

→ Display: none - 요소가 렌더링 되지 않음(DOM에 존재 x)

→ Visibility: hidden - 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재)

 

속성 값

visible	화면에 표시
hidden	화면에 표시되지 않음(공간은 차지함)
collapse	셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능)

 

Float 속성

✅ 요소를 보통의 흐름에서 벗어나 띄워지게 한다.
✅ 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있다.
✅ 대부분 요소의 display값을 block으로 변경한다.
✅ Float은 둥둥떠있는 상태이지만 영역은 차지한다.

 

속성  값

none	float 시키지 않음(기본값)
left	좌측으로 float 시킴
right	우측으로 float 시킴

 

 

Clear 속성 

✅ 요소를 플로팅된 요소의 영향에서 벗어나게 하는 속성이다.

✅ Block-level 요소만 적용가능!

 

속성 값

none	양쪽으로 floating 요소를 허용(기본값)
left	왼쪽으로 floating 요소를 허용하지 않음
right	오른쪽으로 floating 요소를 허용하지 않음
both	양쪽으로 floating 요소를 허용하지 않음

 

Position 속성 

✅ 요소의 위치를 정하는 방법을 지정하는 속성이다.

✅ Absolute로 지정하면 문서의 흐름을 벗어나게되고 display를 block으로 갖는다.

✅ Offset개념도 같이 이해해야함

✅ Offset(top/left/bottom/right) 

→ Padding과 Margin에서 %값을 적용할 땐 상하좌우 방향에 관계없이 가로사이즈를 기준으로 %값이 계산된다.

→ 그러나 Offset은 top bottom (상하)는 기준이 되는 요소의 height과 left right(좌우)는 width값에 대하여 계산된다.

 

 

속성 값

static	Normal-flow 에 따라 배치되며 offset 값이 적용되지 않음 (기본값)
absolute	부모 요소의 위치를 기준으로 offset 에 따라 배치됨 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 됨 Normal-flow의 흐름에서 벗어남
fixed	뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치됨 즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타남 부모의 위치에 영향을 받지 않음
relative	자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치됨 부모의 position 속성에 영향을 받지 않음 Normal -flow의 흐름에 따름 주변 요소에 영향을 주지 않으면서 offset 값으로 이동함

✅ Nomal-flow : 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻함

       e.g. block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우도 배치되는 것을 말함

 

Z-index 속성 

✅ 요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성이다

✅ Position 값이 static이 아닌 경우 지정이 가능하다.

✅ 순서 값이 없을 경우 생성 순서(코드상 순서)에 따라 쌓인다.

✅ 부모가 z-index 값이 있을 경우 부모 안에서만 의미가 있다.

✅ 큰 값이 가장 위쪽이다. (음수 사용이 가능함)

 

속성  값

auto	쌓임 순서를 부모와 동일하게 설정(기본값)
number	해당 수치로 쌓임 순서를 설정(음수 허용)

 

 

---

학습을 위해 부스트코스 비전공자를 위한 HTML/CSS 강의를 보고  정리한 글입니다.

 

Reference

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS