첫 포트폴리오 라고 하기엔 많이 부끄럽지만.
자바 공부만 해왔다가 처음에 잠깐 해봤던 HTML.CSS 공부를 다시 하게 되었다.
결론부터 말하자면 아직 다 보진 않았다.
Google 웹 사이트를 만들어보는 과정을 진행 했는데, 너무 재밌었다.
지루하다는 느낌도 전혀 못 받았다 !
미약하지만, 첫 포트폴리오를 깃허브 저장소에 올려도 보고, 굉장히 뿌듯 했다.
사실 실제 google 사이트를 소스를 하나하나 뜯어보면서 진행해서, 그냥 보고 따라한것이나 다름이 없었다.
근데 그것만으로도 CSS에 대한 개념도 어느정도 익힌 것 같아서 기분이 아주 좋았다.
이 강의를 보고 Javascript로 완강 할 예정이다!
코드는 replit.com 웹 사이트를 이용을 해서 작성을 했다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Google</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/48e228f2fc.js" \crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar">
<a href="#" class="nav-item">Gmail</a>
<a href="#" class="nav-item">Images</a>
<i class="fa-solid fa-bars"></i>
</div>
<div class="main">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png"
width=272 />
<div class="input-area">
<i class="fa-solid fa-magnifying-glass search-icon"></i>
<input type="text" class="input-box" />
<i class="fa-solid fa-microphone mic-icon"></i>
</div>
<div class="button-area">
<button class="button-style">Google Search</button>
<a href="https://www.google.com/doodles">
<button class="button-style">I'm feeling lucky</button>
</a>
</div>
<div class="offered">
Google offered in:
<a href="#">한국어</a>
<a href="#">tiếng Việt</a>
<a href="#">Français</a>
<a href="#">汉语</a>
</div>
</div>
<div class="footer">
<div class="first-line">
대한민국
</div>
<div class="second-line">
<span>
<a href="#">About</a>
<a href="#">Advertising</a>
<a href="#">Business</a>
<a href="#">How search works</a>
</span>
<span class="second-line-second">
<a href="#">Privacy</a>
<a href="#">Term</a>
<a href="#">Setting</a>
</span>
</div>
</div>
</body>
</html>
CSS
body {
display:contents;
}
.navbar {
float:right;
margin:15px;
font-weight:bold;
}
.nav-item {
text-decoration: none;
color: #000000DE;
margin-right:15px;
}
.nav-item:hover {
text-decoration: underline;
}
.main {
margin-top: 300px;
text-align: center;
}
.input-area {
margin-top:20px;
}
.input-box{
width:584px;
height:46px;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border: 1px solid #dfe1e5;
font-size:16px;
padding-left:50px;
padding-right:50px;
}
.search-icon {
position: relative;
left:40px;
color: #9aa0a6;
}
.mic-icon {
position: relative;
right:40px;
color: #9aa0a6;
}
.button-area{
padding-top:18px;
border: 1px solid #f8f9fa;
}
.button-style {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 10px;
color: #3c4043;
font-family: Apple SD Gothic Neo,arial,sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
}
.button-style:hover{
box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
background-color: #f8f9fa;
border: 1px solid #dadce0;
color: #202124;
}
.footer {
position: absolute;
bottom:0px;
background: #f2f2f2;
width:100%;
}
.first-line{
padding: 5px 20px;
border-bottom: 1px solid #dadce0;
font-size: 10px;
color: #70757a;
}
.second-line-second {
float: right;
}
.second-line a {
text-decoration: none;
color: rgba(0, 0, 0, 0.54);
padding-right: 15px;
}
.second-line a:hover {
text-decoration: underline;
}
https://google-website.jamyoung1160.repl.co/
'Frontend' 카테고리의 다른 글
| [HTML,CSS] Spotify Site (0) | 2022.06.05 |
|---|