제19강_실전_상단메뉴만들기

티스토리 뷰

Front-End-Web/html+css

제19강_실전_상단메뉴만들기

jsBae 2022. 10. 14. 16:59

1.전체페이지 레이아웃

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>제19강 웹사이트_메인</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<!-- 상단 헤더  -->
	<header>
		<div class="box">
			<div id="logo">
				<img src="./img/logo.png">
			</div> <!-- logo -->
			<nav id="menu">
				<ul id="top_menu">
				<li>김지영(jykim)님</li><li>|</li>
				<li>로그아웃</li><li>|</li>
				<li>정보수정</li>
				</ul>
				<ul id="main_menu">
				<li>Home</li>
				<li>출석부</li>
				<li>작품갤러리</li>
				<li>게시판</li>
				</ul>
			</nav> <!-- menu -->
		</div> <!-- box -->
	</header>

	<!-- 메인 이미지 -->
	<section id="main_image">
		<a href="#"><img src="./img/btn_class.png"></a>
	</section> <!-- main_image -->

	<!-- 사이드바와 메인 섹션 -->
	<div class="box">
		<!-- 사이드바 -->
		<aside>
			<h2 class="title1">The 베이킹</h2>
			<p class="comment">안녕하세요. 쿠키와 빵 만들기 정보를 공유하고 소통하는 공간입니다.</p>
			<div class="search">
				<input type="text"><button>검색</button>
			</div> <!-- search -->

			<h2 class="title2">베이킹/요리</h2>
			<ul class="list">
				<li>쿠키 만들기</li>
				<li>빵 만들기</li>
				<li>마카롱 만들기</li>
			</ul> <!-- list -->

			<div class="ripple">
				<h2>최근 댓글</h2>
				<ul>
					<li>안녕하세요.</li>
					<li>안녕하세요.</li>
					<li>안녕하세요.</li>
				</ul>
			</div> <!-- ripple -->
		</aside>

		<!-- 메인 섹션 -->
		<section id="main">
			<div id="main1">
				<h3 class="title1">알림</h3>
				<ul class="latest">
					<li class="items">
						<div class="subject">쿠킹 클래스 연기합니다.</div>
						<div class="date">09.30</div>
					</li>
					<li class="items">
						<div class="subject">쿠킹 클래스 연기합니다.</div>
						<div class="date">09.30</div>
					</li>
					<li class="items">
						<div class="subject">쿠킹 클래스 연기합니다.</div>
						<div class="date">09.30</div>
					</li>
					<li class="items">
						<div class="subject">쿠킹 클래스 연기합니다.</div>
						<div class="date">09.30</div>
					</li>
					<li class="items">
						<div class="subject">쿠킹 클래스 연기합니다.</div>
						<div class="date">09.30</div>
					</li>										
				</ul> <!-- lastest -->

				<h3 class="title2">게시판</h3>
				<ul class="latest">
					<li class="items">
						<div class="subject">안녕하세요. 반갑습니다.</div>
						<div class="date">09.30</div>
					</li>
					<li class="items">
						<div class="subject">안녕하세요. 반갑습니다.</div>
						<div class="date">09.30</div>
					</li>
					<li class="items">
						<div class="subject">안녕하세요. 반갑습니다.</div>
						<div class="date">09.30</div>
					</li>
					<li class="items">
						<div class="subject">안녕하세요. 반갑습니다.</div>
						<div class="date">09.30</div>
					</li>
					<li class="items">
						<div class="subject">안녕하세요. 반갑습니다.</div>
						<div class="date">09.30</div>
					</li>
				</ul> <!-- latest -->
			</div> <!-- main1 -->   
			<div id="main2">					
				<h3 class="title1">제빵 클래스</h3>
				<ul class="item1">
					<li><img src="./img/bread1.png"></li>
					<li class="subject">도너트 만들기[3]</li>
					<li class="date">21.09.30</li>
				</ul>
				<ul class="item2">
					<li><img src="./img/bread2.png"></li>
					<li class="subject">도너트 만들기[3]</li>
					<li class="date">21.09.30</li>
				</ul>
				<ul class="item1">
					<li><img src="./img/bread3.png"></li>
					<li class="subject">도너트 만들기[3]</li>
					<li class="date">21.09.30</li>
				</ul>
				<ul class="item2">
					<li><img src="./img/bread4.png"></li>
					<li class="subject">도너트 만들기[3]</li>
					<li class="date">21.09.30</li>
				</ul>
			</div> <!-- main2 -->   
		</section> <!-- main -->
	</div> <!-- box -->

	<!-- 하단 푸터 -->
	<footer>
		<div class="box">
			<nav id="bottom_menu">
				<ul>
					<li>The 베이킹 소개</li>
					<li>개인정보처리방침</li>
					<li>저작권 정보</li>
					<li>이용 안내</li>
				</ul>
			</nav>
			<div class="items">
				<h3>문의전화</h3>
				<ul>
					<li class="phone">123-1234</li>
					<li>10:00 - 18:00(Lunch 12:00 - 13:00)</li>
				</ul>
			</div> <!-- items -->
			<div class="items">
				<h3>The 베이킹</h3>
				<ul>
					<li>주소 : 경기도 용인시 기흥구 동백대로 123</li>
					<li>전화 : 031-123-1234</li>
					<li>팩스 : 031-123-1234</li>
					<li>이메일 : 123-12-12345</li>
				</ul>
			</div> <!-- items -->
			<div class="items">
				<h3>입금 정보</h3>
				<ul>
					<li>농협 123-123-123456</li>
					<li>The 베이킹</li>
				</ul>
			</div> <!-- items -->			
		</div> <!-- box -->
	</footer>
