Study/HTML5 & CSS3
HTML5 & CSS3 : Google 메인 페이지 만들기
posey
2022. 11. 4. 14:32
2022.11.04.
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 36
Review
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 36
<Google 메인 화면 만들기>
- HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../1104/02style.css">
<link rel="stylesheet" href="../fontawesome-free-6.2.0-web/css/all.css">
<title>Google</title>
</head>
<body>
<div id="wrapper">
<header>
<ul class="left">
<li><a href="#">Google 정보</a></li>
<li><a href="#">스토어</a></li>
</ul>
<ul class="right">
<li><a href="#">Gmail</a></li>
<li><a href="#">이미지</a></li>
<li><a href="#"><img src="../../images/google/image/menu.gif" alt="앱"></a></li>
<li><a href="#">로그인</a></li>
</ul>
</header>
<section>
<h1><img src="../../images/google/image/logo.gif" alt=""></h1>
<div class="search_box">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" name="seach">
<a href="#" class="btn_key">키보드버튼</a>
<a href="#" class="btn_mic">마이크버튼</a>
<a href="#" class="btn_search">이미지검색버튼</a>
</div>
<div class="btn_box">
<input type="button" name="구글검색" value="Google 검색">
<input type="button" name="럭키" value="I'm Feeling Lucky">
</div>
<div class="ribbon">
<img src="../../images/google/image/google_logo.png" alt="검은리본">
</div>
</section>
<footer>
<div class="top">
<p>대한민국</p>
</div>
<div class="bottom">
<ul class="left">
<li><a href="#">광고</a></li>
<li><a href="#">비지니스</a></li>
<li><a href="#">검색의 원리</a></li>
</ul>
<ul class="right">
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">약관</a></li>
<li><a href="#">설정</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
@font-face {
font-family: notosansKR;
src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff) format("woff");
}
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #202124;
font-size: 14px;
}
body {
font: 1em opensans, notosansKR;
color: #202124;
}
ul {
list-style: none;
}
li {
list-style: none;
}
0
- HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../1104/02style.css">
<link rel="stylesheet" href="../fontawesome-free-6.2.0-web/css/all.css">
<title>Google</title>
</head>
<body>
<div id="wrapper">
<header>
<ul class="left">
<li><a href="#">Google 정보</a></li>
<li><a href="#">스토어</a></li>
</ul>
<ul class="right">
<li><a href="#">Gmail</a></li>
<li><a href="#">이미지</a></li>
<li><a href="#"><img src="../../images/google/image/menu.gif" alt="앱"></a></li>
<li><a href="#">로그인</a></li>
</ul>
</header>
<section>
<h1><img src="../../images/google/image/logo.gif" alt=""></h1>
<div class="search_box">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" name="seach" autofocus>
<a href="#" class="btn_key">d</a>
<a href="#" class="btn_mic">d</a>
<a href="#" class="btn_search">d</a>
</div>
<div class="btn_box">
<input type="button" name="구글검색" value="Google 검색">
<input type="button" name="럭키" value="I'm Feeling Lucky">
</div>
<div class="ribbon">
<img src="../../images/google/image/google_logo.png" alt="검은리본">
</div>
</section>
<footer>
<div class="top">
<p>대한민국</p>
</div>
<div class="bottom">
<ul class="left">
<li><a href="#">광고</a></li>
<li><a href="#">비지니스</a></li>
<li><a href="#">검색의 원리</a></li>
</ul>
<ul class="right">
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">약관</a></li>
<li><a href="#">설정</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
@font-face {
font-family: notosansKR;
src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff) format("woff");
}
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #202124;
font-size: 14px;
}
body {
font: 1em opensans, notosansKR;
color: #202124;
}
ul {
list-style: none;
}
li {
list-style: none;
}
header {
display: flex;
justify-content: space-between;
padding: 6px 5px 0 25px ;
}
header ul {
display: flex;
}
header ul li {
position: relative;
padding: 15px;
z-index: 1;
}
header ul.left li:first-child {
padding-left: 0;
}
header ul.right li:first-child {
padding-right: 0;
}
header ul.right img {
vertical-align: middle;
}
header ul li a:hover {
text-decoration: underline;
}
header ul.right li:nth-child(3) a::before {
content: "";
position: absolute;
display: block;
left: 3px;
top: 8px;
width: 40px;
height: 40px;
background: rgb(239, 239, 239);
border-radius: 50%;
z-index: -1;
opacity: 0;
transition: opacity 0.2s;
}
header ul.right li:nth-child(3) a::after {
display: block;
content: "Google 앱";
position: absolute;
left: -15px;
top: 53px;
width: 80px;
height: 25px;
background: #333437;
color: #fff;
font-size: 13px;
border-radius: 5px;
text-align: center;
line-height: 25px;
z-index: -1;
opacity: 0;
transition: opacity 0.2s;
}
header ul.right li:nth-child(3):hover a::before,
header ul.right li:nth-child(3):hover a::after {
opacity: 1;
}
header ul.right li:last-child a {
background: #1a73e8;
color: #fff;
padding: 8px 30px;
border-radius: 5px;
}
header ul.right li:last-child a:hover {
box-shadow: 0 0 3px #1a0dabe4;
text-decoration: none;
}
section {
margin: 120px 0;
}
section h1 {
text-align: center;
}
section .search_box {
display: flex;
justify-content: space-around;
align-items: center;
width: 582px;
height: 44px;
margin: 15px auto;
border: 1px solid #e4e4e4;
border-radius: 30px;
padding: 0 15px;
}
section .search_box:hover {
box-shadow: 0 0 5px #ccc;
}
section i.fa-solid {
color: #ccc;
}
section .search_box input {
width: 403px;
padding-left: 10px;
height: 30px;
border: none;
}
:focus {
outline: none;
}
section .search_box a {
position: relative;
display: inline-block;
text-indent: -9999px;
width: 30px;
height: 30px;
line-height: 32px;
}
section .search_box a:hover::after {
position: absolute;
content: "입력도구";
left: -13px;
top: 50px;
text-indent: 0;
background: #000;
color: #fff;
font-size: 12px;
white-space: nowrap;
padding: 0 10px;
}
section .search_box a.btn_key:hover::after {
content: "입력도구";
}
section .search_box a.btn_mic:hover::after {
content: "음성검색";
}
section .search_box a.btn_search:hover::after {
content: "이미지로 검색";
left: -26px;
}
section .search_box a:hover::before {
position: absolute;
content: "";
left: 7px;
top: 30px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid #000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
section .search_box a.btn_key {
background: url(../../images/google/image/keyboard.gif) center no-repeat;
}
section .search_box a.btn_mic {
background: url(../../images/google/image/mice.gif) center no-repeat;
}
section .search_box a.btn_search {
background: url(../../images/google/image/img_search.JPG) center no-repeat;
}
section .btn_box {
display: flex;
justify-content: center;
width: 600px;
margin: 30px auto;
text-align: center;
}
section .btn_box input {
display: block;
background: #f8f9fa;
cursor: pointer;
border: 1px solid transparent;
padding: 5px 15px;
border-radius: 5px;
height: 35px;
line-height: 20px;
font-size: 14px;
}
section .btn_box input:first-child {
margin-right: 10px
}
section .btn_box input:hover {
border-color: #f8f9fa;
box-shadow: 0 0 5px #ddd;
}
section .ribbon {
text-align: center;
}
section .ribbon img {
width: 48px;
height: 68px;
margin-right: 5px;
}
footer {
position: fixed;
width: 100%;
bottom: 0;
background: #f2f2f2;
color: #70757a;
}
footer .top {
font-size: 15px;
border-bottom: 1px solid #dadce0;
padding: 15px 30px;
}
footer .bottom {
display: flex;
justify-content: space-between;
padding: 15px 20px;
}
footer .bottom > ul {
display: flex;
}
footer .bottom > ul li {
padding: 0 10px;
}
footer .bottom > ul li a {
color: #70757a;
}
footer .bottom > ul li a:hover {
text-decoration: underline;
}
0
<메인 페이지 만들어보기 예제>
이 페이지와 똑같이 만들어보는 예제를 실행했다.
- HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../1104/04style.css">
<link rel="stylesheet" href="../fontawesome-free-6.2.0-web/css/all.css">
<title>마로니에북스</title>
</head>
<body>
<div id="wrapper">
<header>
<div class="left">
<a href="#"><h1>마로니에북스</h1></a>
<p>책으로 꾸미는 초록의 산책길</p>
</div>
<div class="right">
<img src="../../images/마로니에 books/image/bg_books.jpg" alt="">
</div>
</header>
<nav>
<div class="gnb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<section>
<div class="left">
<ul>
<h1>Book Choice</h1>
<li><img src="../../images/마로니에 books/image/1001_books.png" alt=""></li>
<li><a href="#"><img src="../../images/마로니에 books/image/black_sqaure.png" alt="">죽기 전에 꼭 읽어야 할 책 1001권</a></li>
<li><a href="#"><img src="../../images/마로니에 books/image/black_sqaure.png" alt="">피터 박스올 저/박누리 역</a></li>
<li><a href="#"><img src="../../images/마로니에 books/image/black_sqaure.png" alt="">세계의 상상력을 자극한 소설과 작가들에 대한 안내서</a></li>
</ul>
<ul>
<h1>Categories</h1>
<li>Movie 1001</li>
<li>Album 1001</li>
<li>Book 1001</li>
<li>Famous painting 1001</li>
<li>Wonderful sight 1001</li>
<li>Cook 1001</li>
<li>Classic 1001</li>
<li>Wine 1001</li>
<li>Invention 1001</li>
<li>Historic Areas 1001</li>
</ul>
<ul>
<h1>Links</h1>
<li>Yes24</li>
<li>Interpark</li>
<li>Maronie Gallery</li>
<li>Taschen</li>
<li>Info Pub Books</li>
</ul>
</div>
<div class="right">
<ul>
<h1>1001 MOVIES YOU MUST SEE BEFORE YOU DIE</h1>
<li><p>죽기 전에 꼭 봐야 할 영화 1001편</p></li>
<li><a href="#"><img src="../../images/마로니에 books/image/red_sqaure.jpg" alt="">2005.09.15 /Maronie Books/ total page 960 /ISBN 8991449603</a></li>
<li><p>죽기 전에 꼭 봐야 할 영화 1001편은 어떤 것들일까. 모든 시대와 장르, 국가를 통틀어 반드시 보아야 할 영화를 선별한다는 것은 커다란 모험이다. 이 책에 소개된 1001편의 영화를 추리는 것은 현존하는 수많은 영화들 가운데 가장 위대한, 최고의, 가장 인기 있는, 가장 뛰어난 영화들의 목록을 만드는 과정부터 시작되었다.</p></li>
<li><input type="button" value="READ MORE"></li>
</ul>
<ul>
<h1>1001 WINE YOU MUST DRINK BEFORE YOU DIE</h1>
<li><p>죽기 전에 꼭 마셔봐야 할 와인 1001</p></li>
<li><a href="#"><img src="../../images/마로니에 books/image/red_sqaure.jpg" alt="">2009.01.20 / Maronie Books/ total page 960 /ISBN 9788960531628</a></li>
<li><p>이 책은 여러 종류의 와인을 맛보고 싶거나 와인에 대해 알면 알수록 더 큰 기쁨을 느끼는 사람, 와인의 세계를 탐험하고자 하는 호기심 많은 이를 위한 지침서다. 독자들에게 이 책이 생애 최고의 순간을 장식할 최상의 와인을 찾기 위한 훌륭한 길잡이가 되기 바란다.</p></li>
<li><input type="button" value="READ MORE"></li>
</ul>
<ul>
<h1>1001 CLASSIC YOU MUST LISTEN BEFORE YOU DIE</h1>
<li><p>죽기 전에 꼭 들어야 할 클래식 1001</p></li>
<li><a href="#"><img src="../../images/마로니에 books/image/red_sqaure.jpg" alt="">2009.06.01 /Maronie Books/ total page 960 /ISBN 9788960531642</a></li>
<li><p>이 책의 특징은 영국과 유럽, 미국, 호주에서 활발하게 활동 중인 음악 비평가와 학자 등이 대거 참여하여 집필하였다는 점이다. 작곡가가 해당 작품을 쓰던 당시의 역사적 배경과 곡에 미친 영향까지 분석하였으며, 음악에 관한 어록이나 작곡가 및 연주가들의 말과 글을 수록하여 책 읽는 재미도 느낄 수 있게 하였다.</p></li>
<li><input type="button" value="READ MORE"></li>
</ul>
</div>
</section>
<footer>
<div class="foot">
<p>Copyright (c) Maronie 1001. All rights reserved. </p>
</div>
</footer>
</div>
</body>
</html>
- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
@font-face {
font-family: notosansKR;
src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff) format("woff");
}
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #202124;
font-size: 14px;
}
body {
width: 1900px;
margin: 0 auto;
font: 1em opensans, notosansKR;
color: #202124;
background: #e2c738;
}
ul {
list-style: none;
}
li {
list-style: none;
}
#wrapper {
}
header {
display: flex;
width: 1280px;
margin: 0 auto;
}
header .left {
width: 30%;
}
header .left h1 {
color: rgb(255, 1, 86);
font-size: 50px;
text-align: center;
padding-top: 60px;
}
header .left p {
padding-left: 60px;
}
header .right {
width: 70%;
text-align: center;
}
header img {
width: 896px;
object-fit: contain;
}
nav {
width: 1280px;
margin: 0 auto;
margin-top: -5px;
}
.gnb {
display: flex;
width: 1280px;
margin: 0;
height: 40px;
background-color: #202124;
}
.gnb ul {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 900px;
}
.gnb ul li {
}
.gnb ul li a {
color: #fff;
}
우선 기본 틀을 만들어놓고 Nav까지는 CSS까지 만들었다.
- HTML
<body>
<div id="wrapper">
<header>
<div class="left">
<a href="#"><h1>마로니에북스</h1></a>
<p>책으로 꾸미는 초록의 산책길</p>
</div>
<div class="right">
<img src="../../images/마로니에 books/image/bg_books.jpg" alt="">
</div>
</header>
<nav>
<div class="gnb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<section>
<div class="left">
<ul>
<h1>Book Choice</h1>
<li><img src="../../images/마로니에 books/image/1001_books.png" alt=""></li>
<li><a href="#"><img src="../../images/마로니에 books/image/black_sqaure.png" alt="">죽기 전에 꼭 읽어야 할 책 1001권</a></li>
<li><a href="#"><img src="../../images/마로니에 books/image/black_sqaure.png" alt="">피터 박스올 저/박누리 역</a></li>
<li><a href="#"><img src="../../images/마로니에 books/image/black_sqaure.png" alt="">세계의 상상력을 자극한 소설과 작가들에<br> 대한 안내서</a></li>
</ul>
<ul>
<h1>Categories</h1>
<li>Movie 1001</li>
<li>Album 1001</li>
<li>Book 1001</li>
<li>Famous painting 1001</li>
<li>Wonderful sight 1001</li>
<li>Cook 1001</li>
<li>Classic 1001</li>
<li>Wine 1001</li>
<li>Invention 1001</li>
<li>Historic Areas 1001</li>
</ul>
<ul>
<h1>Links</h1>
<li>Yes24</li>
<li>Interpark</li>
<li>Maronie Gallery</li>
<li>Taschen</li>
<li>Info Pub Books</li>
</ul>
</div>
<div class="right">
<ul>
<h1>1001 MOVIES YOU MUST SEE BEFORE YOU DIE</h1>
<h2>죽기 전에 꼭 봐야 할 영화 1001편</h2>
<p><img src="../../images/마로니에 books/image/red_sqaure.jpg" alt=""><i>2005.09.15 /Maronie Books/ total page 960 /ISBN 8991449603</i></p>
<p>죽기 전에 꼭 봐야 할 영화 1001편은 어떤 것들일까. 모든 시대와 장르, 국가를 통틀어 반드시 보아야 할 영화를 선별한다는 것은 커다란 모험이다. 이 책에 소개된 1001편의 영화를 추리는 것은 현존하는 수많은 영화들 가운데 가장 위대한, 최고의, 가장 인기 있는, 가장 뛰어난 영화들의 목록을 만드는 과정부터 시작되었다.</p>
<input type="button" value="READ MORE">
</ul>
<ul>
<h1>1001 WINE YOU MUST DRINK BEFORE YOU DIE</h1>
<h2>죽기 전에 꼭 마셔봐야 할 와인 1001</h2>
<p><img src="../../images/마로니에 books/image/red_sqaure.jpg" alt=""><i>2009.01.20 / Maronie Books/ total page 960 /ISBN 9788960531628</i></p>
<p>이 책은 여러 종류의 와인을 맛보고 싶거나 와인에 대해 알면 알수록 더 큰 기쁨을 느끼는 사람, 와인의 세계를 탐험하고자 하는 호기심 많은 이를 위한 지침서다. 독자들에게 이 책이 생애 최고의 순간을 장식할 최상의 와인을 찾기 위한 훌륭한 길잡이가 되기 바란다.</p>
<input type="button" value="READ MORE">
</ul>
<ul>
<h1>1001 CLASSIC YOU MUST LISTEN BEFORE YOU DIE</h1>
<li><h2>죽기 전에 꼭 들어야 할 클래식 1001</h2></li>
<p><img src="../../images/마로니에 books/image/red_sqaure.jpg" alt=""><i>2009.06.01 /Maronie Books/ total page 960 /ISBN 9788960531642</i></p>
<p>이 책의 특징은 영국과 유럽, 미국, 호주에서 활발하게 활동 중인 음악 비평가와 학자 등이 대거 참여하여 집필하였다는 점이다. 작곡가가 해당 작품을 쓰던 당시의 역사적 배경과 곡에 미친 영향까지 분석하였으며, 음악에 관한 어록이나 작곡가 및 연주가들의 말과 글을 수록하여 책 읽는 재미도 느낄 수 있게 하였다.</p>
<input type="button" value="READ MORE">
</ul>
</div>
</section>
<footer>
<div class="foot">
<p>Copyright (c) Maronie 1001. All rights reserved. </p>
</div>
</footer>
</div>
</body>
- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
@font-face {
font-family: notosansKR;
src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff) format("woff");
}
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #202124;
font-size: 14px;
}
body {
width: 1900px;
margin: 0 auto;
font: 1em opensans, notosansKR;
color: #202124;
background: #e2c738;
}
ul {
list-style: none;
}
li {
list-style: none;
}
#wrapper {
}
header {
display: flex;
width: 1280px;
margin: 0 auto;
}
header .left {
width: 25%;
}
header .left h1 {
color: rgb(255, 1, 86);
font-size: 50px;
text-align: left;
margin-left: -3px;
padding-top: 100px;
}
header .right {
width: 75%;
text-align: right;
}
header img {
width: 963.75px;
object-fit: contain;
margin-left: -4px;
}
nav {
width: 1280px;
margin: 0 auto;
margin-top: -5px;
}
.gnb {
display: flex;
width: 1280px;
margin: 0;
height: 40px;
background-color: #202124;
}
.gnb ul {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 900px;
}
.gnb ul li {
}
.gnb ul li a {
color: #fff;
}
section {
display: flex;
width: 1280px;
margin: 0 auto;
}
section .left {
width: 25%;
padding-left: 15px;
padding-top: 50px;
}
section .left ul:first-child li:nth-of-type(2) img,
section .left ul:first-child li:nth-of-type(3) img,
section .left ul:first-child li:nth-of-type(4) img {
margin-right: 5px;
vertical-align: middle;
}
section .left ul {
margin-bottom: 40px;
}
section .left ul h1 {
padding-bottom: 10px;
}
section .left ul:nth-child(2) li,
section .left ul:nth-child(3) li {
padding: 10px 0;
color: #333;
border-bottom: 1px dashed #4c4f55;
}
section .right {
background: #fff;
width: 75%;
padding: 0 30px;
text-align: center;
}
section .right ul {
padding: 50px 0 90px 0;
border-bottom: 1px dashed #ccc;
}
section .right ul:last-child {
border: none;
}
section .right h1 {
color: rgb(255, 1, 86);
margin-bottom: 5px;
}
section .right img {
margin-right: 5px;
}
section .right ul p {
font-size: 14px;
}
section .right ul p:first-of-type {
margin-bottom: 50px;
color:rgb(255, 1, 86);
}
section .right input {
position: relative;
left: 350px;
top: 30px;
padding: 9px 25px;
font-size: 12px;
background: rgb(255, 1, 86);
color: #fff;
border: none;
border-radius: 10px;
}
footer {
width: 1280px;
margin: 0 auto;
padding: 50px;
}
footer .foot {
text-align: center;
font-size: 14px;
}
반응형