본문 바로가기
따라쟁이

HTML과 CSS로 구글 메인 페이지를 만들어보자! 2

by IT 정복가 2022. 7. 25.
728x90

https://conquer-it.tistory.com/114

↑↑ 헤더부분은 다 만들었으니까 

메인 화면을 만들 차례이다.

1. 메인 화면의 모든 레이아웃 생각해보기

뭐...flex 사용한다고 한다면 대충 이렇게 짜면 되지 않을까?

2. 구글 로고 만들기

이미지를 가져다 써도 되지만 그냥 내가 만들기로 했다.

그리고 클릭했을 때 링크 걸린게 없기 때문에 a태그는 넣지 않았다.

h1태그 안에 한글자씩 span 태그에 넣어 만들었다 (G대신에 K 넣고 싶어서 넣었다.)

<style>
h1{
    font-size: 100px;
    font-weight: 555;
}

/* 로고 색상 지정 */
h1 span:nth-child(1) {color:#4285f4;}
h1 span:nth-child(2) {color:#ea4335;}
h1 span:nth-child(3) {color:#fbbc05;}
h1 span:nth-child(4) {color:#4285f4;}
h1 span:nth-child(5) {color:#34a853;}
h1 span:nth-child(6) {color:#ea4335;}
</style>

<h1>
	<span>K</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</h1>

(폰트도 바꿔야되는데)

 

3. 검색창 만들기

일단 HTML을 작성해보면

form태그 안에 모든 요소를 넣었다.

<form role="search">
	<i class="bi bi-search"></i>
	<input class = "search-bar" type="search" title="검색">
    <i class="bi bi-keyboard-fill"></i>
    <img src="googleMike.png" alt="음성인식">
</form>

CSS를 적용하지 않으면

이렇게 나오는데 CSS를 적용해서

정렬하고 form태그의 border 주고

텍스트 박스의 border를 none으로 주면 끝!

<style>
    form{
        display: flex;
        border: 3px solid rgb(223, 225, 229);
        width: 650px;
        height: 40px;
        border-radius: 25px;
        align-items: center;
    }

    form .bi, .search-bar{
        margin:0 10px;
    }

    .bi-search{
        color: rgb(154, 160, 166);
    }

    .bi-keyboard-fill{
        color: rgb(123, 123, 123);
    }

    .search-bar{
        width: 510px;
        height: 40px;
        border: none;
    }

    .mike, .bi-keyboard-fill{
        font-size: 25px;
    }
</style>
<body>
    <form role="search">
        <i class="bi bi-search"></i>
        <input class = "search-bar" type="search" title="검색">
        <i class="bi bi-keyboard-fill"></i>
        <img src="googleMike.png" alt="음성인식">
    </form>
</body>

4. 버튼 만들기

버튼 만드는건 그나마 쉽다.

<style>
    .buttons{
        margin-top: 35px;
        display: flex;
        align-items: center;
    }
    .google-btn{
        height: 40px;
        margin-right: 10px;
        background-color: rgb(244, 244, 245);
        border: rgb(226, 227, 228);
        border-radius: 3px;
        padding: 0 16px;
    }

    .buttons a{
        color: rgb(46,50 ,53);

    }
</style>

<body>
    <div class="buttons">
        <button class="google-btn"><a href="#">Google 검색</a></button>
        <button class="google-btn"><a href="#">I'm Feeling Lucky</a></button>
    </div>
</body>

5. 로고 폰트 적용하기

구글폰트에서 구글로고 폰트를 찾아서 적용한다.

딱 봐도 구글로고에 사용된 폰트이다.

https://fonts.google.com/specimen/Josefin+Sans?query=sans&category=Sans+Serif&preview.text=Google&preview.text_type=custom 

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

복붙하면 끝↓

적용결과

[지금까지 진행된 것]

1. 상단 헤더 완료

2. 메인 화면 완료

[현재까지 만든 전체 코드]

[HTML]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@350&display=swap" rel="stylesheet">
    <link rel="icon" type = "image/png" href="google.png">
    <title> Google</title>
</head>
<body>
    <div class="container">
        <!-- ----------------------header부분----------------------------->
        <div class="header">
            <ul class="header-left">
                <li><a href="#">Google 정보</a></li>
                <li><a href="#">스토어</a></li>
            </ul>

            <ul class="header-right">
                <li><a href="#">Gmail</a></li>
                <li><a href="#">이미지</a></li>
                <li>
                    <a href="#"><button class ="btn1" title="Google 앱"><i class="bi bi-grid-3x3-gap-fill"></i></button></a>
                </li>
                <li>
                    <a href="#"><button class ="btn2" title="Google 계정">k</button></a>
                </li>
            </ul>
        </div>
        <!-- ----------------------main부분----------------------------->
        <div class="main">
            <h1>
                <span>K</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
            </h1>

            <form role="search">
                <i class="bi bi-search"></i>
                <input class = "search-bar" type="search" title="검색">
                <i class="bi bi-keyboard-fill"></i>
                <img src="googleMike.png" alt="음성인식" class ="mike">
            </form>

            <div class="buttons">
                <button class="google-btn"><a href="#">Google 검색</a></button>
                <button class="google-btn"><a href="#">I'm Feeling Lucky</a></button>
            </div>


        </div>

        <div class="footer">

        </div>
    </div>
</body>
</html>

[CSS]

/* ----------------------전체 해당--------------------------- */
body{
    margin: 0;
    list-style: none;
}

li{
    
    display: inline;
}

a{
    text-decoration: none;
    font-size: 15px;
}

a:hover{
    text-decoration: underline;
}
/* ----------------------header부분--------------------------- */
.header a{
    color: black;
}

.header{
    display: flex;
    justify-content: space-between;
    padding: 6px;
    align-items: center;
}

.header-left{
    margin-left: 15px;
    padding: 10px;
}

.header li{
    padding: 10px;
}

.header button{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: none;
    font-size: 19px;
}

.fa-solid{
    color: black;
}

.btn1{
    background-color: white;
    color: black;
}

.btn1:hover{
    background-color: rgb(240, 240, 240);
}
.btn2{
    background-color: rgb(239, 108, 0);
    color: white;
}

.btn2:hover{
    border: 4px solid rgb(240, 240, 240);
}
/* ----------------------main부분--------------------------- */

.main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 590px;
}

h1{
    font-size: 100px;
    margin: 35px 0;
    font-family: 'Josefin Sans', sans-serif;
}

/* 로고 색상 지정 */
h1 span:nth-child(1) {color:#4285f4;}
h1 span:nth-child(2) {color:#ea4335;}
h1 span:nth-child(3) {color:#fbbc05;}
h1 span:nth-child(4) {color:#4285f4;}
h1 span:nth-child(5) {color:#34a853;}
h1 span:nth-child(6) {color:#ea4335;}

/* 검색창 꾸미기 */
form{
    display: flex;
    border: 2px solid rgb(223, 225, 229);
    width: 650px;
    height: 40px;
    border-radius: 25px;
    align-items: center;
}

form .bi, .search-bar{
    margin:0 10px;
}

.bi-search{
    color: rgb(154, 160, 166);
}

.bi-keyboard-fill{
    color: rgb(123, 123, 123);
}

.search-bar{
    width: 510px;
    height: 40px;
    border: none;
}

.mike, .bi-keyboard-fill{
    font-size: 25px;
}

/* 버튼 꾸미기 */
.buttons{
    margin-top: 35px;
    display: flex;
    align-items: center;
}
.google-btn{
    height: 40px;
    margin-right: 10px;
    background-color: rgb(244, 244, 245);
    border: rgb(226, 227, 228);
    border-radius: 3px;
    padding: 0 16px;
}

.buttons a{
    color: rgb(46,50 ,53);
}
728x90
저작자표시

'따라쟁이' 카테고리의 다른 글

HTML과 CSS로 넷플릭스(Netflix) 클론 코딩해보기 1  (0) 2022.07.29
HTML과 CSS로 구글 메인 페이지를 만들어보자! 3  (0) 2022.07.26
HTML과 CSS로 구글 메인 페이지를 만들어보자! 1  (0) 2022.07.24
HTML과 CSS로 Spotify 메인 홈페이지를 만들어보자!  (0) 2022.07.23

관련글

티스토리툴바