CSS - 레이아웃 속성과 flex

레이아웃 속성

 

position

- 텍스트 이미지, 표 등 요소의 웹 문서에 배치할 때 사용하는 속성으로 레이아웃 구성에 큰 영향을 미친다

- position은 static, relative, absolute, fixed 등의 옵션이 있다

 

static

-  HTML의 기본값으로 그냥 흐름대로 배치시켜주는 속성이다

- 그렇기 때문에 별도의 설정이 없으면 요소들의 배치는 static 설정으로 적용된다

 

 

 

relative

 

- 요소를 일반적인 문서 흐름에 따라 배치하되, 자신의 static 위치를 기준으로 이동할 수 있다.

- top, right, bottom, left 속성을 사용하여 위치를 조절할 수 있다

- 다른 요소들의 레이아웃에 영향을 주지 않는다

 

<style>
    div {
        position: relative;
        top: 10px;
        left: 20px;
        background-color: lightgray;
    }
</style>

<div>이 div는 relative로 설정된 요소입니다.</div>

 

 

absoulte

- 부모 요소를 기준으로 위치를 배치하며, 문서의 일반적인 흐름에서 제외된다

- 가장 근처에 있는 relative, fixed 처리된 부모 요소를 기준으로 레이아웃이 배치된다

- 무언가를 겹쳐서 표시하고 싶을 때 많이 사용한다

파란 색 div위에 absolute 처리된 요소가 올라간 모습

	<style>
		.container {
			position: relative;
			width: 300px;
			height: 300px;
			background-color: lightblue;
		}
	
		.child {
			position: absolute;
			top: 50px;
			left: 50px;
			background-color: coral;
		}
	</style>
	
	<div class="container">
		<div class="child">absolute로 배치된 요소입니다.</div>
	</div>

 

fixed

 

- 뷰포트를 기준으로 위치를 배치하며, 스크롤과 관계없이 항상 같은 위치에 고정된다

뷰포트의 오른쪽 아래에 위치하라고 했기 때문에 오른쪽 아래에 고정이 되어 존재한다

<style>
		div {
			position: fixed;
			bottom: 10px;
			right: 10px;
			background-color: yellow;
		}
	</style>
	
	<div>이 div는 fixed로 설정되어 화면에 고정된 요소입니다.</div>

 

display

- 요소의 레이아웃을 정의하는 속성으로, 블록 레벨 요소, 인라인 요소 등 다양한 방식으로 요소를 표현할 수 있다

- block, inline, inline-block, none 등이 주요 값

 

block

- 블록 레벨 요소로 설정하며, 한 줄을 차지하고 다음 요소는 자동으로 줄바꿈

 

 

inline

- 인라인 요소로 설정하며, 요소가 컨텐츠 크기만큼만 공간을 차지한다

 

 

inline-block

- 인라인처럼 동작하지만, 블록 요소처럼 크기(width, height)를 설정할 수 있다

 

 

none

- 요소를 렌더링하지 않으며, 화면에서 완전히 사라진다

 

overflow

- 부모요소를 넘쳐서 바깥으로 나가는 자식요소에 대한 스타일 처리를 담당하는 속성이다

- 주요 값으로는 넘치는 내용을 그대로 표시하는 visible, 넘치는 내용을 숨기는 hidden, 내용을 스크롤로 표시하는 scroll, 넘칠 경우 자동으로 스크롤을 표시하는 auto가 있다

 

하나는 visible 다른 하나는 hidden

z-index (stack order)

- 요소가 쌓이는 순서를 (Stack Order) 정의하는 속성으로, 값이 높을수록 위에 쌓인다

- position 속성이 relative, absolute, fixed 중 하나여야 적용된다.

 

relaive-absolute 처리된 요소에서 표시될 순서를 처리한 모습이다

		.box1 {
			position: absolute;
			top: 50px;
			left: 50px;
			width: 100px;
			height: 100px;
			background-color: blue;
			z-index: 1;
		}
	
		.box2 {
			position: absolute;
			top: 70px;
			left: 70px;
			width: 100px;
			height: 100px;
			background-color: red;
			z-index: 2;
		}

 

 

flex

flex

- flex는 플렉스 박스를 사용하는 레이아웃 방식으로, 요소를 수평 또는 수직으로 쉽게 정렬하고 배치할 수 있게 해준다

- 기존의 block, inline, 또는 table 레이아웃과 달리, 컨테이너와 자식 요소 간의 관계를 중심으로 배치를 동적으로 설정

- 복잡한 레이아웃(수평/수직 정렬, 간격 조정 등)을 간단한 코드로 구현

- 부모 컨테이너의 크기에 따라 자식 요소 크기와 배치가 동적으로 변화함

 

flex-direction

- flex를 사용했을 때 자식 요소가 배치되는 주 축(main axis)의 방향을 설정한다

- row(기본값): 요소를 왼쪽에서 오른쪽으로 수평 배치

- row-reverse: 요소를 오른쪽에서 왼쪽으로 수평 배치

- column: 요소를 위에서 아래로 수직 배치

- column-reverse: 요소를 아래에서 위로 수직 배치

flex로 정렬이된 div 태그들이 column이 값이 되자 수직을 배치된 모습이다

 

justify-content

- 주 축(main axis)에서 자식 요소를 어떻게 정렬할지 설정한다.

- 주요 값: flex-start, flex-end, center, space-between, space-around, space-evenly.

- flex-start(기본값): 요소를 시작 부분에 배치

- flex-end: 요소를 끝 부분에 배치

- center: 요소를 가운데 배치

- space-between: 요소 사이에 동일한 간격 배치

- space-around: 요소 양쪽에 동일한 간격 배치

- space-evenly: 요소와 요소 간, 양 끝의 간격을 동일하게 배치

 

 

flex-wrap

- 자식 요소가 컨테이너 크기를 넘을 경우, 줄 바꿈 여부를 설정

- nowrap(기본값): 모든 요소를 한 줄에 배치

- wrap: 요소를 여러 줄에 걸쳐 배치

- wrap-reverse: 요소를 여러 줄로 배치하되, 줄 순서를 반대로

 

wrap이되어 모자란 공간에 들어가지 않고 줄바꿈이 된 모습이다

align-items

- 교차 축(cross axis)에서 요소를 어떻게 정렬할지 결정.

- flex-start: 요소를 교차 축의 시작 부분에 정렬.

- flex-end: 요소를 교차 축의 끝 부분에 정

- center: 요소를 교차 축의 가운데 정렬

- baseline: 요소를 텍스트의 기준선(baseline)에 맞춰 정렬.

- stretch(기본값): 요소를 교차 축의 크기에 맞게 늘림.