TIL - CSS 레이아웃(Layout)

myong·2023년 8월 3일

CSS TIL 코드캠프부트캠프

TIL

목록 보기

5/11

레이아웃이란?

레이-아웃 / Layout(명사)
출판, 광고, 건축 분야 등에서 문자, 그림, 사진 등을 지면 위에 시각적 효과와 사용 목적을 고려하여 구성, 배열하는 일. 또는 그 기술. 순화어는 '(지면)배열', '판매김'

선택자

전체 선택자

전체 선택자는 HTML의 모든 요소를 선택한다.

* {
   property : value;
}

그룹선택자

그룹 선택자는 여러 선택자를 그룹으로 묶는 기능

보통 그룹 선택자는 중복된 속성을 여러 번 반복해서 줄 경우,
선택자를 묶어서 한번에 처리함으로써 코드를 줄여주는 역할을 한다.

.class1, .class2 {
		property : value;
}

가상 클래스 선택자

실제로 HTML 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다.

선택자:가상 클래스 {
   property : value;
}

선택자 뒤에 :가상 이벤트 를 붙이면 특정 이벤트마다 적용 할 스타일을 설정할 수 있다.

:first-child : 첫번째 자식

:last-child : 마지막 자식

:nth-child(n) : n번째 자식

:hover : 마우스를 요소에 올렸을 때

CSS 레이아웃의 흐름

CSS의 역할중 하나는 HTML의 요소들을 적절히 배치하는 것이다.

이렇게 요소를 배치하는 것을 레이아웃이라고 부르며, 이 레이아웃 시스템에는 역사가 있다.

float는 이제 거의 사용하지 않는다. 현대 웹에서는 flex와 grid를 혼용하는 추세이다.
flex가 적합한 곳에는 flex를, grid가 적합한 곳에는 grid를 선택해서 사용한다.
float가 쓰이지 않는 이유? → 반응형 웹에 적합하지 않기 때문이다.

그런데 배우는 이유?
→ float를 사용한 코드도 읽을 수 있어야 하니까!
→ 레이아웃이 어떻게 변해왔는지 알면 flex를 더 효과적으로 사용할 수 있으니까!

float 레이아웃

float는 전통적으로 레이아웃을 구성할때 사용하던 방법이다.

But, float 레이아웃은 PC로만 인터넷에 접속할 수 있던 시절에 고안되었기 때문에,
반응형 웹에는 적합하지 않는다.

❗️ 반응형 웹이란?
모바일, 태블릿, 데스크탑 PC 등 접속하는 기기의 너비에 맞추어 레이아웃이 변하는 웹페이지

float

HTML 요소를 일반적인 흐름(normal flow)으로부터 벗어나서
특정한 컨테이너의 좌측 혹은 우측을 감싸는 형태로 강제 배치할 수 있도록 도와주는 속성이다.

float: none (기본값)
float: left
float: right

clear

float가 적용된 요소에 추가로 줄 수 있는 속성으로, float의 영향력을 해당 요소에 한해 해제한다.

clear: none (기본값)
clear: left
clear: right
clear: both

flex 레이아웃

flex?

CSS 레이아웃의 꽃!
CSS 레이아웃 배치에 중점을 두고 고안되었기 때문에,
기존의 float 방식보다 훨씬 수월하고 간단하게 레이아웃을 잡을 수 있다.
flex는 레이아웃 배치 전용 기능으로 고안되었기 때문에 float에 비해 훨씬 편리하다.

flex 사용방법

<div class="container">
	<div class="item">박스1</div>
	<div class="item">박스2</div>
	<div class="item">박스3</div>
</div>

위의 코드에서 부모요소는 container, 자식요소는 item 이다.
container 요소에 display: flex를 적용시켜준다.
부모요소를 Flex Container , 자식요소를 Flex item 이라고 한다.
컨테이너는 Flex의 영향을 받는 전체 공간이고, 이 공간 내에 아이템들이 배치된다.

flex의 속성

flex가 적용된 요소(Flexbile box)에는 중심축(main-axis)와 교차축(cross-axis)이 생긴다.
이 중심축과 교차축은 Flexible box의 정렬 기준이 된다.

flex-direction
- row (행) : 중심축을 가로 방향으로 배치합니다.
- column (열) : 중심축을 세로 방향으로 배치합니다.

justify-content (중심축 방향 정렬)
- 중심축은 flex-direction 방향과 동일합니다.
- 중심축 방향으로 어떻게 정렬할지 결정합니다.
  - flex-direction: row이면 가로 방향의 정렬을 결정
  - flex-direction: column이면 세로 방향의 정렬을 결정
- flex-start: 컨테이너 시작 점을 기준으로 정렬
- flex-end: 컨테이너의 끝 부분을 기준으로 정렬
- center: 해당 중심 축을 기준으로 정렬
- space-between: 컨테이너 안에 아이템들이 균일한 여백을 두고 배치된다.
- space-around: 각 아이템에 균일한 여백을 준다.
- space-evenly: 아이템 양끝, 사이에 모든 여백이 균일하다.

align-items (교차축 방향 정렬, 즉 중심축의 반대 방향 정렬)
- stretch: 아이템 크기와 상관없이 쭉쭉 늘린다.
- flex-start: 컨테이너 시작 점을 기준으로 정렬
- flex-end: 컨테이너 끝 점을 기준으로 정렬
- center: 중앙을 기준으로 정렬