본문 바로가기
TECHIT 멋쟁이사자처럼/프론트엔드 스쿨

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

by D0HA 2023. 12. 28.

 

 

과제 예시

 

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

 

- 개발자 그리드

- 유지보수, 재사용성, 반응형

- 픽셀 퍼펙션

 

 

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

 

수업 진도대로 그리드를 쓰고싶은데

따로 강의를 찾아봤더니

아예 다른 방식의 사용법이였다.

아마도 그리드 시스템은 나중에 나갈 진도인 것 같고,

수업 시간에 나온 개발자 그리드(?)는 잘 모르겠다.

 

 

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

 

- 아직 레이아웃 잡는게 어려워서 걱정이다.

- 개발자 그리드 활용

 

 

구현 과정 및 완성 과제

 

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

 

- 구글 폰트 사용 시, 사용 할 weight별로 소스를 넣어야하는건가?

몬세라트 하나로 통일돼있어서 하나 가져왔는데

weight값을 높게 줘도 예제와 차이가 났다.

사용되는 굵기 별로 모아서 소스 넣었더니 잘 됐다.

 

- 뷰포트에 생긴 스크롤이 신경쓰인다.

 

- 그리드 시스템을 썼는데,

이해도가 떨어지다보니

시간이 오래 걸리는건 물론이고, 반응형까지 고려하지 못했다.

그리드 시스템 자체는 그저 따라 친거에 가까워서

다음에 제대로 활용해보고싶다.

 

 

과제 리뷰 후 느낀점

 

- 리뷰 시간에 강사님 화면으로 봤을 때

레이아웃이 오른쪽으로 치우쳐보였는데

왜그런지 확인이 필요하다.

 

- 헤더 타이틀에 가상 요소로 넣은 그림자가

콘텐츠 길이에 따라 같이 변화하도록 수정이 필요하다.

 

- 'aspect-ratio' 로 이미지가 로드되기 전에도

이미지 공간 할당 해주기

 

결과물을 내 화면으로만 확인하다보니

예상하지 못한 이슈가 생기는 것 같다.

 

자체 검수 과정까지 거쳐서

완벽하게 만들고싶은데,

당장 눈에 보이는걸 구현하는 것만도 시간이 오래 걸려서 힘들었다.