본문 바로가기
It Study/웹 개발 프로젝트 (임시 기록 중단)

Google 클론코딩 연습

by prlkt5200 2024. 2. 11.
반응형

인강을 들어가며, 만들어봤습니다.

겉보기에는 복잡한 것 같으면서도, 간단하다는듯한 느낌이 들어 오묘하네요 ㅎㅎ

 

만들어 가는 과정에서 float, position, hover, active, cdn 링크, 크롬에서 f12(또는 마우스 우클릭 후 검사(inspect))를 활용한 사이트 분석 등등 다양한 것을 알 수 있어 좋았던 것 같습니다.

다음 목표는 조금 더 세밀하고, 다양한 기능을 활용해 웹 사이트(겉 표지)를 만들어보는 것입니다. 그 다음 목표는 만들어 놓은 웹사이트에 데이터베이스(백 단)를(을) 연결해서 실제 기능을 가져보는 것이고요...
그렇게만 된다면 제 첫번째 목표를 달성할 수 있을듯 싶습니다.

 

새벽이라 잡소리가 길어졌네요ㅋㅋㅋ 결과물 올리고 글을 마치도록 하겠습니다.

PS: 특정 아이콘을 fontawesome 이라는 사이트에서 가져왔습니다. 여러분들도 한번 구글링으로 찾아 들어가서 활용해보시면 좋을듯합니다.

 

HTML 코드입니다

따라한 부분도 많기는 했지만, 저의 느낌대로 수정한 부분도 있기에 코드를 올려봅니다.

혹시라도 문제가 될 시 삭제 조치하겠습니다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/f7b95aa7d1.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="navbar">
    <a href="#" class="nav-item">Gmail</a>
    <a href="#" class="nav-item">image</a>
    <i class="fa-solid fa-bars"></i>
  </div>



  <div class="main">
    <img src="./image/googlelogo.webp" class="img-style">
    <div class="input-area">
      <a href="#" class="main-item"><i class="fa-solid fa-magnifying-glass search-icon"></i></a>
      <input type="text" class="input-box" />
      <a href="#"> <i class="fa-solid fa-microphone mic-icon"></i></a>
    </div>
    <div class="button area">
      <button class="button-style">Google Search</button>
      <button class="button-style">I'm feeling lucky</button>
    </div>

    <div class="offered-style">
      Google offered in:
      <a href="#">한국어</a>
      <a href="#">日本語</a>
      <a href="#">中國語</a>
      <a href="#">Tiếng Việt</a>
    </div>
  </div>

  <div class="footer">

    <div class="first-line"><a href="#">대한민국</a></div>

    <div class="second-line">
      <span class="span1">
        <a href="#">광고</a>
        <a href="#">비즈니스</a>
        <a href="#">검색의 원리</a>

      </span>
      <span class="span2">
        <a href="#">개인정보처리방침</a>
        <a href="#">약관</a>
        <a href="#">설정</a>
      </span>
    </div>

  </div>
</body>

<html />

CSS 코드입니다.

html {
  height: 100%;
  width: 100%;

}

body {
  display: contents;
}

.navbar {
  float: right;
  margin: 20px;
}

.nav-item {
  text-decoration: none;
  margin-right: 15px;
}

.nav-item:hover {
  text-decoration: underline;
}

.nav-item:active {
  color: red;
}

.main {
  margin-top: 300px;
  text-align: center;

}

.input-area {
  margin-top: 20px;
}

.input-box {
  width: 515px;
  height: 42px;
  border-radius: 24px;
  border: 1px solid #dfe1e5;
  padding-left: 40px;
  padding-right: 40px;
}

.search-icon {
  position: relative;
  left: 40px;
  color: #9aa0a6;
}

.mic-icon {
  position: relative;
  right: 40px;
}

.button-area {
  padding-top: 18px;
}

.button-style {
  border-radius: 20px;
  border: 2px solid #f8f9fa;
  background-color: #f8f9fa;
  text-align: center;
  height: 36px;
  margin: 10px 4px;
  padding: 0 15px;
}

.button-style:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  background-color: #f8f9fa;
  border: 1px solid #dadce0;
  color: #202124;

}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: red;
}

.offered-style {
  margin: 20px;
}

.img-style {
  width: 272px;
  height: 150px;

}

.footer {
  background: #f2f2f2;
  position: absolute;
  bottom: 0px;
  width: 100%;
}

.first-line {
  padding: 15px 30px;
  border-bottom: 1px solid #dadce0;
  font-size: 15px;
}

.second-line {
  padding: 15px 30px;
}

.span1 {
  float: left;
  padding: 0 20px;

  height: 36px;
}

.span2 {
  float: right;
  padding: 0 20px;
  height: 36px;
}
반응형
저작자표시 (새창열림)

'It Study > 웹 개발 프로젝트 (임시 기록 중단)' 카테고리의 다른 글

도전과제- position과 flexbox를 연습해보자 - 개인 해답 (feat:코딩알려주는 누나/ HTML CSS)  (0) 2024.02.11
css 연습1  (0) 2024.02.05
HTML 기초 연습1  (2) 2024.01.29

관련글

티스토리툴바