코드스테이츠 Day4
- 페이지 레이아웃
- 요소들을 배치하는 작업
- 수직분할: 콘텐츠 가로 배치 / 수평분할: 콘텐츠 세로 배치
- Flexbox: 레이아웃 구성방법 (기본 : 좌우,상하)
-display: flex;
-부모 박스 요소에 적용하여, 자식 박스 요소의 크기, 방향, 정렬 등을 결정
-메인 축이 고정적이지 않음(=유동적)
-우선순위: flex-basis > width
-Flexbox 연습링크 https://flexboxfroggy.com/
- 부모 요소에 적용하는 Flexbox 속성(정렬)
- flex-direction(정렬축): row, column, row-reverse, column-reverse;
- flex-wrap(줄바꿈): nowrap, wrap, wrap-reverse;
- justify-content(메인 축 방향 정렬): flex-start, flex-end, center, space-between, space-around;
- align-items(cross 축 방향 정렬): flex-start, flex-end, center, stretch, baseline
- 자식 요소에 적용하는 Flexbox 속성(차지하는 공간)
- flex-grow(팽창지수) : 총합 비율
- flex-shrink(수축지수) : grow와 동시 사용 지양
- flex-basis(기본크기) : 자식 박스가 가진 기본 크기, 0-절대값, auto-상대값
- 기본값) flex: 0 1 auto;
- 웹 앱 화면 설계하기
- 와이어 프레임(Wireframe) : 뼈대를 그리는 단계
- 와이어 프레임 작성 툴 : 피그마(Figma), 미로(Miro), 오븐(Oven)
- 목업(Mock-up) : 기능은 없지만 실제와 똑같은 형태 by HTML & CSS
- 내가 만들어 본 와이어 프레임 (feat. 네이버 날씨)
[캡쳐 화면]

[화면 보고 혼자서 만들어본 것]

<느낀 점>
내가 양아치처럼 한건지 와이어 프레임 만들기가 생각보다 일찍 끝나서, 오후는 좀 여유롭게 보냈다.
Flexbox 개구리 문제 풀기 너무 재밌었는데, 문제는 풀 수 있는데 막상 직접 처음부터 다 작성하라고 하면 자신 없음. 처음이니까~
와이어 프레임도 저게 맞는지는 잘 모르겠으나,, 엄청 틀린 방향도 아닌 것 같다.
내일 첫 페어,, 과연..!
오늘 조금 여유가 있으니 여유 있을 때 운동을 부지런히 해야겠다.
시간이 있어서 학습 자료에 있던 짧은 강의 영상 2개도 두 번씩 봤고,
내일 페어 작업할 내용도 미리 조금 훑어봤다.
보니까, 페어랑 4줄 정도 html 작성하고, css 꾸미기가 목표인 것 같다.
하지만 결코 만만할 거라는 생각은 안 든다..ㅋㅋ
아무튼, 오늘도 무사히 공부 완!
같은 반 수강생들이 만든 와이어 프레임 구경해야겠다.