</body>
</html>

CSS

* {  
	margin: 0;  
	padding: 0;
	box-sizing: border-box;
}
li {  list-style-type: none;  }
header {  
	height: 166px;  
/*	border: solid 1px red;  */
}
.box {  
	width: 1100px;  
	margin: 0 auto;  
/*	border: solid 1px red;  */
}
/* 상단 헤더 */
#logo {
	float: left;
	margin: 80px 0 0 60px;
/*	border: solid 1px red;  */
}
#menu {
	float: right;
	text-align: right;
	margin-right: 20px;
/*	border: solid 1px red;  */	
}
#menu li {
	display: inline-block;
/*	border: solid 1px red;  */	
}
#top_menu li {
	margin: 30px 0 0 10px;
/*	border: solid 1px red;  */	
}
#main_menu li {
	margin: 50px 0 0 80px;
	font-family: "맑은고딕";
	font-weight: bold;
	font-size: 20px;
/*	border: solid 1px red;  */		
}
/* 메인 이미지 */
#main_image {
	height: 312px;
	background-image: url("./img/main_bg.png");
	background-repeat: no-repeat;
	background-position: top center;
	text-align: center;
	padding: 230px 0 0 750px;
}
/* 사이드바 */
aside {
	width: 220px ;
	float: left;
	margin: 70px 0;
/*	border: solid 1px red; */
}
aside .title1 {
	padding: 12px;
	background-color: #0ca9a3;
	color: white;
	font-size: 18px;
}
aside .comment {
	padding: 20px 10px;
	line-height: 150%;
}
aside .search input {
	width: 160px;
	height: 32px;
	border: solid 1px black;
	vertical-align: top;
}
aside .search button {
	margin-left: 5px;
	padding: 6px 10px;
	border: solid 1px black;
}
/* 베이킹/요리 */
aside .title2 {
	margin-top: 20px;
	padding: 12px;
	border-top: solid 2px black;
	border-bottom: solid 1px #cccccc;
	font-size: 18px;
}
aside .list {
	margin: 20px 0;
}
aside .list li {
	margin: 10px 12px;
}
/* 최근 댓글 */
aside .ripple {
	border: solid 1px #0ca9a3;
	padding: 12px;
}
aside .ripple h2 {
	font-size: 18px;
	margin: 10px 0 15px 0;
}
aside .ripple li {
	margin-top: 6px;
}
/* 메인 섹션 */
#main {
	width: 840px;
	float: right;
	margin: 70px 0;
