사이트 만들기
해당 사이트를 만들기 위해서 편의성을 위해서 vscode 기준으로 htmltagwrap을 다운받아준다. 그러면 각각 따로 일일이 써주지 않아도 alt + w를 눌러주면 각각 태그를 지정해줄 수 있다.
부트스트랩을 이용해서 만들기
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Yugle</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="./css/style.css" rel="stylesheet"/>
</head>
<body>
<h1>
<span>Y</span><span>u</span><span>g</span><span><span>l</span></span><span>e</span>
</h1>
<form action="https://www.google.com/search" method="GET">
<div class="mx-auto mt-5 position-relative search-bar input-group mb-3">
<input name="q" type="text" class="form-control rounded-pill" placeholder="Yugle 검색 또는 URL입력" aria-label="Recipient's username" aria-describedby="button-addon2">
<!-- <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button> -->
</div>
</form>
</body>
</html><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">이 링크는 부트스트랩에서 css를 가져올 수 있도록 연결해주는 링크다.
<div class="mx-auto mt-5 position-relative search-bar input-group mb-3"> <input name="q" type="text" class="form-control rounded-pill" placeholder="Yugle 검색 또는 URL입력" aria-label="Recipient's username" aria-describedby="button-addon2"> <!-- <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button> --> </div>검색하고 버튼을 누르는 칸을 만들어준다. 지금은 버튼을 주석처리해서 버튼을 없에주었다.
mx-auto: 부트스트랩에서 가져온 가운데 정렬 클래스
mt-5: 네모난 칸을 모서리를 둥글게 만들어주는 클래스
구글이 검색될 때를 보면search?q=아이즈원이런식으로 q다음으로 검색할 께 나오므로 action으로 구글 search까지 적어줘서 search로 향한다고 적어주고 검색역할을 하는 input에 name으로 q를 적어줘서 구글 검색과 같은 기능을 하게 만들었다.
h1 {
text-align: center;
margin-top: 230px;
font-size: 90px;
}
h1 > span:nth-child(1) {
color: #4285f4;
}
h1 > span:nth-child(2) {
color: #ea4335;
}
h1 > span:nth-child(3) {
color: #fbbc05;
}
h1 > span:nth-child(4) {
color: #4285f4;
}
h1 > span:nth-child(5) {
color: #34a853;
}
h1 > span:nth-child(6) {
color: #ea4335;
}
.search-bar{
width: 500px;
}
최선을 다하자!!