2022/10/25 TIL | 페이지 레이아웃, 웹 앱 화면 설계

💭 오늘의 학습 전략

# 페이지 레이아웃

◼ Flexbox

　◾ flex

　◽ flex-grow, shrink, basis

# 웹 앱 화면 설계하기

◼ 와이어프레임 (Wireframe)

◻ 목업 (Mock-up)

◼ Selector - id와 class 적절히 사용하기

🌼 학습한 것들

◼ HTML 구성하기

◼ 레이아웃

　- 레이아웃 리셋 (HTML 문서가 가진 기본적인 스타일 제거)

　- Flexbox로 레이아웃 잡기

　- Flex 요소 (부모요소에 적용할 속성)

　- Flexbox 속성 (자식요소에 적용할 속성)

◼ flex-basis와 width의 우선순위

◼ 와이어프레임과 목업

◼ HTML로 구조 잡기

◼ id와 class 속성 적절하게 사용하기

◼ Oven을 이용한 와이어프레임 만들기 실습

🍖 포스팅 해보고 싶은 것들

◼ 와이프레임과 목업

◼ Flex, Flexbox 속성들

　- "display: flex" ➡ direction, wrap, justify-content, align-items

　- flex-grow, flex-shrink, flex-basis

 

🔥 보충이 필요한 것들

◼ Flex를 활용한 레이아웃 많이 만들어보기

　- grow, shrink, basis 등 이것저것 적용하다보면 생각과 다른 결과가 나올 때가 꽤 있다.

◼ div, semantic tag에 대한 적절한 사용

 

 

💨 하루를 마치며

1. 수업 전 외출일정은 생각보다 하루에 영향을 많이 끼친다.

2. 수업 끝나고 놓친 부분 정리, 일기쓰기, TIL을 마치면 생각보다 시간이 여유롭지 않다. 적절한 계획을 어서 찾고싶다.

3. flexbox 관련 특히 shrink는 일하면서도 꽤 헤맸는데 아직은 감을 못 잡겠다.

4. 프론트 깊게 파지 않아도 된다고는 하지만 아직 학습 초반이라 자꾸 파고들려한다. 이러고 나중에 힘빠지려고ㅋㅋ

5. 와이어프레임을 내 멋대로 그려보면서 헷갈리는 부분이 있었다. 특히 영역을 나누고, 세부적인 영역을 나누는 과정이  그렇다. "이게 맞나?"

6. 내일 있을 첫 Pair programming이 걱정되고 긴장된다!