구글 메인 페이지를 매일 검색하다가 레이아웃 연습하기에 간단해 보여서 만들었다.
아직은 서버와 연결하는 구현을 못하기에 form 태그에 action 속성으로 form.html을 만들어서
연결했다.검색 결과입니다.로 구현했다. 😊
구글 로그인 시, 아래 사진처럼 바로 가기를 추가할 수 있는데, 이 부분은 어떻게 해결할 수 있을지 고민이다! 아직은 방법을 모르지만, 나중에 실력이 늘어서 저 부분도 구현할 수 있었으면 좋겠다.
덕분에 반디캠으로로 동영상을 촬영하고, 동영상을 gif 파일로 변경하는 사이트도 알게 됐다!👏
- https://ezgif.com/video-to-gif : mp4를 gif로 변환 해주는 사이트
보완점
- 바로가기 추가 항목이 없다.
- 구글 홈페이지 로고는 움직인다!
-
구글 홈페이지
-
클론 코딩
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>google</title>
<link rel="stylesheet" href="./index.css">
<script src="https://kit.fontawesome.com/3c579473f5.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header>
<div class="header">
<a href="https://www.google.com/"><img src="./img/google.png"></a>
</div>
</header>
<section>
<div class="section">
<form action="form.html">
<div class="form-bar">
<div>
<i class="fas fa-search"></i>
<input class="search" type="text" name="search-bar" placeholder="검색어를 입력해주세요.">
</div>
</div>
</form>
</div>
</section>
<section>
<div class="section-contents">
<div>
<img src="http://placehold.it/112X112">
<img src="http://placehold.it/112X112">
<img src="http://placehold.it/112X112">
<img src="http://placehold.it/112X112">
<img src="http://placehold.it/112X112">
<img src="http://placehold.it/112X112">
</div>
<div>
<img src="http://placehold.it/112X112">
<img src="http://placehold.it/112X112">
<img src="http://placehold.it/112X112">
<img src="http://placehold.it/112X112">
<img src="http://placehold.it/112X112">
<img src="http://placehold.it/112X112">
</div>
</div>
</section>
<footer>
<div class="footer">
<form action="www.google.com" name="search_vogue">
<a href="https://www.youtube.com/watch?v=rokGy0huYEA&feature=youtu.be"><input type="button" value="2020년 인기 검색어 트렌드 보기"></a>
</form>
</div>
</footer>
</div>
<script>
</script>
</body>
</html>
index.css
html, body {
margin: 0;
padding: 0;
box-sizing:border-box;
}
.container {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.header {
margin-top: 30px;
}
.section {
margin: 30px 0px 80px 0;
}
.form-bar {
display: flex;
width : 500px;
margin: 0 auto;
box-shadow:0 1px 6px 0 rgba(32, 33, 36, .28);
height: 45px;
border-radius: 30px;
border: 1px solid white;
text-indent: 15px;
justify-content: space-between;
align-items: center;
}
.search {
border: none;
}
.search:focus {
outline: none;
border: none;
}
.section-contents {
display: flex;
flex-direction: column;
margin-bottom: 50px;
}
.section-contents > div > img {
margin: 10px 10px;
}
.footer > form > a > input {
border-radius: 15px;
background-color: white;
color: #3367D6;
border: 1px solid black;
height: 25px;
outline: none;
}form.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>
</head>
<body>
<h1>검색 결과입니다.</h1>
</body>
</html>References
- 🎈2020.12.10
- 🎈VScode, Eclipse EE : .jsp
안녕하세요:)