[HTML, CSS] HTML 과 CSS 기초 3

flexbox

flexbox란 CSS에서 요소들을 한 방향(가로 또는 세로)으로 유연하게 배치하고 정렬하기 위한 레이아웃 모델로, 부모 요소에 display: flex; 를 적용해 자식 요소들의 크기, 정렬, 간격을 쉽게 제어할 수 있다.

 

컨테이너

• flexbox에서 display: flex가 적용된 부모 요소를 의미.
• 내부에 있는 자식 요소들을 어떻게 배치하고 정렬할지에 대한 기준과 규칙을 정하는 역할.

아이템

• flex 컨테이너 안에 포함된 자식 요소들을 의미하며, 컨테이너가 정한 배치 규칙에 따라 실제로 화면에 놓이는 대상.

justify-content

가로 또는 세로 방향 정렬

justify-content: flex-start;    /* 기본값, 왼쪽으로부터 정렬 */
justify-content: center;        /* 가운데 */
justify-content: space-between  /* 양 끝 요소를 끝에 붙이고 사이 간격만 동일하게 배치 */
justify-content: space-around   /* 요소 주변에 동일한 여백을 줌 */

flex-direction

아이템이 배치되는 방향 결정

flex-direction: row; /* 기본값, 가로 */
flex-direction: column; /* 세로 */

flex-wrap

줄바꿈 처리

flex-wrap: nowrap;   /* 기본값, 줄바꿈 하지 않음 */
flex-wrap: wrap;     /* 줄바꿈 */

flex-grow

남는 공간을 얼마나 차지할지 결정

flex-grow: 1;

flex-shrink

공간 부족 시 줄어드는 정도

flex-shrink: 1;

flex-basis

아이템의 시작 크기

flex-basis: 200px;

flex

위의 세가지 축약 속성

flex 1 1 200px;   /* flex-grow flex-shrink flex-basis */

align-items

주축과 수직 방향 정렬

align-items: stretch;   /* 기본값, 위로부터 정렬, 자식의 height가 없을 때 동작 */
align-items: center;    /* 가운데 */
align-items: flex-end;  /* 아래로 정렬 */

align-content

여러 줄 정렬

align-content: center;
align-content: space-between;

align-self

특정 아이템만 정렬 다르게 적용

align-self: center;

gap

아이템 간 간격

gap: 20px;

gridbox

CSS에서 요소를 행과 열을 기준으로 배치하는 2차원 레이아웃 시스템. display: grid;로 적용한다.

align-* : 세로(수직)
justify-* : 가로(수평)
*-items : 모든 아이템의 기본 정렬(컨테이너에 설정)
*-self : 특정 아이템 1개만 설정

grid-template

/* 열의 개수와 크기를 설정 */
grid-template-columns: 1fr 2fr 1fr /* 값을 공백으로 나열한 개수 = 열 개수 */

/* 행의 개수와 크기를 설정 */
grid-template-rows: auto 200px;

/* grid를 '좌표/라인 번호'가 아니라 '이름(영역)'으로 설계하게 해주는 속성 */
grid-template-areas

grid-template-areas:
    "header header"  /* 큰따옴표 한 줄 = 한 행 */
    "nav    main"    /* 따옴표 안의 토큰 개수 = 열 */
    "footer footer";  
/*  "header header"  2칸(2열)이며 둘 다 header라서 가로로 2칸이 합쳐진 형태 */

justify-items

grid 컨테이너에서 각 grid 셀 안에서 아이템을 가로 방향으로 어떻게 정렬할지를 정하는 속성

justify-items: center;    /* 각 셀의 가로 중앙에 위치 */
justify-items: row-gap;   /* 행과 행 사이 간격을 동일 */
justify-items: stretch;   /* 아이템이 각 칸의 가로폭을 꽉 채우도록 늘림 */
justify-items: start;     /* 각 셀의 왼쪽에 붙음 */
justify-items: end;       /* 각 셀의 오른쪽에 붙음 */

place-items

세로/가로 정렬을 한 번에 설정

place-items: center;
place-items = align-items(세로) + justify-items(가로)

아이템에 사용하는 속성

grid-column
grid 아이템이 가로 방향으로 어디서 시작해서 어디까지 차지할지를 정하는 속성
grid-column: 1 / 3;
1번에서 시작, 3번 전까지 차지(1열 + 2열 > 2칸 차지)

grid-low
grid 아이템이 세로 방향으로 어디서 시작해서 어디까지 차지할지를 정하는 속성

grid-area
grid-area: header;
영역 이름을 지정(grid-template-areas와 세트)

justify-self
justify-self: center;
grid 아이템 한 개를 셀 안에서 가로 방향으로 어떻게 정렬할지 정하는 속성

align-self
grid 아이템 한 개를 셀 안에서 세로 방향으로 어떻게 정렬할지 정하는 속성

place-self
place-self: center;
grid 아이템 한 개의 정렬을 align-self + justify-self 정하는 속성

* 반응형 그리드
fr: 남는 공간을 비율로 나누는 단위
    1fr 2fr;

repeat()
반복 정의
repeat(3, 1fr) -> 1fr 1fr 1fr과 동일

minmax()
트랙(열/행)의 크기를 최소 ~ 최대 범위로 지정하는 함수
minmax(200px, 1fr) -> 1열은 최소 200px, 공간이 남으면 최대 1fr까지 늘어남

