코딩/코드스테이츠 45기(FE)

블로깅 챌린지 4일차 - Flexbox

2023. 4. 14. 21:01
목차
  1. ㅁ 주요 내용

4일차 회고


ㅁ 주요 내용

  • Flexbox
  • [실습] 계산기 목업 페어프로그래밍

1. Flexbox

  • 요소의 크기가 불문명하거나 동적인 경우에도 각 요소를 정렬할 수 있는 방법 제공
  • 구성요소: container, items

[그림] Flexbox의 구성요소

  • container 설정 속성
속성 의미
display Flex Container 정의 
flex-direction items의 주 축을 설정
flex-warp items의 줄바꿈 설정
justtify-content 주 축 정렬 방법 설정
align-content 교차 축 정렬 방법 설정(2줄 이상)
align-items 교차 축에서 items의 정렬 방법 설정(1줄)

 

  • items 설정 속성
속성 의미
order item의 순서를 설정
flex flex-grow, flex-shrink, flex-basis의 단축 속성
flex-grow item의 증가 너비 비율 설정
flex-shrink item의 감소 너비 비율 설정
flex-basis item의 공간 배분 전 너비 설정
flex-self 교차축에서 item의 정렬 방법을 설정
//item 단축 속성 예시//
.item {
flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */
flex: 1 1; /* 증가너비 감소너비 */
flex: 1 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용) */
}
/*
flex-grow를 제외한 개별 속성은 생략 가능
flex: 1; == flex-grow: 1;
단축속성인 flex에서 3번째 값인 flex-basis의 기본값은 0이 적용
하지만, flex-basis 자체의 기본값은 auto임을 기억
즉, flex:1; 혹은 flex: 1 1; == flex: 1 1 0;
*/

 

[그림] flex-grow 예시
[그림] flex-shrink 예시

 

  • flex-basis (기본값: auto)
    • 값이 auto인 경우 width, height 등의 속성으로 item의 너비 설정 가능
    • 단위 값(px,em, rem, cm 등)이 주어질 경우 설정 불가

[그림] flex-basis 예시

2. [실습] 계산기 목업 페어프로그래밍

< 페어프로그래밍 후기>

2명의 페어분과 함께 첫 페어를 진행는데, 2분 모두 성격도 좋으시고 학업에 대한 열정과 꼼꼼함 덕분에 미처 신경쓰지 못한 디테일까지 학습할수 있었던 좋은 기회였다.

중간에 막히는 부분도 있었지만 집단 지성의 힘으로 극복 완료. 그 결과 나름 만족스러운 결과물이 나온것같다.

 

'코딩 > 코드스테이츠 45기(FE)' 카테고리의 다른 글

블로깅 챌린지 6일차 - 자바스크립트 기초  (0) 2023.04.18
블로깅 챌린지 5일차 - 페어프로그래밍 (계속)  (0) 2023.04.17
블로깅 챌린지 3일차 - CSS기초  (0) 2023.04.13
블로깅 챌린지 2일차 - HTML 기초 및 심화  (0) 2023.04.12
코드스테이츠 45기 사전학습  (0) 2023.04.05
  1. ㅁ 주요 내용
'코딩/코드스테이츠 45기(FE)' 카테고리의 다른 글
  • 블로깅 챌린지 6일차 - 자바스크립트 기초
  • 블로깅 챌린지 5일차 - 페어프로그래밍 (계속)
  • 블로깅 챌린지 3일차 - CSS기초
  • 블로깅 챌린지 2일차 - HTML 기초 및 심화
2워노
2워노
워노의 코딩 일기2워노 님의 블로그입니다.
2워노
워노의 코딩 일기
2워노
전체
오늘
어제
  • 분류 전체보기 (40)
    • 코딩 (30)
      • 코드스테이츠 45기(FE) (18)
      • JavaScript (1)
      • React (5)
      • HTTP, 네트워크 (2)
      • 데일리 코딩 (2)
      • Next.js (2)
    • Project (8)
      • 삐삐(BIBI: Best Interior) (4)
      • 점메추(점심메뉴추천) (1)
      • 탑개미자원 (3)
    • UI, UX (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • CORS
  • sop
  • å
  • 프론트엔드부트캠프
  • 무한스크롤
  • vercel
  • next.js
  • Prettier format on save
  • 비동기
  • 환경변수
  • 리프래시토큰
  • 엑세스토큰
  • 나만의아고라스테이츠
  • JWT
  • 코드스테이츠
  • 호스팅케이알
  • 한글도메인
  • Prettier
  • 404에러
  • 토큰재발급
  • 토큰
  • useState
  • 도메인연결
  • Babel
  • my agroa states
  • 리액트배포
  • cloudtype
  • 임시저장
  • JSX
  • 정적리소스

최근 댓글

최근 글

hELLO · Designed By 정상우.
2워노
블로깅 챌린지 4일차 - Flexbox
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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