HTML : 구조를 잡아요 (헤더 header, 본문 main, 푸터 footer를 정의)
CSS : 그 구조를 배치하고 스타일링해요 (color, padding, center 등)
둘이 함께 쓰인 코드
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
display: flex; /* Flexbox를 사용하여 레이아웃을 만듦 */
flex-direction: column; /* 섹션들을 세로(위에서 아래)로 배치 */
height: 100vh; /* 화면 전체 높이를 채우도록 설정 */
}
header {
background: lightblue; /* 연한 파란색 배경 추가 */
padding: 10px; /* 내부 여백 추가 */
text-align: center; /* 텍스트를 가운데 정렬 */
}
main {
flex: 1; /* 메인 섹션을 유연하게 확장하여 남은 공간 채움 */
background: lightgray; /* 연한 회색 배경 추가 */
padding: 70px; /* 내부 여백 추가 */
}
footer {
background: lightpink; /* 연한 분홍색 배경 추가 */
padding: 10px; /* 내부 여백 추가 */
text-align: center; /* 텍스트를 가운데 정렬 */
}
</style>
</head>
<body>
<header>Header Section</header>
<main>Main Content</main>
<footer>Footer Section</footer>
</body>
</html>
그 결과
Header Section Main Content Footer Section
한양대 학생입니다. 서울캠입니다.