3일간 학습한 HTML + CSS를 가지고 구글(내가 만든건 쭈글) 메인 홈페이지 클론코딩을 진행해보았다.
알고있는 것에 비해 막히는 부분이 많았고, 누추한 코딩 실력이지만 한번이라도 더 사용하며 어떤 것을 의미하는지 리뷰하는 목적으로 만들어보았다.
JJOOGLE CSS
<style>
@import url('NOTO SANS 글꼴 url');
* {
font-family: "Noto Sans K", sans-serif;
font-size: 14px;
}
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
label {
position: relative;
}
.nav_margin>a,
.d-flex>a,
svg {
margin: 10px 20px 0px 0px;
}
.img_section {
max-height: 230px;
position: relative;
text-align: center;
margin: 100px 48px 0px 48px;
}
.img_size {
max-height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center bottom;
width: auto;
vertical-align: bottom
}
.mid {
display: flex;
justify-content: center;
}
input {
width: 584px;
height: 48px;
border-color: #dcdbdb;
border-radius: 22px;
border-width: 1px;
margin: 6px;
display: block;
}
.search_bar {
width: 584px;
height: 48px;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
opacity: 1;
}
.buttons {
margin-top: 25px;
margin-right: 10px;
}
footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 100px;
background-color: #f2f2f2;
}
.footer_font {
position: relative;
font-size: 13px;
margin-right: 2%;
}
</style>JJOOGLE HTML
<body>
<nav class="navbar">
<div class="container-fluid">
<div class="nav_margin">
<a style="margin-left: 10px;">Google 정보</a>
<a>스토어</a>
</div>
<div class="d-flex">
<a>gmail</a>
<a>이미지</a>
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
viewBox="0 0 24 24" width="24px" fill="#5f6368">
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<path
d="M19.8,18.4L14,10.67V6.5l1.35-1.69C15.61,4.48,15.38,4,14.96,4H9.04C8.62,4,8.39,4.48,8.65,4.81L10,6.5v4.17L4.2,18.4 C3.71,19.06,4.18,20,5,20h14C19.82,20,20.29,19.06,19.8,18.4z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#5f6368">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
</svg>
<img style="border-radius: 70%; width: 30px; height: 30px; margin-top: 5px"
src="https://lh3.google.com/u/0/ogw/AF2bZyioVWlNxrj47ZYm_Bw6SkKERkJ8QwzLnxNz0VncwdiPtQ=s32-c-mo"
style="width: auto;">
</div>
</div>
</nav>
<div class="mid img_section">
<div style="height:calc(100% - 200px)"></div>
<picture>
<a
href="http://google.com/search?sa=X&sca_esv=0938baf10882972d&sca_upv=1&q=%EC%8A%A4%ED%8F%AC%EC%B8%A0%ED%81%B4%EB%9D%BC%EC%9D%B4%EB%B0%8D+%EC%98%AC%EB%A6%BC%ED%94%BD&oi=ddle&ct=348046009&hl=ko&ved=0ahUKEwi5gsmO-eGHAxWosFYBHRQlPLoQPQgN">
<img class="img_size"
src="https://www.google.com/logos/doodles/2024/paris-games-climbing-6753651837110564-law.gif"
alt="파리 2024 클라이밍" width="500" height="200" title="파리 2024 클라이밍" id="hplogo">
</picture>
</a>
</div>
<div class="mid">
<div class="search_bar">
<input type="text"></input>
<svg style="position: absolute; left: 5%; top: 6%;" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<path
d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" />
</svg>
<svg style="position: absolute; right: 16%; top: 6%;" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<path
d="M160-200q-33 0-56.5-23.5T80-280v-400q0-33 23.5-56.5T160-760h640q33 0 56.5 23.5T880-680v400q0 33-23.5 56.5T800-200H160Zm0-80h640v-400H160v400Zm160-40h320v-80H320v80ZM200-440h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM200-560h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM160-280v-400 400Z" />
</svg>
<svg style="position: absolute; right: 9%; top: 6%;" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<path
d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm40-360q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z" />
</svg>
<svg style="position: absolute; right: 2%; top: 6%;" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<path
d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z" />
</svg>
</div>
</div>
<div class="mid">
<button type="button" class="btn btn-light buttons">Google 검색</button>
<button type="button" class="btn btn-light buttons">I'm Feeling Lucky</button>
</div>
</body>
<footer class="py-2 my-0">
<ul class="nav justify-content-lg-start border-bottom pb-2 mb-3 ">
<li class="nav-item"><a href="#" class="nav-link px-5 text-body-secondary" style="font-size: 16px;">대한민국</a>
</li>
</ul>
<div style="display: flex;">
<div style="width: 50%;">
<a class="footer_font" style="margin-left: 5%;">광고</a>
<a class="footer_font">비즈니스</a>
<a class="footer_font" style="margin-right: 200px;">검색의 원리</a>
</div>
<div style="width: 50%; text-align: right; margin-right: 3%;">
<a class="footer_font">개인정보처리방침</a>
<a class="footer_font">약관</a>
<a class="footer_font">설정</a>
</div>
</div>
</footer>쭈글 구동 이미지
-
원본 GOOGLE 사이트 캡처본
-
쭈글(구글 클론) 사이트
아직 반응형 웹사이트나 모바일에 적용되는 문법을 익히지 못해서 완벽하게는 못만들었지만,
지금까지 배운 것에 대해 적용하는법정도는 익힌 것 같다.
갈 길이 멀다.
하루 최소 1시간이라도 공부하자..