CALKO LAB
close
프로필 배경
프로필 로고

CALKO LAB

  • 분류 전체보기 (370) N
    • ALGORITHM (362) N
      • PYTHON (360) N
      • JAVASCRIPT (2)
    • STUDY (7)
      • Python (5)
      • CSS (1)
      • React (1)
    • 기타 (0)
  • 홈
혼자서 배우는 Flexbox: 핵심 개념과 코드 예제

혼자서 배우는 Flexbox: 핵심 개념과 코드 예제

CSS의 Flexbox는 다양한 화면 크기에 적응할 수 있는 레이아웃을 손쉽게 만들 수 있는 강력한 도구다.아래는 Flexbox를 쉽게 이해할 수 있는 예제 코드와 설명을 작성해 보았다. Flexbox 기초 개념Flex 컨테이너 설정: display: flex;를 사용하여 컨테이너 내부의 아이템들을 유연하게 배치할 수 있다.아이템 정렬: justify-content와 align-items를 사용하여 수평과 수직 방향의 정렬을 지정한다.flex 속성: 아이템의 크기를 비율로 조정하여 화면 공간을 유연하게 차지하게 할 수 있다. 포스팅 내 예제는 Codepen에서 제공하는 화면 확대/축소(1x, 0.5x, 0.25x)를 활용하면 레이아웃이 어떻게 변하는지 더 쉽게 확인할 수 있다. 필요에 따라 조정해..

  • format_list_bulleted CSS
  • · 2024. 10. 21.
  • textsms
  • navigate_before
  • 1
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (370) N
    • ALGORITHM (362) N
      • PYTHON (360) N
      • JAVASCRIPT (2)
    • STUDY (7)
      • Python (5)
      • CSS (1)
      • React (1)
    • 기타 (0)
인기 글
최근 글
최근 댓글
태그
  • #사칙연산
  • #baekjoon
  • #구현
  • #수학
  • #python
  • #BRONZE Ⅱ
  • #BRONZE Ⅲ
  • #BRONZE Ⅳ
  • #백준
  • #문자열
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.