개발을 하는 도중...
footer를 페이지 가장 하단에 고정시키고 싶은데 자꾸 어중간한 위치에 있는 것이다.. (페이지 중간쯤?)
body, html의 height를 100%,
footer를 postion: absolute하고 bottom: 0을 해놓은 상태인데도 말이다.
페이지를 개발자 모드로 봤더니 화면 전체크기가 1519x742로 설정되어 있는 것이다.(높이는 개발자 모드로 인해 좀 작아진 상태)
'읭? body의 height를 분명 100%설정했고, 스크롤도 될 정도로 height가 꽤 되는데 height가 왜 742밖에 안되지???'
결론은
position: absolute 때문이었다.
position 값을 주면(static제외) 레이아웃이 달라져(z-index 자연스래 적용돼서) height를 인식할 수 없었던 것이다!!!
나는 페이지 내용wrap을 사정상(tab으로 구현해서) absolute을 쓸 수밖에 없었다.
그래서 position: absolute된 부분의 높이는 body에 적용이 안됐던 거였다...
그리고 나는 footer에도 absolute를 굳이 넣어서 이상했던거였다. absolute를 빼고 display:flex, flex-direction:column등등(위치조절) 했더니 원하는대로 됐다
이 부분에 대해 흔들리는 분은 아래 mdn을 다시한번 읽어보자!
z-index 적용 - CSS: Cascading Style Sheets | MDN
« CSS « CSS z-index 이해하기
developer.mozilla.org
position - CSS: Cascading Style Sheets | MDN
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.
developer.mozilla.org
html코드는 순차적으로 구현되니까 굳이 absolute를 쓰지 않아도 되는 부분은 되도록 쓰지 말자!
'HTML & CSS' 카테고리의 다른 글
| CSS - 이미지 윗 부분만 border-radius 처리 하는 법 (0) | 2022.02.19 |
|---|---|
| CSS - 넘치는 글 scroll로 만들고 커스텀하기 > overflow (+ scroll 숨기기) (0) | 2022.02.18 |
| 웹 프론트(4) - HTML tag(1) (0) | 2022.01.09 |
| 웹 프론트(3) - HTML 구조 (0) | 2022.01.08 |
| 웹 프론트(2) - 웹사이트를 구조화하는 연습을 하자 (0) | 2022.01.06 |