안녕하세요!
저는 요새 웹프로그래밍을 공부중입니다.
기초적인 HTML,CSS 의 문법을 독학하며 흥미를 느꼈거든요.
그래서 오늘은 첫 클론코딩으로 구글 메인화면을 만들어보려고 해요!
그냥 만들면 재미없으니 제 성을 따 "Poogle" 메인화면을 만들어보겠습니다.
참고로 조코딩님의 유튜브를 참고했어요!
[1] 파일 생성 및 기본 틀 작성
우선 저는 Visual Studio Code를 사용하여 HTML, CSS파일을 만들었어요.
index.html, style.css 파일을 만들어줍시다.
기본 HTML 틀이에요.
어제 HTML의 기본 구조와 태그들을 공부했는데 생각보다 빠르게 이해돼서 재밌었어요.
우선 웹페이지를 한국어로 만들거니까 2번째 줄 lang="ko"로 바꿔줍니다.
<title>은 우리가 만들어볼 "Poogle"로 바꿔주고요.
구글 사이트에 들어가보면 가운데에 "Google" 표시와 그 아래 검색창 기능이 있죠?
<body>에 위 두가지 기본 틀을 만들어볼게요.
1. <h1>태그를 이용하여 "Poogle" 글자를 넣어줍니다.
2. <form>, <input> 태그를 이용하여 검색창을 만들어줍니다.
이제 직접 들어가 틀이 잘 만들어졌는지 확인해봐야겠죠?
[2] CSS 연결 및 제목 꾸미기
기본 틀이 잘 만들어진걸 확인했으니 이제 글자를 가운데로 옮기고 색을 입힐거에요.
구글 메인화면을 보면 글자가 가운데에 있고 각각의 색을 가지고 있죠?
글자를 꾸미기 위해선 CSS를 연결해줘야 하는데요, <link> 태그를 써봅시다.
우리가 만들어놓은 'style.css' 에 연결해줍니다.
<head>부분에 위 코드를 추가함으로써 CSS와 연결할 수 있어요.
이 클래스를 사용했어요.
다시 index.html 로 돌아와서 <h1>태그에 "Poogle"이 있으니 클래스를 적용시킵니다.
<h1 class="align-center">Poogle</h1>
이제 글자 크기를 키우고 위치를 대강 잡아볼게요.
저는 크롬을 이용하기 때문에 F12를 눌러 개발자 도구를 활용합시다.
측정해본 결과 margin-top : 180px , font-size : 80px 정도면 괜찮을 것 같아요.
위의 정보들을 바로 CSS에서 아까 만든 클래스 내부에 넣어줍니다.
이제 글자의 색을 바꿔줍시다.
저는 Visual Studio Code 의 확장 프로그램인 "htmltagwrap" 을 활용해 태그를 감싸줬어요.
"Poogle"의 각 글자를 <span>태그로 감싸줍니다.
"Poogle" 에서 각 글자를 h1의 n번째 자손으로 나눴기 때문에 h1 span:nth-child(n) 클래스를 씁니다.
우선 틀을 만들고 이제 구글 사이트에 들어가 각 글자가 어떤 색인지 추출해볼거에요.
마찬가지로 개발자 도구에 들어가 각 글자의 색을 뽑아봅시다.
2번 박스 밑에 #4285f4 라고 보이죠?
'G' 의 색을 추출한 것을 색깔 코드로 나타낸 것이랍니다. 복사해서 첫번째 자식에 붙여넣기 해줍니다.
나머지 글자도 똑같이 추출해서 복사, 붙여넣기로 색깔을 채워줍시다.
이제 글자는 완성했으니 밑의 검색창은 다음 시간에 이어서 만들어보도록 할게요!