14일차(2022.01.11 4시간) 바닐라코딩 사전 학습 가이드 STEP 1 Google Clone 완성

roadzmoon76·2022년 1월 11일
0

매일 공부

목록 보기
15/217

코딩알려주는누나 html/css chapter5-문제3

<!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" />
  </head>
  <body>
    <div class="container">
      <div class="box1">
        div 1
      </div>
      <div class="box2">
        div 2
      </div>
    </div>
  </body>
</html>
.container{
  display: flex;
  justify-content: center;
}

.box1{
  color: white;
  background-color: #585858;
  width: 200px;
  height: 200px;
  position: relative;
}

.box2{
  color: white;
  background-color: black;
  width: 100px;
  height: 100px;
  position: absolute;
  align-self: center;
}

https://Chapter5-munje3.roadzmoon76.repl.co

문제4

<!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" />
  </head>
  <body>
   
     <div class="box1">
       div 1
     </div>
     <div class="box2">
       div 2
     </div>
   
  </body>
</html>
.box1{
  color: white;
  height: 100px;
  width: 100px;
  background-color: black;
}

.box2{
  color: white;
  height: 100px;
  width: 100px;
  background-color: #585858;
  position: absolute;
  top: 50px;
  left: 50px;

https://Chapter5-munje4.roadzmoon76.repl.co

문제5

<!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" />
</head>
<body>
  <div class="container">
    
    <div class="box2">
        div 2
    </div>
    <div class="box3">
        div 3
    </div>
    <div class="box1">
      div 1
    </div>
  </div>
</body>
</html>
.container{
  display: flex;
  height: 100vh;
  justify-content: flex-end;
  align-items: flex-end;
}

.box1{
  color: white;
  width: 350px;
  height: 150px;
  background-color: #585858;
}

.box2{
  color: white;
  width: 100px;
  height: 100px;
  background-color: black;
  position: relative;
  left: 200px;
}

.box3{
  color: white;
  width: 100px;
  height: 100px;
  background-color: black;
  position: relative;
  left: 350px;
  bottom: 50px;
}

https://Chapter5-munje5.roadzmoon76.repl.co

바닐라코딩 사전학습가이드 STEP 1 Google Clone

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 defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
  </head>
  <body>
    <header>
      <span>
       <a href="#" class="header-item-left">Google 정보</a>
       <a href="#" class="header-item-left">스토어</a>
      </span>
      <span class="header-nav">
       <a href="#" class="header-item-right">Gmail</a>
       <a href="#" class="header-item-right">이미지</a>
       <i class="fas fa-th header-img1"></i>
       <img class="header-img2" src="https://lh3.googleusercontent.com/ogw/ADea4I7Dcu0bkj-LqDNTIn2L2NA5fRNHilIVRU_I12-g=s64-c-mo">
      </span>
    </header>

    <section class="main">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width=272>
      <div class="input-area">
        <i class="fas fa-search search-icon"></i>
        <input type="text" class="input-box">
        <i class="fas fa-keyboard keybord-icon"></i>
        <i class="fas fa-microphone mic-icon"></i>
      </div>
      <div class="button-area">
        <button class="button-style">Google 검색</button>
        <button class="button-style">I'm Feeling Lucky</button>
      </div>
    </section>

    <footer class="footer-main">
      <div class="footer-first">
        대한민국
      </div>
      <div class="footer-second">
        <span>
          <a href="#" class="footer-second-left-item">광고</a>
          <a href="#" class="footer-second-left-item">비즈니스</a>
          <a href="#" class="footer-second-left-item">검색의 원리</a>
        </span>
        <span class="footer-second-right">
          <a href="#" class="footer-second-right-item">개인정보처리방침</a>
          <a href="#" class="footer-second-right-item">약관</a>
          <a href="#" class="footer-second-right-item">설정</a>
        </span>
      </div>
    </footer>
  </body>
</html>

css

.header-nav{
  float: right;
}

.header-item-left{
  text-decoration: none;
  color: rgba(0,0,0,0.87);
  margin-left: 15px;
  position: relative;
  top: 20px;
}

.header-item-right{
  text-decoration: none;
  color: rgba(0,0,0,0.87);
  margin-right: 15px;
}

.header-img1{
  
}

.header-img1:hover{
  color: #5f6368;
  opacity: 1;
}
.header-img2{
  border-radius: 50%;
  position: relative;
  top: 10px;
  margin-left: 15px;
  height: 32px;
  width: 32px;
  background-size: 32px 32px;
}

.header-img2:hover{
  box-shadow: 0 1px 0 rgb(0 0 0 / 15%);
}

.header-item-left:hover{
  text-decoration: underline;
}

.header-item-right:hover{
  text-decoration: underline;
}

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

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

.input-box{
width: 584px;
height: 46px;
border-radius: 24px;
border: 1px solid #dfe1e5;
padding-left: 50px;
padding-right: 66px;
}

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

.keybord-icon{
  position: relative;
  right: 70px;
  color: #9aa0a6;
}

.mic-icon{
  position: relative;
  right: 60px;
  color: #9aa0a6;
}

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

.button-style{
  height: 36px;
  ackground-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  font-family: Apple SD Gothic Neo,arial,sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  min-width: 54px;
  text-align: center;
}

.button-style:hover{
  ox-shadow: 0 1px 1px rgb(0 0 0 / 10%);
  background-color: #f8f9fa;
  border: 1px solid #dadce0;
  color: #202124;
}

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

.footer-first{
  padding: 15px 30px;
  border-bottom: 1px solid #dadce0;
  font-size: 15px;
  color: #70757a;
}

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

.footer-second-right{
  float: right;
}

.footer-second-left-item{
  text-decoration: none;
  color: #70757a;
  font-size: 14px;
  margin-left: 5px;
}

.footer-second-left-item:hover{
  text-decoration: underline;
}

.footer-second-right-item{
  text-decoration: none;
  color: #70757a;
  font-size: 14px;
  margin-right: 5px;
}

.footer-second-right-item:hover{
  text-decoration: underline;
}

Google Clone 완성페이지

profile
roadzmoon76
크론병걸린 자퇴생, 개발자되기
이전 포스트

13일차(2022.01.10 1시간58분)

다음 포스트

15일차(2022.01.12 5시간 11분)

0개의 댓글