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

CALKO LAB

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

티스토리툴바