auto-fit / auto-fill
repeat()에서 열(또는 행) 개수를 자동으로 만들 때 쓰는 키워드
repeat(auto-fit, minmax(200px, 1fr))
컨테이너 폭을 보고 minmax(200px, 1fr)짜리 열이 한 줄에 몇 개 들어갈 수 있는지 계산, 그 개수만큼 열을 반복해서 생성
auto-fit: 남는 빈 칸이 생기면 그 칸을 없애서 아이템들이 더 넓게 늘어나게 함
auto-fill: 가능한 만큼 열(칸)을 끝까지 채워서 만들어 둠

반응형

웹이나 앱 화면이 사용자의 기기 환경에 맞춰 화면 크기, 해상도, 방향(가로, 세로) 등에 따라 레이아웃과 요소 배치가 자동으로 변화하도록 설계하는 사고방식을 의미한다.

미디어 쿼리

CSS에서 화면의 너비, 높이, 해상도, 기기 방향 같은 조건에 따라 서로 다른 스타일을 적용할 수 있게 해주는 기능

@media (조건) {
    조건을 만족할 때 적용되는 CSS
}

브레이크 포인트

• 반응형 웹에서 화면 크기에 따라 레이아웃이나 스타일이 바뀌는 기준을 의미
• 주로 미디어 쿼리에서 min-width나 max-width 값으로 설정되며, 이 지점을 기준으로 요소의 배치, 크기, 정렬 방식이 달라져 모바일 / 태블릿 / 데스크탑 등 각 기기에 맞는 화면 구성을 만들 수 있음
  • 480px 이하 : 모바일
  • 768px 이하 : 태블릿
  • 1024px 이상 : 데스크탑
  • 1200px 이상 : 와이드 데스크탑

max-width(이하)
@media (max-width: 768px){...}
768px 이하로 작아지면 적용

min-width(이상)
@media (min-width: 1024px){...}
1024px 이상으로 커지면 적용

AND
@media (min-width: 768px) and (max-width: 1023px){...}
768px ~ 1023px 사이에만

OR
@media (max-width: 480px) or (min-width: 1200px){...}
480px 이하 또는 1200px 이상

변수

자주 사용하는 스타일 값을 이름으로 정의해 두고 필요할 때마다 재사용할 수 있게 해주는 기능으로, --변수이름 형태로 선언하고 var() 함수로 불러와서 사용한다.

선언 방법
:root {
    --main-color: #1234db;
    --font-size-base: 15px;
    --spacing: 20px;
}

사용 방법
body {
    background-color: var(--main-color);
    font-size: var(--font-size-base);
}

transition

요소의 상태가 변경될 때 스타일 값이 즉시 바뀌지 않고 일정 시간에 걸쳐 부드럽게 변화하도록 만드는 기능

선택자 { trasition: 속성 시간; }

transition-property: width, background-color;
어떤 속성을 애니메이션 할지 지정

transition-duration: 0.5s;
변화가 진행되는 시간

transition-timing-function: ease;
변화 속도의 흐름
    - ease: 시작과 끝은 느리고 중간은 빠르게 움직임
    - linear: 처음부터 끝까지 같은 속도로 움직임
    - ease-in: 시작은 느리고 점점 빨라짐
    - ease-out: 시작은 빠르고 끝은 느려짐
    - ease-in-out: 시작과 끝은 느리고 중간은 빠르게 움직임

transition-delay: 0.2s
시작 지연 시간

transition: 속성 시간 타이밍 지연;
축약 문법

transform

• 요소의 위치나 형태를 변경하는 속성으로 화면에서 요소를 이동시키거나, 회전시키고, 크기를 변경하거나, 기울이는 등의 변형을 할 수 있음
• 문서의 실제 레이아웃 흐름에는 영향을 주지 않고 시각적으로만 변형되기 때문에 다른 요소의 배치가 깨지지 않으며, GPU 가속을 활용해 성능이 좋아 애니메이션이나 인터렉션 효과를 구현할 때 자주 사용한다.

선택자 { transform: 변형함수(값); }

translate: 이동
scale: 크기 변경
rotate: 회전
skew: 기울이기
transform: 여러 변형 함께 사용

animation

@keyframes를 이용해 여러 단계의 스타일 변화를 정의하고 이를 자동으로 재생하는 기능으로, 사용자 상호작용이 없어도 시간의 흐름에 따라 요소가 움직이거나 변형되도록 만들 수 있음

@keyframes 애니메이션이름 {
    단계 {
        스타일;
    }
}

animation-name
animation-name: fade
적용할 @keyframes 이름을 지정

animation-duration
animation-duration: 2s;
애니메이션 한 번 실행되는 시간

animation-timing-function
animation-timing-function: ease-in-out
애니메이션 속도 변화 방식

animation-delay
animation-delay: 1s
애니메이션 시작 전 대기 시간

animation-iteration-count
animation-iteration-count: infinite;
반복 횟수 지정. 숫자 또는 infinite(무제한)

animation-direction
animation-direction: alternate:
재생 방향. forward(앞으로), alternate(앞으로 뒤로)

animation-fill-mode
animation-fill-mode: forwards;
시작/종료 후 스타일 유지 여부

animation-play-state
animation-play-state: paused;
애니메이션 재생/정지. play(진행), paused(멈춤)