<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>홈페이지 레이아웃</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="commons.css">
<link rel="stylesheet" type="text/css" href="test.css">
<style>
main {
width:1000px;
margin: 0 auto;
font-size: 16px;
}
/*
헤더는 좌/중/우 3개로 구분하여 작성
- 좌 - 로고 등을 배치
- 중 - 검색창이나 타이틀을 배치
- 우 - ???
*/
header {
display: flex;
flex-wrap: nowrap;
min-height: 80px;
}
header > .logo {
width:25%;
}
header > .title {
flex-grow: 1;
}
header > .etc {
width:25%;
}
header > .logo,
header > .title,
header > .etc
{
display: flex;
justify-content: center;
align-items: center;
}
nav {
position: relative;
}
section {
min-height: 400px;
display: flex;
}
section > aside {
width:200px;
}
section > article {
flex-grow: 1;
}
</style>
</head>
<body>
<main>
<header>
<div class="logo">
</div>
<div class="title">
<h1>타이틀/검색창</h1>
</div>
<div class="etc">???</div>
</header>
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="#">로그인</a></li>
<li><a href="#">게시판</a></li>
</ul>
</nav>
<section>
<aside>
<div class="flex-container vertical center">
<div class="row">
<h2><a href="#" class="link">메뉴1</a></h2>
</div>
<div class="row">
<h2><a href="#" class="link">메뉴2</a></h2>
</div>
<div class="row">
<h2><a href="#" class="link">메뉴3</a></h2>
</div>
<div class="row">
<h2><a href="#" class="link">메뉴4</a></h2>
</div>
<div class="row">
<h2><a href="#" class="link">메뉴5</a></h2>
</div>
</div>
</aside>
<article>컨텐츠</article>
</section>
<hr>
<footer>
<div class="row flex-container auto-width">
<div class="left">
<a href="#" class="link">이용약관</a> |
<a href="#" class="link">개인정보취급방침</a> |
<a href="#" class="link">인재채용문의</a> |
<a href="#" class="link">훈련비 게시</a> |
<a href="#" class="link">강사채용</a>
</div>
<div class="right">
<i class="fa-brands fa-google me-10"></i>
<i class="fa-brands fa-facebook me-10"></i>
<i class="fa-brands fa-twitter me-10"></i>
<i class="fa-brands fa-instagram"></i>
</div>
</div>
<div class="row left mv-30">
<pre>KH정보교육원 ｜ 사업자등록번호 : 851-87-00622 ｜ 서울 강남 제2014-01호 ｜ 대표자 : 양진선 ｜ 책임자 : 최홍석 ｜ 개인정보관리책임자 : 양진선
강남지원 1관 : 서울특별시 강남구 테헤란로14길 6 남도빌딩 2F, 3F, 4F, 5F, 6F
강남지원 2관 : 서울특별시 강남구 테헤란로10길 9 그랑프리 빌딩 4F, 5F, 7F
강남지원 3관 : 서울특별시 강남구 테헤란로 130 호산빌딩 5F, 6F
종로지원 : 서울특별시 중구 남대문로 120 그레이츠 청계(구 대일빌딩) 2F, 3F
당산지원 : 서울특별시 영등포구 선유동2로 57 이레빌딩(구관) 19F, 20F
Copyright © 1998-2023 KH Information Educational Institute All Right Reserved</pre>
</div>
</footer>
</main>
</body>
</html>
'CSS' 카테고리의 다른 글
| 이미지 디자인 (0) | 2023.11.24 |
|---|---|
| 홈페이지 레이아웃 (0) | 2023.11.23 |
| 홈페이지 레이아웃(favicon) (0) | 2023.11.21 |
| 자주 사용하는 디자인 코드 (0) | 2023.08.29 |
| 2차 메뉴에 대한 디자인 구현 (0) | 2023.08.29 |