💻 와이어 프레임(Wireframe)
- 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계
- 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것
레이아웃 리셋
- 박스의 시작을 (0,0)의 위치에서 시작하고 싶을 때 사용
* { box-sizing: border-box; }
display: flex
- 부모 박스 요소에 적용해 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
- 지정한 박스의 자식 요소가 위쪽에서 세로로 적렬된다.
flex-direction
- 자식 요소들의 정렬 축을 지정한다
- row : 가로 정렬(기본값)
- column : 세로 정렬
- reverse : 가로 오른쪽(시작) 정렬
- column-reverse : 세로 아래(시작) 정렬
flex-wrap
- 줄바꿈을 설정한다.
- nowrap : 줄바꿈을 하지 않는다 (기본값)
- wrap : 상위 요소 크기에 맞춰 줄 바꿈을 한다.
- wrap-reverse : 왼쪽 아래서부터 위쪽으로 상위 요소 크기에 맞춰 줄 바꿈을 한다.
justify-content
- 축 수평 방향 정렬
- 자식 요소들의 수평방향으로 어떻게 정렬할지 정한다. 정렬축이 row면 가로로 column이면 세로로 정렬한다.
- flex-start
- flex-end
- center
- space-between
- space-around
align-items
- 축 수직 방향 정렬
- 자식 요소들의 수평방향으로 어떻게 정렬할지 정한다. 정렬축이 row면 세로로 column이면 가로로 정렬한다.
- stretch
- flex-start
- flex-end
- center
- baseline
✍ 오늘의 느낀점
코드 스테이츠를 신청할 때부터 가장 기대했던 페어 프로그래밍 시간을 가졌다. 목표는 계산기 목업 만들기. 원래 두명이서 하는 페어 프로그래밍 이었지만 바로 옆 그룹의 한분이 불참하게 되어서 3명이서 내비게이터2, 드라이버1로 진행하게 되었다.
내비게이터로서 역할을 받고 오더를 내리는데 처음에는 잘 되었으나 조금씩 틀리면서 작동이 제대로 되지않자 당황하게 되었고 제대로 된 오더를 내리지 못하였다. 하지만 다른 내비게이터 분이 하나하나 친절하게 설명해 주셨고 자신이 오더 하다가도 나에게 기회를 넘겨 주시기도 해서 페어 프로그래밍 경험도 쌓으면서 모르는 부분에 대해 이것저것 많이 배울 수 있었다.
다음에는 페어로서의 역할을 좀 더 잘할 수 있도록 더 공부하고 노력해야겠다.
정리노트