HTML 코드
<div class="spacer">본문</div>
<footer>
<div class="cols">
<div><b>제품</b><a>기능</a><a>가격</a></div>
<div><b>회사</b><a>소개</a><a>채용</a></div>
<div><b>지원</b><a>문의</a><a>FAQ</a></div>
</div>
<small>© 2026 MyCompany</small>
</footer>
<style>
body{padding:0;display:flex;flex-direction:column;min-height:100vh}
.spacer{flex:1;padding:20px;color:var(--muted)}
footer{background:var(--surface);border-top:1px solid var(--border);padding:20px}
.cols{display:flex;gap:40px}
.cols div{display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.cols b{color:var(--fg)}
small{display:block;margin-top:16px;color:var(--muted)}
</style>AI에게 이렇게 요청하세요
페이지 하단에 4열로 열마다 제목과 링크 3~4개, 맨 아래 줄에 저작권 표기가 있는 푸터 만들어줘
<div class="spacer">본문</div>
<footer>
<div class="cols">
<div><b>제품</b><a>기능</a><a>가격</a></div>
<div><b>회사</b><a>소개</a><a>채용</a></div>
<div><b>지원</b><a>문의</a><a>FAQ</a></div>
</div>
<small>© 2026 MyCompany</small>
</footer>
<style>
body{padding:0;display:flex;flex-direction:column;min-height:100vh}
.spacer{flex:1;padding:20px;color:var(--muted)}
footer{background:var(--surface);border-top:1px solid var(--border);padding:20px}
.cols{display:flex;gap:40px}
.cols div{display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.cols b{color:var(--fg)}
small{display:block;margin-top:16px;color:var(--muted)}
</style>언제 쓰나
사업자 정보, 약관·개인정보 처리방침 링크, SNS 링크처럼 꼭 있어야 하지만 자주 보지 않는 정보.
비슷한 것과 차이
- 구분선: 영역 사이를 나누는 선 하나. 푸터는 독립된 영역 전체