[TIL] 01. Google 홈페이지 클론 프로젝트 (3) - css #navbar, #main

Yeonsue Park·2020년 7월 12일

CSS google html 클론

google-clone

목록 보기

3/4

(2)에 이어, css를 이용한 #navbar 및 #main 스타일링을 진행했습니다.

결과물

1행 5열짜리 grid를 만들어서, 2~5열에 내용을 배치
정사각형 모양의 Google apps 아이콘은 이미지 파일 형식으로 붙여넣음

소스코드

/* Navbar */
#navbar {
    font-size: 9pt;
    display: grid;
    grid-template-rows: 40px;
    grid-template-columns: 1fr repeat(4, 45px);
    grid-template-areas: ". gmail images apps sign-in";
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
}

.gmail {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
}

.images {
    grid-area: images;
    justify-self: center;
    align-self: center;
}

.apps {
    grid-area: apps;
    justify-self: center;
    align-self: center;
}

.sign-in {
    grid-area: sign-in;
    justify-self: center;
    align-self: center;
}

배운 점

제일 먼저 할 건 display: grid 설정! 그 다음 grid 행/열 개수 설정할 것

1행이라도 높이 변경하고 싶으면 grid-template-rows: 50px 등으로 값 주면 됨
전체 페이지의 여백 변경할 경우, body의 margin 이용 (디폴트 마진을 간과하지 말 것)

질문

한글/영문 폰트 서로 다르게 적용하는 방법 알아보기 (예: 한글-맑은 고딕, 영문-arial 등)

4. #main 설정

결과물 1: 전체 grid 설정

3행 grid를 생성해, 각 행마다 (1)로고, (2)검색창 및 (3)검색버튼을 위치시킴
(1)의 경우, align-self: end를 이용해 하단 정렬시킴

결과물 2: 검색창 및 검색버튼 디자인

검색창 및 검색버튼hover시 그림자 효과 추가
검색버튼 면적(padding) 및 버튼 간의 간격(margin) 조정
검색버튼 내 글씨 색상 조정

소스코드

/* Main */
#main {
    display: grid;
    grid-template-rows: 200px 80px 70px;
    grid-template-areas: 
        ". logo ."
        ". searchbox ."
        ". btn .";
    justify-items: center;
    padding-bottom: 100px;
}

.logo {
    grid-area: logo;
    justify-self: center;
    align-self: end;
}

.searchbox {
    grid-area: searchbox;
    justify-self: center;
    align-self: center;
    width: 550px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.151);
    border-radius: 30px;
}

.searchbox:hover {
    box-shadow: 1px 1px 5px gray;
}

.btn {
    grid-area: btn;
    justify-self: center;
    align-self: start;
}

.search-btn {
    border: none;
    color: #5F6368;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 4px;
}

.lucky-btn {
    font-size: 11pt;
    border: none;
    color: #5F6368;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 4px;    
}

.search-btn:hover {
    border: 1px solid rgb(172, 175, 179);
    box-shadow: 0px 1px 2px gray;
}

.lucky-btn:hover {
    border: 1px solid rgb(172, 175, 179);
    box-shadow: 0px 1px 2px gray;    
}

배운 점

유튜브 동영상이랑 차별화하고 싶어서, 열 없이 행만 3개 설정했다. 그랬더니 justify/align 설정이 디폴트인 stretch로 설정되어 아래 그림처럼 양쪽 정렬되어 늘어남.
행을 3개만 만들고 4가지 요소를 넣으려고 했더니, 마지막 4번째 행이 자동 생성되고 높이도 자동적으로 조절되었다 (2번, 3번 행은 내가 설정한 50px를 따랐으나, 4번째 행은 이보다 훨씬 더 낮음)
":hover"는 수식하는 대상에 바로 붙여씀 (예: .searchbox:hover)
그림자는 box-shadow 속성 사용 (참고용 링크)
- offset-x: 수평거리 (음수일 경우, 그림자가 왼쪽에 표시됨)
- offset-y: 수직거리 (음수일 경우, 그림자가 위쪽에 표시됨)
- blur-radius: blur의 정도 (커질 수록 그림자 넓어짐)
- spread-radius: 그림자의 넓이
- color
2개 버튼이 위치한 전체 grid는 "btn"이라는 단일 클래스 적용했지만, 버튼 간 마진 조정 목적에서 각각 버튼에 적용한 별도 클래스에 대해 각각 마진을 적용해주었다. 결과적으로 버튼 사이에 여백이 생기면서 버튼 간의 결과가 멀어질 수 있었다.

질문

2개 버튼이 위치한 전체 grid는 "btn"이라는 단일 클래스 적용했지만, 버튼 간 마진 조정 목적에서 각각 버튼에 적용한 별도 클래스에 대해 각각 마진을 적용해주었다. 결과적으로 버튼 사이에 여백이 생기면서 버튼 간의 결과가 멀어질 수 있었다.

To be continued!