HTML, CSS - 3

---

 

 

 

 

 

1 . flexbox

 

 

 

 

flexbox

 

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

 

 

컨테이너

 

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

 

 

아이템

 

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

 

 

flex-direction

 

• 아이템이 배치되는 방향 결정
• flex-direction: row;  => 기본값, 가로 
• flex-direction: column;  => 세로 

 

 

justify-content

 

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

 

 

align-items

 

• 주축과 수직 방향 정렬
• align-items: stretch;  => 기본값, 위로부터 정렬, 자식의 height가 없을 때 동작(부모 크기에 맞춰 확장)
• align-items: center;  => 가운데 
• align-items: flex-end;  => 아래로 정렬 

 

 

flex-wrap

 

• 줄바꿈 처리
• flex-wrap: nowrap;  => 기본값, 줄바꿈 하지 않음 
• flex-wrap: wrap;  => 줄바꿈 

 

 

align-content

 

• 여러 줄 정렬
• align-content: center;
• align-content: space-between;

 

 

gap

 

• 아이템 간 간격
• gap: 20px;

 

 

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-self

 

• 특정 아이템만 정렬 다르게 적용
• align-self: center;

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

2 . gridbox

 

 

 

 Gridbox

 

• CSS에서 요소를 행과 열을 기준으로 배치하는 2차원 레이아수 시스템
• display: grid;

 

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

 

 

 

grid-template-columns

 

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

 

 

 

grid-template-rows

 

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

 

 

grid-template-areas

 

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

 

• grid-template-areas:

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

 

 

 

gap

 

• gap: 20px;
• row-gap, column-gap
• row-gap: 20px;
• column-gap: 20px;

 

 

justify-items

 

• justify-items: center;  /* 각 셀의 가로 중앙에 위치 */
• justify-items: row-gap; /* 행과 행 사이 간격을 동일 */
• justify-items: stretch; /* 아이템이 각 칸의 가로폭을 꽉 채우도록 늘림 */
• justify-items: start;   /* 각 셀의 왼쪽에 붙음 */
• justify-items: end;     /* 각 셀의 오른쪽에 붙음 *
• grid 컨테이너에서 각 grid 셀 안에서 아이템을 가로 방향으로 어떻게 정렬할지를 정하는 속성

 

 

 

align-items

 

• 행 방향 정렬

 

 

 

place-items

 

• place-items: center
• place-items = align-items(세로) + justify-items(가로)
• 세로/가로 정렬을 한 번에 설정

 

 

 

 

 아이템 사용하는 속성

 

 

 

grid-column

 

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

• grid-column: 1 / 3;
• 1번에서 시작, 3번 전까지 차지(1열 + 2열 > 2칸 차지)

 

 

 

grid-row

 

• grid 아이템이 세로 방향으로 어디서 시작해서 어디까지 차지할지를 정하는 속성
• 작성 방법은 grid-column과 동일

 

 

 

 grid-area

 

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

 

 

 

justify-self

 

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

 

 

 

align-self

 

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

 

 

 

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: 가능한 만큼 열(칸)을 끝까지 채워서 만들어 둠

 

 

 

 

 

 

---

 

 

 

 

 

 

3 . 반응형

 

 

 

 

반응형

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

 

 

미디어 쿼리

• 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) and (min-width: 1200px){ ... }
• 480px 이하 또는 1200px 이상

 

 

 

 

 

---

 

 

 

 

 

4 . CSS 변수

 

 

 

 

 

변수

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

 

• :root {
              --main-color: #3498db;
              --font-size-base: 15px;
              --spacing: 20px;
          }

 

 

• body {
              background-color: var(--main-color);
              font-size: var(--font-size-base);
          }

 

 

 

 

css 변수에 기본값 지정

• color: var(--sub-color, black);

 

 

 

범위별 변수

 

• .card {
              --card-padding: 12px;
              padding: var(--card-padding);
          }

 

 

 

 

 

 

 

---

 

 

 

 

 

 5 . CSS 우선 순위

 

 

 

차례대로 

 

1. !important

 

2. 인라인 스타일 (HTML 내부 style 속성)

 

3. ID 선택자 (#)

 

4. 클래스 선택자 (.), 의사 클래스(:), 속성 선택자([])

 

5. 태그 선택자

 

 

=> 같은 우선 순위일 때는 마지막에 적은 것이 적용됨

 

 

---

 

 

 

 

 

6 . transition

 

 

 

 

transition

 

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

 

• 선택자 { transition: 속성 시간; }

 

 

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: 속성 시간 타이밍 지연;

=> 축약 문법

 

 

 

 

 

 

 

 

---

 

 

 

 

 

7 . transform

 

 

 

 

 

transform

 

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

 

 

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

 

 

변형 함수

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

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

8 . animation

 

 

 

 

animation

 

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

 

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

 

• @keyframes bounce {
              0% { transform: translateY(0); }
              25% { transform: translateY(-50); }
              50% { transform: translateY(-10); }
              75% { transform: translateY(20); }
              100% { transform: translateY(0); }
          }

 

 

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(멈춤)

 

 

 

• animation: name duration timing-function delay iteration-count direction fill-mode;

=> 한 번에 축약한 버전