오늘은 유투브 '드림코딩 by 엘리' 님의 채널 영상중 하나인 반응형 웹 헤더 만들기를 도전했다. 오늘만든 웹사이트는 거의 flex속성을 이용하여 만들었으며 아직까지 flex 개념을 정확하게 이해하지 못한터라 영상 시청후 3번정도 반복해서 만들었다. 또한 미디어쿼리를 이용한 반응형 웹 만드는 것도 오늘 처음해보는 것 이었으나 개념은 크게 어렵지 않아서 flex에 대한 내용만 다시한번 정리해 보도록 하겠다.

display: flex

1. flex-container : 기준이 되는 부모요소

사용가능한 속성

• display : flex (container에 작성!)
• flex-direction : 주축(main-axis) 설정
  값: row(기본값), row-reverse, column, column-reverse
  
• justify-content : 주축(main-axis) 정렬방법
  값: flex-start(기본값), flex-end, center, space-around, space-evenly, space-between
  
• align-items : 교차축(cross-axis) 정렬방법 / 한 줄일 경우 사용
  값: stretch(기본값), flex-start, flex-end, center, baseline
  
• align-content : 교차축(cross-axis) 정렬방법 / 2줄 이상일 경우 사용
  값: stretch(기본값), flex-start, flex-end, center, space-around, space-evenly, space-between
  
• flex-wrap : flex-items의 줄바꿈 여부
  값: nowrap(기본값), wrap
  
• flex-flow : flex-direction과 flex-wrap의 단축속성
  
  
  

2. flex-items : flex-container 내의 자식요소

• order : flex-item 순서지정
  값: 0(기본값,순서없음), 숫자(작을수록 우선 정렬)
• flex-grow : flex-item의 증가 너비 비율 설정
  값: 0(기본값), 숫자(증가비율)
• flex-shrink: flex-item의 감소 너비 비율 설정
  값: 1(기본값), 숫자(감소비율)
  *tip: 0으로 지정시 container가 작아져도 찌그러지지않음
• flex-basis : flex-item의 공간 배분 전 기본 너비 설정
  값: auto(기본값), px,em등의 단위로 지정

금일 실습한 반응형웹

브라우저 화면너비가 0~768px 사이에서 보이는 모습