구글 클론 사이트를 만들 것에요. 일단 결과물을 먼저 보여드릴게요.
어때요 정말 간단해 보이죠? 자 그럼 지금부터 시작할게요 잘 따라와 주세요~!
우리는 총 3번에 걸쳐 구글 클론 사이트를 완성시킬 거예요
첫 번째 글에서는 상단에 있는 Gmail, 이미지, 메뉴, 프로필을 만들어볼게요
저는 코드를 VsCode에서 작성했어요
VsCode는 느낌표를 입력하고 탭을 누르면 HTML 서식이 자동으로 만들어지더라고요
원래는 html lang가 en이지만 우리는 사이트에서 한글을 주로 사용하니 ko로 바꿔주세요
그리고 title부분을 변경하면 아래 사진처럼 바꿀 수 있어요! 원하는 제목으로 바꿔주세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google clone</title>
</head>
<body>
</body>
</html>이제 사이트 색이랑 글을 넣어야겠죠?
body의 스타일을 바꾸면 전체적인 사이트를 바꿀 수 있어요
저는 구글을 다크모드로 설정해 두어서 색상이 #202124로 나왔네요
<body style="background-color: #202124;">자 이제 사이트 색상 설정은 완료했고 상단 메뉴들을 만들어야겠죠
저는 메뉴를 묶을 때는 nav를 사용하고 나머지를 넣을 때는 div를 사용해서 넣었어요
<nav>
<div class="top-text">Gmail</div>
<div class="top-text">이미지</div>
</nav>클래스는 나중에 속성을 수정하기 위해서 넣었어요
구글앱은 구글 사이트에서 구글앱 부분에 마우스 우클릭을 하면 검사가 나오는데 누르고 아래 사진을 따라 해보면
이 코드에서 div의 클래스를 top-img로 변경, 스타일에 높이와 넓이를 추가, path에 fill을 추가하여 흰색으로 만들고 나머지는 지웠어요
그랬더니 코드는 이렇게 나왔어요 이 코드를 <nav></nav> 사이에 넣어주세요
<div class="top-img" style="width: 24px; height: 24px;">
<svg>
<path
fill="#ffffff"
d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,
-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,
2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,
-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,
-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,
14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,
-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
</path>
</svg>
</div>구글 계정은 코드를 작성해서 이미지를 넣었어요 이 코드도 마찬가지로 <nav></nav> 사이에 넣어주세요
<div class="top-img">
<img style="border-radius: 50px;width: 32px;height: 32px;" src="profile.jpeg" alt="" />
</div>src에 원하는 사진을 링크하고 스타일은 border-radius를 사용해 동그란 모양으로 만들었고 높이와 넓이를 설정했어요
여기까지 잘 따라오셨다면 요소는 모두 추가됐을 거예요! 이제 세부적인 설정을 해야겠죠?
<head>
~~~
<style>
nav div {
padding: 6px;
margin: 3px;
}
.top-text:hover {
cursor: pointer;
text-decoration: underline;
}
.top-img:hover {
cursor: pointer;
background-color: #5e5e5e62;
border-radius: 50%;
}
</style>
</head>nav의 div 각 요소마다 패딩과 마진을 설정해 주고 마우스를 올렸을 때 생기는 효과를 추가했어요
.클래스이름:hover을 사용하여 top-text는 마우스를 올리면 밑줄이 생기고 top-img는 반투명한 원이 생기도록 설정했어요
<!--
<body style="background-color: #202124;">
-->
<body style="background-color: #202124; color: white; font-size: 14px;
font-family: arial,sans-serif; margin: 0; ">그리고 아까 작성한 body에서 color를 white로 설정해 텍스트의 색을 흰색으로 설정하고 font-size로 폰트 크기를 설정했어요
또한 마진을 0으로 두어서 화면에 꽉 차도록 만들었어요
정렬을 위해서 display를 flex로 설정하고 우측 정렬을 위해 justify-content를 flex-end를 사용했고
각 요소들을 중앙으로 정렬하기 위해 align-items를 center로 설정했어요
<nav style="display: flex; justify-content: flex-end; align-items: center;">
~~~
</nav>잘 따라 했다면 구글 클론 사이트 상단은 완성!
다음에는 구글 클론 사이트 중간 부분을 만들 거예요! 안녕~👋
