코누나님 - HTML, CSS / Chapter 4 - 구글 웹사이트 만들기

구글 웹사이트를 만들기 앞서 먼저 페이지의 구역을 나눠보라고 하셨다.

이렇게 세 구역으로 나누는게 제일 정석인 것 같다..

강사님의 구글화면과는 달리 난 다크모드를 사용하고있어서

한번 다크모드로 만들어보기로 했다...^^

https://contrastchecker.com/

WCAG - Contrast Checker

Check the contrast of your color design for accessibility base on Web Content Accessibility Guideline (WCAG)

contrastchecker.com

다크모드 색깔 잘잡았는지 확인해주는 사이트.

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <link href = "4-1style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.min.css" integrity="sha512-6c4nX2tn5KbzeBJo9Ywpa0Gkt+mzCzJBrE1RB6fmpcsoN+b/w/euwIMuQKNyUoU/nToKN3a8SgNOtPrbW12fug==" crossorigin="anonymous" />
</head>
<body>
    <div class = "container">
        <div class="header">
            <div class = "header-left">
                <a href="https://about.google/?fg=1&utm_source=google-KR&utm_medium=referral&utm_campaign=hp-header">Google 정보</a>
                <a href="https://store.google.com/KR?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=ko-KR">스토어</a>
            </div>
            <div class = "header-right">
                <a href="https://mail.google.com/mail/?authuser=0&ogbl">Gmail</a>
                <a href="https://www.google.co.kr/imghp?hl=ko&authuser=0&ogbl">이미지</a>
                <a href="#"><i class="fas fa-ellipsis-v"></i></a>
                <a><img id = "profile-icon" src="quokka.jpg"/></a>
            </div>
        </div>
        <div class="content">
            <img src="google-w.png" style="width : 272px; height:92px;"/>
            <div class = "search">
                <i class="fas fa-search" style = "font-size: 14px;"></i>
                <input type="text"/>
                <i class="far fa-keyboard"></i>
                <i class="fas fa-microphone"></i>
            </div>
            <div class = "content-btn">
                <input type="button" value = "Google 검색"/>
                <input type="button" value = "I'm Feeling Lucky"/>
            </div>
        </div>
        <div class="footer">
            <div class = "footer-line" style = "border-bottom : 1px solid #212327; justify-content: flex-start;">대한민국</div>
            <div class = "footer-line">
                <div class = "footer-box">
                    <a href="https://www.google.co.kr/intl/ko_kr/ads/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1">광고</a>
                    <a href="https://www.google.co.kr/services/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpbfooter&fg=1">비즈니스</a>
                    <a href="https://google.com/search/howsearchworks/?fg=1">검색의 원리</a>
                </div>
                <div class = "footer-box">
                    <a href="https://policies.google.com/privacy?hl=ko&fg=1">개인정보처리방침</a>
                    <a href="https://policies.google.com/terms?hl=ko&fg=1">약관</a>
                    <a href="#">설정</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

css파일은 같이 적긴했는데 css 강의들 들으면서 좀 추가해야할 게 있어서

아래에 적어야지.

아무튼!

html 코드에 li, ul은 사용 안했는데 css에 있는 이유는 사용하려고 썼다가 뭔가 안되는 것 같아서 그냥 div로 때우고 얘넨 지웠기때문...ㅎ

만들고 나서 그 다음에 강사님이랑 함께 코드작성하기~가 나오는데 그걸 안보고 일단 만든것이기 때문에 cdn은 좀 다를 수 있다.. 블로그 복붙한거라

cdn은 맨날 플러그인 다운받기 귀찮을때 복붙하는거라 그러려니 했는데 좀 자세한 설명이 있길래 여기에도 붙여넣기해야지.

CDN (Content Delivery Network)이란?
CDN(콘텐츠 전송 네트워크)은 지리적으로 분산된 여러 개의 서버입니다. 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높입니다. 전 세계 데이터센터는 파일 복사본을 임시로 저장하는 프로세스인 캐싱을 사용합니다. 따라서 사용자는 가까운 서버를 통해 웹 활성화 디바이스 또는 브라우저에서 인터넷 콘텐츠에 빠르게 접속할 수 있습니다. CDN은 웹 페이지, 이미지, 비디오 등의 콘텐츠를 사용자의 물리적 위치와 가까운 프록시 서버에 캐싱합니다. 이렇게 하면 콘텐츠가 로딩될 때까지 기다릴 필요 없이 영화 감상, 소프트웨어 다운로드, 은행 잔고 확인, 소셜 미디어 포스팅, 구매 등의 작업을 할 수 있습니다.

