유튜버 조코딩 님 강의 보면서 쫌쫌따리 짭 구글 만들기 성공!
오늘 배운 것들
span 도 어디 쓰냐에 따라서 글자 배치가 달라진다. 처음에는 옆에 쭉 늘여서 안 쓰고, 밑으로 나열되게 썼는데 그렇게 하니까 G o o g l e 이런 식으로 글자가 다 떨어지게 나왔다...
부트스트랩에서 쓰이는 단축키? 를 사용하니까 훨씬 코드의 양이 줄어든다. 효율적으로 작성하기 위해서 참고하는 게 좋겠다.
Emmet 단축키도 마찬가지!
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Google</title>
<style>
h1 {
text-align: center;
margin-top: 230px;
font-size: 90px;
}
h1 span:nth-child(1) {
color: #4285f4;
}
h1 span:nth-child(2) {
color: #ea4336;
}
h1 span:nth-child(3) {
color: #fabd05;
}
h1 span:nth-child(4) {
color: #4285f4;
}
h1 span:nth-child(5) {
color: #33a853;
}
h1 span:nth-child(6) {
color: #ea4336;
}
.search-bar{
width: 500px;
}
</style>
</head>
<body>
<h1>
<span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</h1>
<form action="https://www.google.com/search" method="GET">
<div class="mx-auto mt-5 search-bar input-group mb-3">
<input name= "q" type="text" class="form-control rounded-pill" placeholder="Google 검색 또는 URL 입력" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">검색</button>
</div>
</div>
</form>
</body>
</html>
새싹 개발일지 작성자