Day 4 Flexbox와 Wireframe

2022.06.28

---

1.  오늘의 학습

• Flexbox : 박스를 늘리거나 줄여 레이 아웃을 잡는 것

    • 부모 요소에 적용해야 하는 flexbox

        • "정렬"

        • flex-direction : 정렬 축 

main{
     display: flex;
     flex-direction: row;
     }

        • flex-wrap : 줄 바꿈

        • justify-content : 축 수평 방향

        • align-items: 축 수직 방향  

    • 자식 요소에 적용해야 하는 flexbox

         • "차지하는 공간"

main{
      flex: grow shrink basis;
      }

          • grow : 늘어나기

          • shrink : 줄어들기

          • basis : 박스 기본 크기

 

• Wireframe

    • 와이어로 설계된 모양

    • 레이 아웃의 뼈대

 

• 와이어 프레임 만들기 (by Oven)

---

2.  돌아보기

개구리 예제 문제를 풀면서 flexbox를 연습해보았다. 완벽하지는 않으나 80% 정도는 어떻게 써야 하는지 이해했다. 다만 코드를 입력하려면 적어둔 페이지를 참고해야 할 것 같다. 많은 시간을 투자한 것은 와이어 프레임을 그리는 것이었다. 이게 맞게 만든 것인지는 모르겠다. 최대한 페이지의 레이 아웃을 보면서 어떻게 나눠서 만들어야 할지, 어떻게 영역이 구성되는지 생각하고 만들어 보았다. 

 

내일 트위틀러 페어가 예정되어 있다. 내일도 일찍 일어나 미리 준비를 해봐야겠다. 오늘도 아침에 일어나 오늘 수업을 미리 보고, 어제 이해 안 된 부분을 한 번 더 점검했는데, 그러면서 어제 이해가 가지 않았던 content-box와 border-box를 이해할 수 있었다. 확실히 일찍 일어나서 하는 것이 피곤하지만, 좀 더 나에게 도움이 된 것 같았다. 이제 중요한 것은 이것을 루틴으로 고정시키는 것, 그리고 점심시간 직전과 직후 급격히 떨어지는 집중력을 잡는 방법을 찾는 것이다.