SEB_FE_39 회고 7일차

레이아웃 리셋

* {
  box-sizing: border-box;
}

body {
    margin: 0;
  	padding: 0;
}

1. 브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다름
2. 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있다.
3. 초기화를 위한 다양한 라이브러리가 등장

Flexbox

1. display: flex; 는 자식 요소가 아닌 부모 요소에 적용해야 함
2. flex-direction 을 이용하여 요소의 정렬 방향을 결정
   • row //기본값 좌우 정렬
   • column //상하 정렬
3. flex-grow 를 이용하여 요소를 얼마나 늘릴 것인지 결정
4. flex-basis 를 이용하여 요소의 기본 크기를 결정

내가 잘 모르는 것

• justify-content 와 align-items을 이용한 정렬을 모호하게 이해함
  내일 계산기 목업 마무리와 5월 5일 복습을 통해 이해하기!

오늘의 감정

오늘은 flex를 이용한 정렬로 vscode 레이아웃을 만들어 보았다. 오전시간에는 레이아웃을 한번에 만들려는 무모한 도전으로 점심시간을 날렸다. 오후에 지금까지 써놓은 코드를 다 지우고 레이아웃 하나 하나씩 천천히 다 해보고 챕터에 나와 있는 대로 완성했다. 그리고 페어와 함께 계산기 목업을 만드는 시간을 가졌다. 이번 페어는 나보다 css를 조금 덜 경험한 사람이었다. 물론 나 또한 잘 모르는건 마찬가지지만 내가 좀 더 이끌고 이야기 했던것 같다. 솔직히 쉽진 않았지만 페어도 적극적으로 아이디어를 냈고 우린 더디지만 하나 하나 만들어 나아갔다. 내일까지 진행되는 계산기 목업 만들기를 잘 마쳤으면 좋겠다.