[ 클론 코딩 ] 구글 클론 코딩 - html & css

1 . 웹페이지 분석

헤더 , 섹션 , 푸터로 나눈 이미지를 토대로 구현해보자.

 

2 . 헤더 부분 구현

구현한 이미지

<header>
        <div class="header"> 
            <div class="left_head">
                <a class="head_info" href="#">Google 정보</a>
                <a class="head_info" href="#">스토어</a>
            </div>
            <span class="center_head" style="width: 75vw;"></span>   
            <div class="right_head">
                <div>
                    <a class="head_info" href="#">Gmail</a>
                    <a class="head_info" href="#">이미지</a>
                </div>
                <img class="account_img" src="../img/unnamed.png">
            </div>
        </div>
    </header>

3. 섹션 부분 구현

세부 디테일까지 구현하지 않고 큰 부분만 구현해주었다

  <section>
       <div>
            <div class="st_logo">
                <img src="../img/googlelogo_light_color_272x92dp.png">
            </div>
       </div>
       <div class="input_container">
            <input class="st_input">
       </div>   
       <div class="btn_container">
        <div class="center">
             <button>Google 검색</button>
            <button>I'm Feeling Lucky</button>
        </div>
       </div>
    </section>

4. 푸터 부분 구현

   <footer>
        <div class="location">
            <a>대한민국</a>
        </div>
        <hr style="color: #BDC1C6;">
        <div style="display: flex;">
            <div>
                <a>광고</a>
                <a>비즈니스</a>
                <a>검색의 원리</a>
            </div>
            <div style="width: 70vw;"></div>
            <div>
                <a>개인정보처리방침</a>
                <a>약관</a>
                <a>설정</a>
            </div>
        </div>
        
    </footer>

5. css 코드

html,body {
    height: 100%;
    margin: 0;
    /* padding: 0; */
}

html,body {
    min-width: 400px;
}

body {
    background-color: #202124;   
}

body, input,button {
    font-size: 14px;
    color: #BDC1C6;
}

a {
    text-decoration: none;
    color:#BDC1C6;
}

header {
    height: 10vh;
    /* background-color: red; */
}

section {
    height: 70vh;
}

footer { 
    height: 20vh;
    background-color: #171717;
   color: #BDC1C6;
}

.header {
    display: flex;
    margin: 2.5vh 1.5vw;
}

a.head_info {
    padding: 5px;
    display: inline-block;
    margin: 0 5px;
}
.left_head {
    display: flex;
}
.right_head {
    display: flex;
}

.account_img {
    border-radius: 30px;
    margin-left: 10px;
}

.st_logo {
    text-align: center;
    margin-top: 50px;
}

.input_container {
    text-align: center;
    margin-top: 3vh;
}

.st_input {
    height: 30px;
    width: 35vw;
    border-radius: 30px;
}

.btn_container {
    text-align: center;
    margin-top: 3vh;
}

button {
    border-radius: 3px;
    background-color:#2F3134;
    border: 0;
    height: 30px;
}

6. 느낀 점

만들다 뒤로 갈수록 점점 대충대충 만들게 되었다.. 소요 시간은 약 1시간 정도

css 레이아웃 공부를 좀 더 해야겠다. html에 비해 css 공부가 덜 되어있다고 느낄 수 있었다.

전체 코드: https://github.com/balhyo-younjisang/google