취미로 하는 공부라 필요해서 알아본 내용을 기록한 글입니다.
자세한 설명이 아닌 요약글입니다.
공부하면서 토막토막 추가할 예정입니다.

CSS 기초 공부 기록

px, em, rem 단위에 대해서

px

픽셀 단위 크기 설정

em

상위 element 기준 크기 설정 단위.

예를 들어 상위 element의 font-size가 10px인 경우 하위 element가 font size 1.5em로 설정되어 있으면 15px로 설정됨

rem

문서의 최상위 element 기준 크기 설정 단위.

flex 알아보기

https://heropy.blog/2018/11/24/css-flexible-box/

이거 이후 Grid도 나왔다고 함.
container와 container내에 item들의 위치 처리에 대한 속성
container에 설정하는 속성과 container내에 있는 item에 설정하는 속성이 있음.

flex container에 적용하는 속성들

display

flex 설정으로 flex를 사용함

flex-direction

item이 배치되는 주 축의 방향을 결정하는 속성
기준이 되는 축을 주 축(Main Axis), 그 축의 90도 방향을 교차축 (Cross Axis)라고 함

row (default) : 왼쪽에서 오른쪽으로
row-reverse : 오른쪽에서 왼쪽으로
column : 위에서 아래로
column-reverse : 아래에서 위로

flex-wrap

줄넘김 처리 설정 (한 줄에 담을 공간이 없을 때 줄바꿈을 어떻게 할지 결정)

nowrap (default) : 줄바꾸지 않음 (container를 삐져나감)
wrap : 다음줄로 변경
wrap-reverse : 아래가 아닌 윗줄로 변경

flex-flow

flex-direct와 flex-wrap 같이 설정할 수 있음

예를 들어 아래의 설정은

flex-flow: row wrap;

아래의 설정을 줄여 사용한 것

flex-direction: row;
flex-wrap: wrap;

justify-content

주 축 (Main Axis ) 방향 정렬

flex-start (default) : 시작 지점 정렬
center : 중간 지점 정렬
flex-end : 종료 지점 정렬
space-around : 박스 내 각 item의 padding 간격이 동일함
space-between : 박스 내 각 item 사이의 너비가 같은 간격으로 배치됨
space-evenly : 박스 내 각 item과 양 끝간 사이의 너비가 같은 간격으로 배치됨

align-items

교차축 (Cross Axis ) 방향 정렬

strech (default) : item들이 수직축 방향으로 끝까지 차지함 (container내 height 100% 같은 느낌?)
flex-start : 시작 지점 정렬
center : 중간 지점 정렬
flex-end : 종료 지점 정렬
baseline : 맨 위로 붙는게 아니라 baseline을 기준으로 정렬

align-content

flex-wrap이 설정된 상태에서 item들의 행이 2줄 이상 되었을 때 수직축 방향 정렬을 결정하는 속성

stretch : 줄 바뀐 상태로 각 줄의 item이 수직축 방향으로 끝까지 차지함 (줄 별로 height 100% 같은 느낌?)
flex-start : 시작 지점 정렬
center : 중간 지점 정렬
flex-end : 종료 지점 정렬
space-around : 박스 내 각 item의 padding 간격이 동일함
space-between : 박스 내 각 item 사이의 너비가 같은 간격으로 배치됨
space-evenly : 박스 내 각 item과 양 끝간 사이의 너비가 같은 간격으로 배치됨

flex item에 적용하는 속성

flex-basis

flex item의 기본 크기 설정.
flex-direction이 가로축(메인축 Main Axis)일 때는 너비, 세로축(교차축 Cross Axis)일 때는 높이, %, px, rem 단위 설정 가능

width 설정의 경우 단위를 지정하면 해당 간격으로 박스가 무조건 맞춰지고 글자는 박스를 삐져나가게 된다.
(word-wrap: break-word; 같은 설정으로 같이 늘어나게 설정 가능)
flex-basis를 설정하면 범위를 초과시 늘어나게 설정된다.

auto : default
*%
*px
*rem
(더 많은 설정 값이 있는데 생략...)

만약 늘어나지 않고 줄바꿈으로 처리를 하고 싶은 경우 width와 word-wrap: break-word;을 같이 사용하면 된다.

flex-grow

flex-basis의 값보다 늘어난 화면에서 basis에 설정된 너비에서 각 아이템을 어떤 비율로 늘릴지 설정하는 값.
0보다 큰 값이 설정되면 빈 공간을 메우게 되며 default는 0이어서 공간을 채우지 않음.
값은 각 item들의 확장에 대한 비율.

flex-shrink

flex-basis의 값보다 작아진 화면에서 basis에 설정된 너비에서 각 아이템을 어떤 비율로 줄일지 설정하는 값.
값은 각 item의 축소에 대한 비율.

flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성
속성 선언은 위 설명한 순서대로 하며 맨 뒤에서 부터 선언은 생략을 할 수 있다. (2개만 선언한 경우 flex-grow, flex-shrink, 1개만 선언한 경우 flex-grow만 선언한 게 됨)

기본 값은 flex-grow 0, flex-shrink 1, flex-basis auto 이다.

align-self

flex container에서 align-items로 수직축 정렬을 일괄 처리 할 수 있지만 각 item에 대해 개별 정렬 처리를 하려는 경우 해당 item에 align-self 속성을 사용한다.
align-items와 설정은 동일함

strech (default) : item들이 수직축 방향으로 끝까지 차지함 (container내 height 100% 같은 느낌?)
flex-start : 시작 지점 정렬
center : 중간 지점 정렬
flex-end : 종료 지점 정렬
baseline : 맨 위로 붙는게 아니라 baseline을 기준으로 정렬

order

각 아이템을 배치할 순서 지정
작은 숫자부터 배치를 함

z-index

Z축 정렬 설정 (position의 z-index와 같은 유형)
default 0