Home의 구성
완성된 모습!
주요구현 내용
이 페이지의 핵심 구현 사항은 아래와 같다.
- header를 포함하는 바탕화면
- 콘텐츠의 가운데 정렬
- 버튼 및 a태그 hover시 시간차를 둔 색상변경
1. 콘텐츠의 정렬
height를 창의 크기에 따라 유동적으로 변할 수 있도록vh를 사용했다.- 상하좌우의 가운데에 콘텐츠가 올 수 있도록 하기 위해서 콘텐츠 컨테이너인
.content_wrapper에서display: flex를 설정한 다음flex-direction: column을 통해.content_wrapper안의h1과button을 세로로 정렬할 수 있었다. - 다음 수평축과 수직축에서 콘텐츠가 가운데에 올 수 있도록
justify-content와align-items를center로 설정했다.
2. 버튼 데코레이션
- 버튼의 경우 마우스 hover를 할때 About 버튼이 fade-out 되는 기능을 구현하고 싶어 가상선택자
:hover를 통해 이를 구현했다.
3. 배경화면
- 처음에 배경화면을 위한 태그를 따로 만들어야 하는 줄 알고 div태그를 이용해 만들었다가 (아주 당연히도) section1의 콘텐츠가 배경 이미지 아래로 내려가서 당황했다. 아는 것도 실수를 통해서만 배울 수 있다는 걸 깨달음...
header에도 배경이미지를 적용하는게 힘들거라 생각했지만,display: fixed로 고정시킨 상태라서 당연하게도 적용이 손쉽게 되었다...- 화면을 꽉 채우는 배경화면을 위해서는 https://knulab.com/archives/1185 에서 설명하듯이 여러가지 방법이 있었으나, 필자는
height: 100vh; width: 100vw;로 해결을 보았다. - 배경 이미지의 정렬 및 사이즈는
background-position: center; background-size: cover;를 통해 설정했다.
