Chunho’s DevLife

소개 프로젝트를 시작할 때, 나는 Header, Nav, Section, 그리고 Footer로 기본 레이아웃을 구성했다. Nav는 항상 화면의 왼쪽 중앙에 고정되어야 했기 때문에, 화면을 Header, Section, 그리고 Footer로 나누어 설계했다. Header와 Footer의 높이는 고정되어 있었지만, Section은 나머지 영역의 100%를 차지해야 했다. 문제 레이아웃을 설정하고 Section의 높이를 100%로 지정했지만, 화면 높이를 꽉 채우지 못하는 문제가 발생했다. 이후 문제 해결을 위해 높이 값을 부모 요소인 html 및 body에 의존해야 한다는 점을 깨달았다. 원인 하지만 문제는 계속해서 발생했고, 개발자 도구를 사용하여 Elements 탭을 검사한 결과, html 및 body ..

Footer에 position:absolute를 주고, bottom 0으로 고정시키면 Footer를 바닥에 고정시킬 수 있다. 하지만 위와 같이 화면의 세로 px이 부족하거나 브라우저의 하단을 잡고 끌어올리게 될 경우 Footer가 Section을 잡아먹는 현상이 발생한다. 따라서 Footer는 화면의 하단을 잡고 끌어올릴 경우, 덮여져야 한다고 생각했다. 만약 Layout에서 height을 100vh로 줄 경우, 위와 같이 Footer 아래로 여백이 생기는 현상이 발생한다. 이를 해결하기 위해서 Body에 flex를 준 뒤, Section(main)에 flex 1을 주게 되면, Section이 차지하는 비중이 가장 많아지게 되어 화면의 세로 px과 상관 없이 항상 footer가 바닥에 붙어있게 된다.

모달창이 닫힐 때 에니메이션을 주기 위해 우선 모달창을 제어하는 state를 제외하고 에니메이션을 제어 할 state를 하나 더 만들어주었다. const [animationOn, setAnimationOn] = useState(false) 이후 닫기 버튼 클릭 시 animationOn을 true로 바꿔주고, setTimeout을 사용하여 0.5초 후 animationOn과 modalOpen을 false로 바꿔주면 된다. setAnimationOn(true) setTimeout(() => { setAnimationOn(false) setModalOpen(false) }, 500) animationOn이 true로 설정되어 있을 때, 아래와 같이 에니메이션 css를 적용해주어 효과를 입힐 수 있었다.ㅁ $..

GridBox 사용 시 justify-content가 먹히지 않는 현상이 발생하였다. grid-template-columns: 20% 20% 20% 20%; 를 적용하고 정렬을 위해 justify-content에 space-between을 주었지만 아래와 같이 적용되지 않았다. grid박스 안에 있는 item에 고정된 width 값을 준 것이 문제였다. 정렬을 하기 위해서는 item의 비율을 width로 직접 적용하면 안되고, grid의 grid-template-columns 또는 grid-template-rows 에서 %를 사용하여 지정해주어야 한다. 위와 같이 수정을 해주면 정렬이 잘 되는것을 확인할 수 있었다.