728x90
반응형
오늘 따라들어본 웹페이지는 google.com이다.
원래 페이지 디자인은 다음과 같다.
따라서 코딩해본 페이지.
footer영역을 맨 아래로 붙이는 방법은 다음과 같다.
footer{
position: fixed;
bottom: 0;
width: 100%;
}
전체 코드 - html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/51db22a717.js" crossorigin="anonymous"></script>
<title>Google</title>
</head>
<body>
<header class="top-header">
<nav class="top-nav">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">이미지</a></li>
<li><a href="#"><i class="fas fa-bars"></i></a></li>
</ul>
<div class="profile_img_wrap">
<img src="img/profile.png">
</div>
</nav>
</header>
<section class="main-section">
<div class="logo-wrap">
<a href="#"><img src="img/logo.png"></a>
</div>
<div class="searchbar-wrap">
<i class="fas fa-search"></i>
<input class="search-input" type="text"/>
<i class="fas fa-keyboard"></i>
</div>
<div class="buttons">
<button>Google 검색</button>
<button>I'm Feeling Lucky</button>
</div>
<div class="now-lang">
<span>Google 제공 서비스: </span><a href="#">English</a>
</div>
</section>
<footer>
<div class="country">
<span>대한민국</span>
</div>
<div class="foot-links-wrap">
<div class="foot-links-wrap-right">
<ul>
<li><a href="#">광고</a></li>
<li><a href="#">비즈니스</a></li>
<li><a href="#">Google 정보</a></li>
<li><a href="#">검색의 원리</a></li>
</ul>
</div>
<div class="foot-links-wrap-left">
<ul>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">약관</a></li>
<li><a href="#">설정</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>전체 코드 - css
:root{
--gray-color :#717271;
--light-gray-color: #dee0e5;
--midium-gray-color: #999fa6;
--button-gray-color: #f0f1f0;
--footer-back-color: #f1f2f1;
--footer-border-color: #e3e4e3;
--button-text-gray-color: #5F6368;
--font-family: 'Apple SD Gothic Neo',arial,sans-serif;
}
*{
padding: 0;
margin: 0;
font-family: var(--font-family);
}
.top-header{
width: 100%;
height: 50px;
}
.top-header .top-nav{
display: flex;
height: 36px;
justify-content: flex-end;
padding-top: 18px;
padding-left: 30px;
padding-right: 30px;
align-content: center;
}
.top-header .top-nav ul{
display: flex;
justify-content: flex-end;
list-style: none;
align-content: center;
}
.top-header .top-nav ul li{
margin-right: 18px;
height: 36px;
}
.top-header .top-nav ul li a{
text-decoration: none;
font-size: 13px;
display: block;
line-height: 36px;
width: 36;
color:var( --gray-color )
}
.top-header .top-nav ul li a:hover{
text-decoration:underline
}
.top-header .top-nav .profile_img_wrap img{
width:36px;
height:36px;
border-radius: 18px;
}
.main-section{
width:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main-section .logo-wrap{
height: 233px;
}
.main-section .logo-wrap a{
display: block;
padding-top: 109px;
}
.main-section .searchbar-wrap{
border: solid 1px var(--light-gray-color);
width: 490px;
height: 50px;
border-radius: 25px;
display: flex;
justify-content: space-evenly;
align-content: center;
padding-left: 8px;
padding-right: 8px;
}
.main-section .searchbar-wrap i{
line-height: 50px;
color : var( --midium-gray-color);
}
.main-section .searchbar-wrap .search-input{
width:400px;
height:50px;
font-size: 16px;
border: none;
outline: none;
}
.main-section .buttons{
padding-top:30px
}
.main-section .buttons button{
background-color: var( --button-gray-color);
border: 0;
height: 38px;
padding-left: 15px;
padding-right: 15px;
margin:5px;
border-radius: 5px;
font-size: 14px;
color: var( --button-text-gray-color);
}
.main-section .now-lang{
padding-top:25px;
font-size: 12px;
}
footer{
position: fixed;
bottom: 0;
width: 100%;
background: var( --footer-back-color);
color: var( --button-text-gray-color);
font-size:15px;
}
footer .country{
border-top: solid 1px var(--footer-border-color);
padding-left: 32px;
line-height: 40px;
height: 40px;
}
footer .foot-links-wrap{
border-top: solid 1px var(--footer-border-color);
padding-left: 32px;
line-height: 40px;
height: 40px;
display: flex;
flex:auto;
}
footer .foot-links-wrap .foot-links-wrap-right{
width:50%
}
footer .foot-links-wrap .foot-links-wrap-right ul{
list-style: none;
display: flex;
}
footer .foot-links-wrap .foot-links-wrap-right ul li a{
display: block;
padding-right: 28px;
text-decoration: none;
}
footer .foot-links-wrap .foot-links-wrap-left{
width: 50%;
}
footer .foot-links-wrap .foot-links-wrap-left ul{
list-style: none;
display: flex;
justify-content: flex-end;
}
footer .foot-links-wrap .foot-links-wrap-left ul li a{
display: block;
padding-right: 28px;
text-decoration: none;
}
github.com/lucidmaj7/frontend_study/tree/master/google
lucidmaj7/frontend_study
Frontend Study(html, css,react,etc). Contribute to lucidmaj7/frontend_study development by creating an account on GitHub.
github.com
728x90
반응형
'개발 > HTML_CSS' 카테고리의 다른 글
| [HTML/CSS] 로그인 페이지 만들기 / css 그림자, 그라데이션 (0) | 2020.09.01 |
|---|---|
| [HTML/CSS] 트위터 로그인 화면 따라 만들기 (0) | 2020.08.31 |
| [HTML/CSS] 네이버 로그인 화면 따라 만들기 (3) | 2020.08.27 |
| [HTML/CSS] 스타벅스 홈페이지 메뉴 따라 만들기 (0) | 2020.08.25 |
| CSS flex, justify-content 옵션 비교 (0) | 2020.04.28 |
댓글