[과제]지그재그+이벤트 페이지 만들기

 

 

과제 예시

 

이번 과제에서 고려해야 할 부분과 참고사항

 

- 이전 과제 코드에 추가하지 않고 새로 만들기

- 어렵거나 부담스러우면 부분적으로 만들어보기

 

 

어떤 식으로 구현할 것인가?

 

이전 과제와 연계된 새 과제라니..

전 과제 리뷰 시간 후에 다음 과제가 나왔으면 좋겠다.

그리드 하나도 이해가 안가서

이번에는 플렉스를 사용해야겠다.

 

 

과제 수행 전 예상되는 어려움

 

- 아직 구현하는 데 꽤 시간이 걸릴 것 같다.

- 유지보수와 재사용성 및 반응형까지 고려하며 만들 수 있을지 모르겠다.

 

 

구현 과정 및 완성 과제

 

과제 수행 중 어려웠던 부분 및 느낀점

 

- 예시처럼 위아래로 나눠진 페이지는 처음 만들어봐서

어떤 식으로 해야 할지 고민이 많았다.

 

- 그러다보니 위 아래 영역에서 겹치는 클래스를 가진 요소들을 대응하기 어려웠다.

 

- 커버 이미지 삽입이 미숙한게 크게 느껴졌다.

 

- 아래 영역은 지난번 과제인데,

다른 방식으로 만들려다가 마감 시간을 못지키고 그대로 남았다.

영역을 확인해가며 작업한 상태여서

box-shadow가 남아있다.

 

- 'aspect-ratio' 활용해보는거 지금 생각났다.

 

- 너무너무 어렵지만 익숙하지않은 것 뿐이니까,

더 많이 해보면 될거다!

 

이번 과제에서 너무 자책감 들었는데

조원분들이 멱살 잡고 끌고가주신다..

너무 감사하당..

 

 

과제 리뷰 후 느낀점

 

- <button> 사용자 에이전트 스타일 시트가 워낙 많은건 알았지만

'all: unset' 로 싹 초기화 할 줄이야..

 

- 레이아웃을 감싸주고, 또 감싸고,

그러다보니 클래스가 늘어나고 헷갈렸는데

강사님의 식판 레이아웃 이론(?)을 잘 새겨야지!

 

- 점점 구현할 페이지의 요소들이 복잡해지니

CSS var()을 잘 활용해봐야겠다.

 

- 고정 + 가변 레이아웃의 전형적인 예시

.plate {
    display: flex;
}

.plate-cover {
    width: 280px;
}

.plate-contents {
    flex-grow: 1;
    flex-basis: 0;
}

/* 고정 + 가변 레이아웃의 전형적 예시
width가 어떤 의미인지
flex-basis가 어떤 의미인지 파악이 우선 
*/