[TIL] #6. CSS flexbox

2022.5.3. (화)

1. 오늘의 소감

• flexbox 개구리 게임 재밌다. 확실히 flex 문제는 공부할 땐 복잡하고 어려운데 그만큼 어려운 문제를 맞추는 희열이 있다. 꿀잼!
• 이번 페어분은 귀엽고 상냥하신 분! 내 조금 어설픈 설명도 잘 알아들어주시고, 헷갈릴 때 중요한 부분을 집어주셔서 코딩이 편했다. 페어 프로그래밍을 시작 전에는 긴장도 많이 하면서, 막상 동기분을 만나고 나면 코딩하기도 즐겁고 힐링하는 기분이 드는게 신기하다. 낯선 사람 만나는 걸 두려워하던 ‘나’를 까먹을 정도이다. 처음 페어 프로그래밍 이야기를 들었을 때 엄청 걱정하던 나였는데 말이다. (물론 지금까지 만난 동기분들이 나를 편하게 잘 대해주신 덕분!)
• flex는 복잡해보이지만, 사실 실제로 쓸 때는 몇가지 속성만 쓰게되서... 일단은 부담 안가지고 실제 코드에 적용해보는 연습을 많이 하는 게 중요할 것 같다.
• 동기분이 flex를 공부하고 나면 grid도 배워보라고 하셨다. grid... 이것도 속성 종류가 정말 많았다. 하하...

2. 학습한 키워드

• 와이어프레임, 목업, flexbox, flexbox 부모한테 주는 속성과 자식한테 주는 속성 구분하기, display: flex, flex-direction: row(기본값); row-reverse; column; column-reverse, flex-wrap: nowrap(기본값); wrap; wrap-reverse, flex-flow: row wrap, justify-content: strech; flex-start; flex-end; center; space-between; space-around, align-items, align-content, flex: grow<팽창지수> shrink<수축지수> basis<기본 크기>,order

3. 키워드를 바탕으로 학습 내용 설명해보기

• 와이어프레임이란?
  • 개발 초기 레이아웃의 뼈대를 그리는 단계이다.
  • 화면 영역을 구분하여 구조를 그린 뒤, 각 영역에 사용할 태그와 id명, class명을 적어놓는다.
  • 전환효과와 애니메이션 같은 스타일링이나 UX적인 부분은 고려하지 않는다.
  • 화면 영역을 구분하고 구조를 파악하게 만드는 게 중요하다.
• 목업이란?
  • 실물 크기의 모형.
  • 웹 앱에서는 실제로 작동하는 모습과 동일하게 html 문서로 작성한 것을 말한다.
  • 화면에 보여질 기본적인 내용은 하드 코딩으로 써 넣는다.
• flexbox는 박스 크기를 유연하게 늘이고 줄여 레이아웃을 잡는 방법이다.
• flexbox 부모 속성
  • display: flex;
  • flex-direction: row(기본값); row-reverse; column; column-reverse,
  • flex-wrap: nowrap(기본값); wrap; wrap-reverse,
  • flex-flow: row wrap; → flex-direction 과 flex-wrap 의 단축속성
  • justify-content: strech; flex-start; flex-end; center; space-between; space-around,
  • align-items: 위와 속성값 동일
  • align-content: 위와 속성값 동일
• flexbox 자식 속성
  • flex: grow<팽창지수> shrink<수축지수> basis<기본 크기>
  • order
• 부모 요소에 적용되는 속성은 ‘자식 요소의 정렬'과 관련되고, 자식 요소에 적용되는 속성은 ‘각 요소의 공간 차지'와 관련된다.
• flex: 0 1 auto; 기본값
• flex: 1; === flex: 1 1 0; (단축속성에서 basis 값을 안 써주면 0이 된다.)
• 만약 2 : 1 : 3 비율로 자식 요소를 배치하고 싶다면 자식요소에 각각
• flex: 2; flex: 1; flex: 3 을 써주면 된다.
• width 와 flex-basis 값이 함께 적용된 경우, flex-basis 가 우선된다.
• flex-grow 와 flex-shrink 를 같이 사용하는 것은 권장되지 않는다.
• → flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장한다.
• flex-shrink 는 고정폭을 만들 때 0으로 준다. 이것 이상은 줄어들면 안돼! 하는 크기를 width 값이나 flex-basis 값으로 주고 flex-shrink를 0으로 주면 그 크기 이하로는 줄어들지 않는다.