CDN을 마치 ATM처럼 생각해도 좋습니다. 여러 곳에 ATM을 설치해 놓으면 사용자가 빠르고 효율적으로 현금을 찾을 수 있습니다. 은행에서 긴 줄을 서서 기다릴 필요 없이 가까운 곳에 있는 ATM을 바로 사용하면 됩니다.

그리고 이거 하나 만드는데 너무 오래한건가 모르겠는데... 거의 4시간은 걸린것같다... ㄷ

로고, 검색부분, 또 아래 버튼부분 따로따로 해놔서 위치가 아예 다르긴하지만... 닮..았나?

f12로 구글에서는 가운데 부분을 처음부터 3등분하고 시작한다. 즉 실제로 5등분으로 시작하니 내가 임의적으로 어떻게든 맞추지 않는 이상 크기가 다른듯하다. (나처럼 중앙 안에 또 3등분 식이 아님.)

강의를 보면서 강사님 코드랑 비교해보는데

나는 input type = "button" 했는데 그냥 <button>으로 해도 전혀 상관없는듯...

그리고 애초에 구글 화면부터가 좀 달랐다 다크모드빼고도ㅠㅠㅠㅠㅋㅋㅋ

그리고 나는 footer에서 div 태그에 클래스를 추가해서 display : flex로 했는데

강사님은 <span>태그를 이용해 그냥 일직선으로 출력했다.

css 부분은 하루 지나서 듣고 있는데

내가 쓰다가 빼먹은 부분들이 있었다.

위 이미지처럼 hover시에는 다시 underline이 생겼다가 unhover시에는 없어지는 이벤트..

이거는 간단하다.

이 부분은 내코드에서는 .header 클래스의 a태그들이므로

.header a:hover {
    text-decoration: underline;
}

이와 같은 코드를 추가해주면 된다. 근데 맨날 none 으로만 하다가 underline을 처음 써보려니 신기하더라...ㅋㅋ

이 때 .header:hover로 쓰면...

이런일이 일어나니 주의하자...

근데 구글 사이트를 개발자도구로 보면서 느낀건

코드를 정말 효율적으로 쓰고 있더라.. 괜히 구글에 입사한게 아닌듯하다.

예를 들어 flex-shirink = 0;을 적용하고 싶은 부분이 여러개라면 클래스를 만들어 이에 해당하는 속성들을 막 붙여쓴다.

예를 들면 <div class = "classA classB classC"></div> 뭐 이런식으로...

근데 클래스 이름들이 하나같이 괴상해서 처음에 뜯어볼땐 경악했다..

자세히 보면 맨 위 <div>태그들에 o3j99 클래스가 동일 적용 되어있는걸 볼 수 있음.

그리고 하나는 검색창 아래에 있는 버튼 두개에 있는 hover 이벤트들이다.

f12 눌러놓고 계속 버튼에 실제 hover 시 코드들을 쫌쫌따리로 확인하기가 힘드니

이럴 땐 직접 올려놓지 않더라고 :hover 시 실행되는 코드들을 확인할 수 있는 방법이 있다.

왼쪽은 내가 알고있던 방법 / 오른쪽은 강사님이 알려주신 방법. 근데 우클릭해서 다른 여러가지를 저렇게 볼 수 있는건 처음 알았다.

아무튼 저 버튼들위에 마우스를 올려놓으면

이 코드들이 실행된다는 것이다.

이를 .content btn input:hover {} 안에 옮겨적고 새로고침하면

hover하면 이제 똑같은 이벤트가 생긴다.

그리고 마지막으로 검색창에서 텍스트를 입력하려고 클릭했을 때 생기는 테두리가 있었다.

.search input:focus {
    outline:none;
}

클릭 시 윤곽 자체를 없애주는 코드를 추가하면 끝!

아이콘은 나의 힘으로 할 수 없는 것이니....

뭐 이외에도 강의에서는 position : relative, absolute, display : inline-block; 등을 다양하게썼지만

난 flex의 맛을 알아버려서 이제 여기서 헤어나올 수 없다.(탈모아님..)

무조건 display : flex로 가능한만큼 최대한 하는중...

그렇게해서 최종 css 코드들은...

*{
    font-family: 'Noto Sans KR', sans-serif;
}

