height

2 posts

CSS로 화면 높이의 HTML 요소 만들기

CSS로 웹사이트의 레이아웃을 잡다보면 어떤 HTML 요소의 높이를 브라우저의 화면에 맞추고 싶을 때가 있죠? 웹 페이지의 풋터(footer) 영역을 화면 하단에 붙이고 싶을 때도 그렇고 모바일에서는 네비게이션 버튼을 화면 하단에 두기도 하니까요. 이번 글에서는 CSS로 화면 높이의 HTML 요소 만드는 다양한 방법에 대해서 알아보겠습니다. 흔히 범하는 실수 CSS 초보자들이 HTML 요소의 높이를 스타일할 때 하기 쉬운 실수가 있는데요. 바로 무작정 height 속성을 100%로 설정하고 해당 요소의 높이가 화면 높이만큼 커질 거

CSS에서 height 대신에 min-height를 사용해야 하는 이유

이번 포스팅에서는 CSS에서 height 속성을 사용할 때 흔히 겪을 수 있는 문제점과 min-height 속성을 사용하여 이러한 문제를 쉽게 예방하는 방법에 대해서 살펴보았습니다. height 속성의 기본값 height 속성을 명시해주지 않으면 auto라는 키워드가 기본값으로 사용이 되는데요. height 속성이 auto로 설정되어 있는 요소는 내부 컨텐츠를 해당 요소를 딱 맞게 담을 수 있을만큼 높이가 자동 결정됩니다. 이 기본값 덕분에 우리가 height 속성을 별도로 명시해주지 않아도 요소의 높이는 화면 크기에 따라서 자동