지금까지 배운 HTML과 CSS를 활용하여 구글 클론코딩을 해볼려고 한다.
HTML부분
<!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">
<link rel="stylesheet" href="html.css">
<title>Document</title>
</head>
<body>
<form>
<div class="title">
<span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
<div class="input">
<form action="https://www.google.com/search" method="GET">
<input class="input-text"name="q" type="text" placeholder=" Goole 검색 또는 URL 입력">
</form>
</div>
<div class="container">
<a href="https://www.instagram.com/"><div class="link"><div class="circle">
<img src="C:\Users\우희섭\Desktop\프로그래밍\아이콘\화면 캡처 2022-08-22 183646.png" alt="인스타이미지"></div><div class="name">인스타크램</div></div></a>
<a href="https://www.naver.com/"><div class="link"><div class="circle">
<img src="C:\Users\우희섭\Desktop\프로그래밍\아이콘\free-icon-monitor-8297661.png" alt="네이버이미지"></div><div class="name">네이버</div></div></a>
<a href="https://www.youtube.com//"><div class="link"><div class="circle">
<img src="C:\Users\우희섭\Desktop\프로그래밍\아이콘\googlemaps.0-e1586239224761.jpg" alt="유튜브이미지"></div><div class="name">유튜브</div></div></a>
<a href="https://velog.io/"><div class="link"><div class="circle">
<img src="C:\Users\우희섭\Desktop\프로그래밍\아이콘\OIP.jfif" alt="velog이미지">
</div><div class="name">velog</div></div></a>
<a href="https://www.acmicpc.net/">
<div class="link">
<div class="circle">
<img src="C:\Users\우희섭\Desktop\프로그래밍\아이콘\youtube-icon-style.png" alt="백준이미지">
</div>
<div class="name">백준</div>
</div>
</a>
</body>
</html>
일단 이 부분에서 태그들의 의미를 정리 해보았다(아직까지 html을 배우고 있는 과정이라 틀린 부분이 있을 수도 있다)
<BODY>: 이 부분은 사용자가 보이게끔 하기 위하여 넣어진 태그이다 그렇기에 사용자가 볼 수 있는 HTML만들고자 한다면 이 BODY태그 안에 넣어주어야한다.
- <SPAN>: 이 태그는 작성한 내용들을 각 span태그마다 요소에 다른 기능을 지정해줄 수 있다.
(이미지는 각자 구해오자 5개 정도 자기가 하고 싶은 이미지를 구해 오면 될 것 이다.)
그렇다면 저런 span태그를 왜 쓰는가?
CSS로 SPAN으로 감싼 정형만을 색깔을 바꾸어 보았다
이렇게
SPAN태그로 GOOGLE의 6글자를 각각 한 문단으로 나누어 색깔을 바꾸었다
Input:이 태그를 사용하여 구글의 검색창을 띄웠다.
<div class=container>class의 이름은 컨테이너라고 짓고
a href의 링크 된 모든 것들을 묶었다.
<div class=circle를 이용해서 사진의 크기들을 동그라미로 만들어 사용자가 읽기에 가동성이 좋게 만들어 사용했다.
이렇게 HTML부분의 설명은 끝이고 CSS를 보자.
.title{
text-align: center;
font-size: 85px;
font-weight:600;
margin:auto;
position:relative;
top:140px;
}
.title > span:nth-child(1){
color: rgb(66,133,244);
}
.title > span:nth-child(2){
color: rgb(234,67,53);
}
.title > span:nth-child(3){
color: rgb(251,188,5);
}
.title > span:nth-child(4){
color: rgb(66,133,244);
}
.title > span:nth-child(5){
color: rgb(52,168,83);
}
.title > span:nth-child(6){
color: rgb(234,67,53);
}
.input{
width:500px;
margin:auto;
position:relative;
top: 170px;
}
.input-text{
width:500px;
height:44px;
margin:auto;
font-size:15px;
border: none;
border-radius: 25px;
box-shadow: 0px 0px 7px 3px rgba(200, 201, 207, 0.4);
}
.container{
display:flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position:relative;
top:200px;
}
a{
display:inline-block;
}
a:link{
color:black;
text-decoration: none;
}
a:visited{
color:black;
}
a:hover{
background-color:rgb(235, 235, 235);
border-radius: 10%;
}
.link{
width:112px;
height:112px;
border-radius: 4px;
}
.circle{
width:48px;
height:48px;
border-radius:50%;
background-color:rgba(241, 243, 244, 1);
position:relative;
top:24px;
left: 32px;
}
img{
height:24px;
width:24px;
position: absolute;
margin:auto;
top:12px;
left:12px;
}
.name{
margin:0px;
position:relative;
margin:auto;
text-align: center;
top:35px;
font-size:13px;
font-weight: bolder;
}
.Title을 살펴보자
text-align : center << 이 부분을 사용해서 GOOGLE의 타이틀의 내용을 중앙으로 맞췄다.
text-align 속성은 텍스트의 정렬 방향을 의미한다.
- left: 왼쪽 정렬
- right: 오른쪽 정렬
- center: 중앙 정렬
- justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)
- 나는 center을 통해 GOOGLE의 타이틀을 중앙으로 배치 시켰다.
폰트 사이즈는 65 높이는 600으로 지정해주었고
positon은 처음엔 개념을 잡기 많이 어려웠다..;; 절대값? 상대값?? 무슨 의미지 하지만 지금도 잘 모르겠지만
유튜브를 찾다가 독학을 하던 도중 좋은 영상을 발견했다. 포지션에 대해서 햇갈리는 분들이 있다면 이 영상을 꼭 보면 좋겠다.!!
이렇게 .title의 설명은 끝이다. 자잘한 부분도 있지만 이것은 너무 기초적인거라 넘어가겠다.
여기서 내가 말한 span의 이유가 나왔다 GOOGLE의 6개의 글자들을 하나하나 색깔을 바꿔줘야 해서
SPAN이란 태그를 썻다고 했다. 그렇기에 여기에 있는 CSS부분에 6글자들을 구글과 색깔을 똑같이 맞추기 위해
CSS로 꾸며주었다. Nth-chid()는 각 부분 몇번 째 요소를 가르키는 태그이다. child(1)이면 첫번째 부분에 지목을 한다는 뜻이다.
input요소는 구글의 검색창을 만드는 태그이다.
저기 영상을 보고 온 사람이라면 이 부분은 쉽게 이해가 될 것 이다.
position:relative;로 줬고 top:170px,width:500px로 줬지만 화면 부분이 잘 가늠이 안가서
그냥 margin:auto로 넣었다 만약에 margin:auto로 넣지 않고 포지션만 넣고싶으면 top:50px,left:300px을 넣으면
중앙 부분으로 갈 것이다. 이것또한 설명해주고 싶지만 영상을 본 사람들이라면 이해가 될 것 같아 설명은 생략하겠다.
이 input-tetx는 구글의 검색창을 꾸미는 css이다.
검색 너비를 500px까지 넓히고 높이는 44px margin:auto로 중앙에 맞춘다
Font-size:15는 저기 보이는 Google 검색 또는 URL 입력 사이즈를 15로 주겠다는 의미이다.
border:none은 저기 구글 바에 보이는 테두리를 없앤다는 의미이다. 초보자는 잘 모를수도 있으니 예시를 보여주겠다.
이것은 border:none을 하지 않았을때 생기는 검색창이다. none을 했을 때와 none을 하지 않았을 때 차이가 보이는가?
또한 border-radius를 사용하여 구글 창의 겉 부분을 둥글게 만들고 그림자를 넣어 더욱 효과적으로 보이게 했다.
여기 container부분을 내가 html부분에서 묶었다고 하지 않았는가? 이게 여기서 나온다.
이 container부분은 우리가 이제 사진을 넣고 사용하고 꾸미기 위해 사용 할 것 이다.
display:flex이용하여 사진이나 아이콘등을 정렬시켰다.
정확히 사진으로 보여준다면
이런느낌이 display:flex이다 아이콘을 깔끔하게 정렬하고 싶다면 이 태그를 자주 이용하면 좋을 것 이다.
또한 flex-direction:row 사용하여 좌>우로 정렬을 시도하였다.
이렇게 좌>>우로 정렬을 하게끔 하는 것이 flex-direction:row이다
또한 column이라는 태그도 있는데 이 태그는 좌>>우가 아니라 위에서 아래로 정렬 시켜주는 태그이다.
이런식으로 말이다.
또한 display:"wrap" 속성은 display:flex인 경우에만 동작한다.
[CSS] flex-wrap: wrap 속성 : 네이버 블로그 (naver.com)
[CSS] flex-wrap: wrap 속성
도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :) 개요 Responsive Card UI 만들...
blog.naver.com
이 블로그를 들어가서 개념을 익힌다면 좋을 것이다.
나머지 부분들은 거의 다 비슷한 부분이라 생략하고 이 부분까지 이해를 했다면 구글 클론코딩은 거의 이해했다고 할 수 있을꺼 같다. (물론 나도 배우고 있는 입장이다 너무 어렵다..)
이렇게 결과화면은
이런식으로 나올 것 이다. 처음에는 구글이란 클론코딩이 정말 간단한 부분인 줄 알았는데
클론코딩 하면서 이것저것 배우고 용어도 익힌다고 하니 몇일은 걸린거 같다. 오류 수정 부분에서도 많이 막혔다.
아무래도 css와 html 태그들의 개념을 정확히 몰라서 이런일이 생긴 것이 아닐까 싶다. 그렇기에 나도 배우는 입장에서 이런 다시 복습하는 차원에서 글을 썻고 혹시나 구글 클론코딩에서 막히는 사람들이 있다면 내가 쓴 이 글을 참고해서 만들어 보면 더욱 효과적이게 클론코딩을 배우지 않을까 싶다.