메인 브랜드 컴포넌트는 처음 사이트에 들어갔을 때 브랜드를 어필할 수 있는 컴포넌트를 개발하는 것이라 브랜딩 사이트라는 목적을 이루기 위해 많은 신경을 쓴 부분 중 하나이다. 디자인을 할 때부터 브랜드 명과 설명의 위치, 구도를 잡고 반응형에 따른 레이아웃도 다르게 주었다. 또한, 브랜드 명이 잘보일 수 있도록 background 사진을 어둡게 만들어 글자가 부각되도록 기획했다. 1. 반응형 웹 오류 media 쿼리를 이용해 브랜드 명과 설명의 레이아웃을 달리하면서, 글자 크기나 간격이 일정하지 않고, 모바일 화면에서는 이미지와 글자가 잘리는 오류가 발생했다. 처음에는 이미지를 html코드에 직접적으로 주고, 저체 컴포넌트 height를 vh로 설정했으나, 위와 같은 오류로 인해 다른 방법을 고려했다. ..

먼저 이 프로젝트는 프론트엔드 프로젝트임을 밝히며 글을 시작하겠다.  헤더 컴포넌트는 팀원이 반응형 웹을 구현하는 과정에서 어려움을 느껴 팀원을 대신해 구현을 하게 되었다.   1. 헤더 컴포넌트 구현 먼저, 웹 화면에서 nav bar를 구현한 상태였기에 collapsible과 toggle을 활용해 모바일 메뉴 토글을 구현하려고 했다.그러나 collapsible을 적용하는 과정에서 메뉴 아이콘에 toggle script가 적용되지 않거나, nav bar 형태 그대로 toggle되는 등 오류가 발생했다.  따라서 다른 구현 방법을 고민하게 됐다. div로 새로운 모바일 메뉴 요소를 구현해주고, media 쿼리를 이용해 display:none 속성을 적용하면되지 않을까라는 생각을 하게 됐다.media 쿼리로..