html, body{
    margin : 0;
    padding : 0;
	height : 100%;
    overflow : hidden; 
    background-color: #202124;
}

ul, li {
    list-style: none;
}

p, a {
    color:#fff;
    text-decoration:none;
}

/* 컨테이너 */

.container {
    display : flex;
    flex-direction: column;
    height : 100%;
}

/* header */

.header {
    width: 100%;
    height : 48px;
    margin-left: auto;
    margin-right: auto;
    display : flex;
    justify-content: space-between;
    align-items: center;
    padding : 6px;
}

.header a {
    font-size : 13px;
    margin : 0 10px;
    display : inline-block;
}

.header a:hover {
    text-decoration: underline;
}

.header > div {
    display : flex;
    align-items: center;
}

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

.header-left a{
    color : #bdc1c6 !important;
    font-size : 14px !important;
}

.header-right {
    right : 0;
    margin-right : 10px;
}

#profile-icon {
    border-radius:50%;
    width : 32px;
    height : 32px;
}

/* content */

.content {
    display : flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content > div {
    margin : 20px;
}

/* search */

.search {
    border : 1px solid #5f6368;
    border-radius: 24px;
    box-shadow: none;
    display : flex;
    justify-content: space-between;
    align-items: center;
    width : 90%;
    max-width: 584px;
    height : 44px;
    z-index: 3;
    padding : 0 5px;
}

.search i {
    font-size: 15px;
    color : #5f6368;
    margin : 10px 15px;
}

.search input {
    width : 100%;
    color : #fff;
    font-size: 16px;
    word-wrap: break-word;
    z-index: 10;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
    border: none;
    text-shadow: none;
}

.search input:focus {
    outline:none;
}

/* content-button */

.content-btn input{
    background-color: #303134;
    border: 1px solid #303134;
    color : #e8eaed;
    font-size : 14px;
    margin : 0 4px;
    padding : 0 16px;
    height : 36px;
    line-height: 27px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
}

.content-btn input:hover {
    box-shadow : 0 1px 3px rgb(23 23 23 / 24%);
    background-color: 303134;
    border : 1px solid #5f6368;
    color : #e8eaed;
}

/* footer */

.footer {
    font-size : 15px;
    background-color: #171717;
    bottom : 0;
}

.footer-line {
    display: flex;
    justify-content: space-evenly;
    color : #9aa0a6 !important;
    padding : 15px 30px;
}

.footer-line a {
    color : #9aa0a6 ;
}

.footer-box a{
    white-space: nowrap;
    font-size: 14px;
    padding : 15px;
}

아무튼 예전에 비해서 내 코드들이 갈 수록 깔끔해지고

처음엔 버거웠어도 할 수록 기본기가 탄탄해지는 느낌이 들었는데

실제 구글의 페이지 소스들을 보면 전혀 이해못하는 부분이 한가득... 아직 한참 모자란 스크립트 부분이 대부분이지만

svg로 코드를 어쩌구저쩌구 작성해서 아이콘을 만들던데 알 수 없는 숫자들만 보이는걸보면 웹디자인쪽도 정말 한참 멀었다.

그리고 무엇보다 클래스들을 깔끔하게 정리해서 사용하는 것.

그게 내가 추구하고 싶은 코드들인데 이것도 한참 남았다..

열심히 해야지

+ 강사님 코드 : https://google-website.legobitna.repl.co/

'html, css' 카테고리의 다른 글

코누나님 - HTML, CSS / Chapter 7 - 반응형 웹사이트 만들기 Bootstrap (0)	2022.05.16
코누나님 - HTML, CSS / chapter 6 - Spotify 웹사이트 만들기 (0)	2022.05.15
코누나님 - HTML, CSS / chapter 5 - HTML을 좀 더 쉽게 움직이는 방법 (0)	2022.02.16
코누나님 - HTML, CSS / Chapter 3 - CSS 웹사이트 꾸미기 (0)	2022.02.06
코누나님 - HTML, CSS / Chapter 2- HTML 웹사이트 뼈대 (0)	2022.02.06

hykim

코누나님 - HTML, CSS / Chapter 4 - 구글 웹사이트 만들기

'html, css' 카테고리의 다른 글

티스토리툴바

코누나님 - HTML, CSS / Chapter 4 - 구글 웹사이트 만들기

'html, css' 카테고리의 다른 글

'html, css' Related Articles

티스토리툴바