[TIL] 코드스테이츠 SEB BE Day 3

in TIL

💡 Today I Will Learn

  • Page Layout
  • 웹앱 화면 설계

✏️ Summary

  • HTML 구성

    • 수직분할: 화면을 수직으로 구분하여 박스를 가로로 배치
    • 수평분할: 화면을 수평으로 구분하여 콘텐츠를 세로로 배치
      (height 속성으로 수평분할을 직관적으로 할 수 있다.)

  • 레이아웃 리셋

    • <body> 태그의 기본 스타일로 인해 콘텐츠 배치가 (0,0)에서 시작하지 않는다.

    • box의 여백(margin, padding)을 생각하지 않아 어려움

      /* 이를 해소하기 위해 기본 스타일링 제거 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

  • flexbox로 레이아웃 구성

    배치 img

    부모박스 요소에 display: flex 적용하여 자식 박스의 방향과 크기 결정하는 레이아웃 구성법
    default: 자식요소는 좌에서 우로 배치

    1. 부모박스에 설정 가능한 속성
      • flex-direction
        main-axis(기본축)을 지정
        • row(default), column
      • justify-content
        main-axis의 정렬방법
        • flex-start(default), flex-end, center, space-between, space-around
      • align-items
        cross-axis의 정렬방법 (justify-content와 유사)
      • flex-wrap
        한줄, 여러줄에 걸쳐 정렬
        • nowrap(default), wrap, wrap-reverse
      • align-content
        여러줄들 사이의 간격 (한줄만 있을때는 효과가 없다 = 즉 flex-wrap: wrap 이어야 동작)
      • flex-flow
        flex-direct + flex-wrap
        자주 이용되는 두 속성을 합쳤다.
    2. 자식박스에 설정 가능한 속성
      • flex
        flex: <grow> <shrink> <basis>
        • default: flex: 0 1 auto;
      • grow
        늘어남의 정도
        해당 자식박스의 grow / 자식박스의 총 grow의 합의 비율로 조정
      • shrink
        줄어듦의 정도
        grow 속성을 이용한다면 default값 1로 두어도 좋다.
      • basis
        grow, shrink에 의해 조절되기 전 기본크기 (% 단위로 grow처럼 비율로 설정할 수 있다.)
        grow 속성이 0일 때 basis가 지정된 크기로 유지된다. (1이상일 때는 보장할 수 없다.)
      • order
        형제 박스들의 순서를 숫자로 매긴다.
      • align-self
        align-items를 무시하고 각각의 상자에 정렬을 할 수 있다.

📌 정리

레이아웃을 구성의 CSS 속성들을 실습해보면서 가장 헷갈렸던 부분이 있다.
부모박스와 자식박스에서 사용할 수 있는 속성을 구분을 하지 못해 많이 애를 먹었다. 따라서 요약정리 할때에 각각의 구역에서 사용하는 속성별로 정리를 해놓아서 효율적이었다👍

내일은 오늘 소개받은 페어와 처음 co-프로그래밍을 진행하는 날이다. 목업 정리를 잘 해놓고 확실히 헤쳐나가보자.

하나의 언어를 배우면 다른 언어를 접할 때 러닝커브가 짧아진다.
남이 잘해보여도 실무 눈높이의 신입은 같다. 그러므로 비교할 시간에 공부를 해라.

🎯 Tomorrow

  • Pair Programming
  • twittler 목업 구현

Back to [TIL] 코드스테이츠 SEB BE Day 2