Feature_startPage:화면을 분할 시 분할된 공간이 보이지 않는 오류

[minseonju]

startpage를 top, middle, bottom 3개의 공간으로 나누어 화면 구성 요소들을 각 공간에 따로 배치하고 싶은데 화면이 제대로 나누어지지 않음.

• 분할된 화면의 색상을 다르게 하여 제대로 화면이 나누어졌는지 확인해 보았지만 전부 똑같은 색상으로 보여짐.
• 개발자 도구를 이용하여 layout의 구조를 확인한 결과 화면 분할이 제대로 이루어지지 않아 layout에 반영되지 않음.
• 화면 분할이 되지 않아 구성 요소들을 원하는 위치에 정확히 배치하기 어려움(요소들이 서로 겹치는 경우가 발생함).

[luminous037]

어떻게 해결하셨나요?

[minseonju]

[start.js] <div className="start-page"> <div className="top-section"> <div className="puddle-top-box"></div> <div className="ocean"> <div className="wave"></div> 생략 <div> <div>

[start.css] .ocean { height: 100%; 생략 background: white }

top-section 안에 있는 요소인 ocean의 css에 문제가 있었습니다. 해당 요소의 height가 start-page의 최대 크기를 넘어 ocean의 background만 화면에 보이는 오류가 발생한 것이었습니다. height를 top-section 최대 크기를 넘지 않게 조정해 주면 해당 문제를 해결할 수 있습니다.

[luminous037]

참고하겠습니다.