[TIL] 01. Google 홈페이지 클론 프로젝트 (2) - html 및 css 전체 페이지

Yeonsue Park·2020년 7월 11일

CSS google html 클론

google-clone

목록 보기

2/4

이전 글에 이어서, 본격적으로 프로젝트 작성 과정을 기록합니다.
(1) 결과 화면, (2) 소스 코드, (3) 배운 점, (4) 질문 순으로 작성했습니다.

1. html 문서 완성

결과물

소스 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Google Clone</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="navbar">
        <a href="#" class="gmail">Gmail</a>
        <a href="#" class="images">이미지</a>
        <a href="#" class="apps"><img src="google_apps.png" width="25px"></a>
        <a href="#" class="sign-in">Sign in</a>
    </div>
    <div id="main">
        <a href="#" class="logo"><img src="google_logo.png" width="270px"></a>
        <input type="text" class="searchbox">
        <div class="btn">
            <button class="search-btn">Google 검색</button>
            <button class="lucky-btn">I'm Feeling Lucky</button>
        </div>
    </div>
    <div id="footer">
        <div class="footer1">
            <a href="#" class="korea">대한민국</a>
        </div>
        <div class="footer2">
            <a href="#" class="advert">광고</a>
            <a href="#" class="business">비즈니스</a>
            <a href="#" class="info">Google 정보</a>
            <a href="#" class="search-work">검색의 원리</a>
            <a href="#" class="privacy">개인정보처리방침</a>
            <a href="#" class="terms">약관</a>
            <a href="#" class="setting">설정</a>
        </div>
    </div>
</body>
</html>

배운 점

head 내 link 3개 요소 암기: rel="stylesheet", type="text/css", href="style.css"
img 크기 조절은 바로 html 파일 내에서 width, height 속성 이용해서 편집 (하나만 변경할 경우, 나머지는 비율에 따라 자동 변경됨)
img 태그 내 class 속성 넣을 수 없음 (a, p, div 등은 가능)

질문

왜 img 태그 자체에 class 속성 적용하면 이미지 위치가 변경되고 위아래로 여백이 넓어지지?
img width, height를 50%로 설정했더니 엄청 커짐. 무엇에 대비해서 50%라는 거지? (원본 크기는 아닌게 분명)
img 크기 조절 시, 가로/세로만 입력하고 나머지는 비율에 따라 자동적으로 조정되는 방법? (일단 width만 넣어봤더니 비율이 유지되는 것 같음)

2. css: 전체 페이지 설정

결과물

body 전체에 적용될 폰트 설정 (맑은 고딕, 11pt)
body 전체에 적용될 마진, position, min-height 설정
a 태그 적용되는 링크 디자인 변경 (디폴트 밑줄 삭제 및 색상 변경, a:hover시에만 밑줄 발생하도록 함

소스 코드

body {
    font-family: "맑은 고딕", "굴림체", sans-serif;
    font-size: 11pt;
    margin: 0;
    position: relative;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: rgba(0,0,0,0.87);
}

a:hover {
    text-decoration: underline;
}

배운 점

css 문서 최상단에는 페이지 전체에 적용되는 내용을 넣음 (적용 대상: *, html, body 등)
처음에 a 요소가 설정된 모든 내용이 다 파란색에 밑줄이 있어서 당황했는데, 구글링을 통해 이를 변경하는 text-decoration 활용 방법을 배움

질문

position 및 min-height 관련 내용은 막판에 구글링하면서 넣은거라, 보다 심화된 개념 학습 필요함
스타일 적용 대상이 *, html, body일 때의 차이점 정확히 구분 필요

To be continued!

Yeonsue Park

Front-end Developer / 지금, 여기의 행복

이전 포스트

[TIL] 01. Google 홈페이지 클론 프로젝트 (1) - 들어가며

다음 포스트

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

2개의 댓글

meow

2020년 7월 12일

벌써 클론 프로젝트를 하시다니 팀장님 짱짱!!!!!! 🥺 그리고 이미 찾으셨을 수도 있겠지만! width와 height의 50%는 화면 비율에서의 50%인걸로 알고있어요! 반응형 웹에서 주로 사용되는 방식으로 알고 있습니다!!!

1개의 답글