위와 같은 모양의 웹페이지를 만들자
# 구현 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://kit.fontawesome.com/4e5b2f86bb.js" crossorigin="anonymous"></script>
<style>
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
}
img {
width:300px;
margin-bottom:10px;
}
.inputbox{
position: relative;
}
input {
width:450px;
padding: 10px 30px;
border-radius: 50px;
border: 1px solid #f4f4f4;
font-size: 18px;
margin-bottom: 22px;
}
.extrabutton {
background-color: #f4f4f4;
padding: 10px 15px;
margin: 10px;
border-radius: 5px;
color:#6a6b6f;
}
i {
position: absolute;
font-size: 18px;
}
.fa-magnifying-glass {
color:#808080;
left: 15px;
top: 11px;
}
.fa-keyboard {
right: 43px;
top: 11px;
}
.fa-microphone {
color: #5c8fed;
right: 15px;
top: 11px;
}
.english {
margin: 20px;
}
</style>
</head>
<body>
<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
<div class="inputbox">
<input type="text">
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-keyboard"></i>
<i class="fa-solid fa-microphone"></i>
</div>
<div>
<span class="extrabutton">Weegle 검색</span>
<span class="extrabutton">I'm feeling Lucky</span>
</div>
<div class="english">Weegle 제공 서비스 : <a href="https://www.google.com/search?q=english&sxsrf=ALiCzsZMgf2T5woYM18mL8bcBGOzJMzTxA%3A1653456644313&source=hp&ei=BL-NYuvlDsDDuvQPtsisgA4&iflsig=AJiK0e8AAAAAYo3NFBi0jiWD3yH9y6uYUkW0pxjg429x&ved=0ahUKEwjr97n_9fn3AhXAoY4IHTYkC-AQ4dUDCAk&uact=5&oq=english&gs_lcp=Cgdnd3Mtd2l6EAMyEAgAEIAEEIcCELEDEIMBEBQyCwgAEIAEELEDEIMBMggIABCABBCxAzIICAAQgAQQsQMyCwguEIAEELEDEIMBMgUILhCABDILCAAQgAQQsQMQgwEyCwgAEIAEELEDEIMBMggIABCABBCxAzIFCAAQgAQ6BAgAEAM6FAguEIAEELEDEIMBEMcBEK8BENQCOgQIIxAnOhAILhCABBCHAhDHARDRAxAUOhEILhCABBCxAxCDARDHARDRAzoHCCMQ6gIQJzoRCC4QgAQQsQMQxwEQ0QMQ1AI6BwgAEIAEEAo6CAguEIAEELEDOg4ILhCABBCxAxCDARDUAlAAWO4TYLcVaANwAHgAgAH_AYgB6xCSAQMyLTmYAQCgAQGwAQo&sclient=gws-wiz">English</a></div>
</body>
</html>1. html 구조
- 검색창과 회색 버튼은 div 태그로 묶는다.
- 검색창 div 태그 안에는 input 태그와 i 태그(아이콘 3개)가 있다.
- 회색 버튼 div 태그는 span 태그 2개가 있다.
- 'english'는 하이퍼링크를 넣기 위해 a 태그를 사용했다.
2. body 태그
- 화면 정중앙에 위치시키기 위해 flex 를 사용했다.
flex-direction: column;위에서 아래로 정렬한다.align-items: center;세로선(열) 기준 가운데로 정렬한다.justify-content: center;가로선(행) 기준 가운데로 정렬한다.
3. div.inputbox
- div 안에 있는 태그들이 div 안에서 벗어나지 않게 하지 위해
position: relative;를 적용했다.
4. margin
- 박스가 서로 겹치지 않게 모든 요소에 margin 값을 추가했다.
5. 아이콘
position: absolute;를 적용하여 div.inputbox 요소에 절대적인 위치에 있도록 한다.- 아이콘 크기는 18px로 통일했다.
- 돋보기 위치는 왼쪽에서 15px, 위에서 11px이다. 키보드와 마이크도 위치에 맞게 각각 지정했다.
# 막힌부분
1. 'Weegle 검색', 'I'm feeling Lucky'가 한 줄로 표현이 안됨
body 태그를 display: flex; 처리를 했더니 블록 요소가 되어버렸다. 이건 div 태그 안에 span 태그를 넣어버리니까 해결.
2. 박스끼리 겹치는 현상
margin 값을 줬더니 해결.
3. 정가운데로 배치하고 싶다
높이가 박스에 딱 맞아서 justify-content가 적용이 안된다. 우선 높이를 화면 전체로 바꿔야 했다.
body 태그의 높이를 100% 로 해도 적용되지 않는다. height=100vh;로 하니까 해결. 스크롤 바가 넘치는 현상이 있어서 margin=0;을 추가했다.
# 결과
야호!
backend developer 🐌