/*	border: solid 1px red; */
}
/* 알림과 게시판 */
#main1 {
	width: 405px;
	float: left;
}
#main1 .title1 {
	padding-bottom: 8px;
	border-bottom: solid 1px black;
}
#main1 .latest {
	margin-top: 30px;
}
#main1 .items {
	position: relative;
	height: 34px;
}
#main1 .items .subject {
	position: absolute;
	left:0;
	top: 0;
}
#main1 .items .date {
	position: absolute;
	right:0;
	top: 0;
}
#main1 .title2 {
	margin-top: 30px;
	padding-bottom: 8px;
	border-bottom: solid 1px black;
}
/* 제빵 클래스 */
#main2 {
	width: 400px;
	float: right;
}
#main2 .title1 {
	padding-bottom: 8px;
	border-bottom: solid 1px black;
}
#main2 .item1 {
	clear: both;
	width: 189px;
	float: left;
	margin-top: 30px;
}
#main2 .item2 {
	width: 189px;
	float: right;
	margin-top: 30px;
}
#main2 .subject {
	margin-top:10px;
	font-weight: bold;
	font-size: 16px;
}
#main2 .date {
	margin-top:5px;
}
/* 하단 푸터 */
footer {
	clear: both;
	height: 260px;
	background-color: #05354e;
	color: white;
}
#bottom_menu ul {
	padding: 20px 0 0 100px;
	font-weight: bold;
}
#bottom_menu li {
	display: inline;
	margin-right: 30px;
}
footer .items {
	float: left;
	margin: 40px 0 0 100px;
}
footer h3 {  color:#0ca9a3;  }
footer .items ul {  margin-top: 15px;  }
footer .items li {	margin-top: 5px;  }
footer .phone {
	font-size: 25px;
	font-weight: bold;
}

≠

2. header

margin, padding 0값으로 설정
box-sizing : border-box : 마진과 패딩값이 너비와 높이에 포함되어 그대로 유지
box 높이 설정과 중앙 배치
logo 배치
아이디 메뉴 설정
메뉴 요소 디스플레이 성정

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {  
	margin: 0;  
	padding: 0;
	box-sizing: border-box;
}
li {  list-style-type: none;  }
header {  
	height: 166px;  
/*	border: solid 1px red;  */ 
}
.box {  
	width: 1100px;  
	margin: 0 auto;  
/*	border: solid 1px red;  */
}
#logo {
	float: left;
	margin: 80px 0 0 60px;
/*	border: solid 1px red;  */
}
#menu {
	float: right;
	text-align: right;
	margin-right: 20px;
/*	border: solid 1px red;  */
}
#menu li {
	display: inline-block;
/*	border: solid 1px red;  */
}
#top_menu li {
	margin: 30px 0 0 10px;
/*	border: solid 1px red;  */
}
#main_menu li {
	margin: 50px 0 0 80px;
	font-family: "맑은고딕";
	font-weight: bold;
	font-size: 20px;
/*	border: solid 1px red;  */	
}
</style>
</head>
<body>
	<header>
		<div class="box">
			<div id="logo">
				<img src="./img/logo.png">
			</div> <!-- logo -->
			<nav id="menu">
				<ul id="top_menu">
				<li>김지영(jykim)님</li><li>|</li>
				<li>로그아웃</li><li>|</li>
				<li>정보수정</li>
				</ul>
				<ul id="main_menu">
				<li>Home</li>
				<li>출석부</li>
				<li>작품갤러리</li>
				<li>게시판</li>
				</ul>
			</nav> <!-- menu -->
		</div> <!-- box -->
	</header>
</body>
</html>

3. main image

id main_image 설정

728x90

저작자표시 비영리 동일조건 (새창열림)

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

multiking

티스토리 뷰

제19강_실전_상단메뉴만들기

1.전체페이지 레이아웃

html

2. header

3. main image

티스토리툴바