제로하우스

웹 페이지를 개발하면 Footer를 사용할 때가 많다. HTML 컴포넌트에 다음과 같이 CSS를 적용하면, 페이지의 컨텐츠 길이와 상관 없이 항상 페이지 하단에 표시되는 footer를 만들 수 있다. Footer .footer { background: #F4F7F7; height: 2rem; margin-top: auto; width: 100%; position: absolute; bottom: 0; left: 0; } 위와 같이 코드 작성하면 아래와 같이 적용된다.

CSS의 flex를 이용하여 간단한 3단 레이아웃을 만들어본다. 위와 같은 레이아웃으로 만들어본다. HTML 작성 먼저 간략하게 HTML 코드를 작성한다. Header Left Content Main Content Right Content Footer 영역별 색상 적용 각 영역이 잘 보이도록 간단하게 영역별로 색상을 적용한다. /* layout.css */ header, footer { background: #4a4a4a; color: #f9f9f9; padding: 0.3em 0; } #left-content, #right-content { background: #eee; flex: 1; } #main-content { background: #f9f9f9; } 3단 레이아웃 만들기 마지막으로 아래와 같..