▣ Header & Footer 초안
- Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<div class = "inner">
<!-- header -->
<h1>
<a href="">
<img src="../img/img_logo1.png" alt="">
</a>
</h1>
<ul class="top-menu">
<li><a href="">로그인</a></li>
<li><a href="">내정보</a></li>
<li><a href="">쪽지</a></li>
</ul>
<nav class="nav">
<ul>
<li><a href="" class="stress">공지사항</a></li>
<li><a href="" class="stress">자유게시판</a></li>
<li><a href="" class="stress">시간표</a></li>
<li><a href="" class="stress">강의평가</a></li>
<li><a href="" class="stress">학점계산기</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- 여기부터 작업! -->
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
<div>.</div>
</main>
<footer>
<div class="inner">
<!-- footer -->
<div class="top-title bold">
<span>이젠 아카데미 학원</span>
</div>
<div class="middle">
<span>인천광역시</span>
<span class="before">사업자등록번호: 000-00-00000</span>
<span class="before">직업정보제공사업 신고번호: 0*14</span>
</div>
<div class="bottom">
<span><a href="">이용약관</a></span>
<span class="before bold"><a href="">개인정보처리방침</a></span>
<span class="before"><a href="">청소년보호정책</a></span>
<span class="before"><a href="">커뮤니티이용규칙</a></span>
<span class="before"><a href="">문의하기</a></span>
<span class="before"><a href="">ㅇㅇㅇ</a></span>
</div>
</footer>
</body>
</html>
- Css
/* reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
color: black;
}
/* header */
header{
width: 100%;
width: 100%;
position: sticky;
top: 0;
z-index: 10;
background-color: rgb(165, 213, 231); /* 구분용 임시color*/
}
header>.inner{
width: 1170px;
margin: auto;
box-sizing: border-box;
position: relative;
height: 115px;
}
header>.inner>h1{
position: absolute;
margin-top: 15px;
left: 0;
}
header>.inner>.top-menu{
display: flex;
justify-content: end;
}
header>.inner>.top-menu>li{
position: relative;
padding: 10px 20px;
font-weight: 500;
}
header>.inner>.top-menu>li>a:hover{
font-weight: 700;
color: red;
}
header>.inner>.nav>ul{
display: flex;
justify-content: center;
height: 79px;
}
header>.inner>.nav>ul>li{
margin: 0 40px;
}
header>.inner>.nav>ul>li>a{
font-size: large;
font-weight: 700;
line-height: 79px;
}
header>.inner>.nav>ul>li:hover{
border-bottom: 5px solid red;
}
header>.inner>.nav>ul>li:hover .stress{
color:red;
}
/* main */
main{
background-color: bisque; /* 구분용 임시color*/
}
/* footer */
footer{
background-color: rgba(128, 128, 128, 0.048);
width: 100%;
display: flex;
}
footer>.inner{
height: 200px;
margin: auto;
padding: 40px 200px 60px 32px;
box-sizing: border-box;
}
.bold{
font-weight: 700;
}
footer>.inner .before{
padding: 10px;
}
/* footer-bottom */
footer>.inner>.bottom{
margin: 25px 0 30px 10px;
}
footer>.inner>.bottom>span{
padding: 5px 5px 30px 10px;
font-size: 12px;
position: relative;
}
footer>.inner>.bottom .before::before{
content: " ";
background-color: #d6d6d6;
width: 3px;
height: 13px;
position: absolute;
top: 15%;
left: 0;
}
/* footer-middle */
footer>.inner>.middle{
margin: 0 10px 10px 10px;
}
footer>.inner>.middle>span{
padding: 5px 5px 0 10px;
font-size: 12px;
position: relative;
}
footer>.inner>.middle .before::before{
content: " ";
background-color: #d6d6d6;
width: 3px;
height: 13px;
position: absolute;
top: 35%;
left: 0;
}
/* footer-top-title */
footer>.inner>.top-title{
margin: 0 0 10px 10px;
padding: 5px 30px 0 10px;
}
▷ 출력
- 느낀 점
회의 시간이 3시간 정도 걸렸다... 생각보다 주제를 잡는 회의를 오랫동안 했으며, 페이지를 어떻게 상세하게 나눌지 고민을 많이 하고 파일명과 이미지 경로를 신경써야 했었던 것 같다. 코딩 프로젝트는 처음이라 너무 어려웠던 것 같다
'Project > AWS-Front' 카테고리의 다른 글
| 화면 프로젝트 (6) - AWS 풀스택 과정 30일차 (0) | 2024.08.26 |
|---|---|
| 화면 프로젝트 (5) - AWS 풀스택 과정 29일차 (0) | 2024.08.23 |
| 화면 프로젝트 (4) - AWS 풀스택 과정 28일차 (0) | 2024.08.22 |
| 화면 프로젝트 (3) - AWS 풀스택 과정 27일차 (0) | 2024.08.21 |
| 화면 프로젝트 (2) - AWS 풀스택 과정 26일차 (0) | 2024.08.20 |