html과 css를 이용해서 구글 웹 페이지와 비슷한 Weegle 검색 바를 만들었다. 상위 사진은 출력된 결과물이다.
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"> <title>Weegle</title> <link href="weegle.css" rel="stylesheet" type="text/css" /> <body> <header> <img class="logo" src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png"> </header> <br> <form> <div class="search"> <input type="text" placeholder="검색어를 입력하세요."> </div> <div class="icon"> <img class="icon_1" src="https://cdn.icon-icons.com/icons2/3065/PNG/512/search_magnifier_icon_190940.png"> <img class="icon_2" src="https://cdn.icon-icons.com/icons2/37/PNG/128/keyboard_4316.png"> <img class="icon_3" src="https://cdn.icon-icons.com/icons2/711/PNG/128/microphone-2_icon-icons.com_62161.png"> </div> </form> <br> <form> <button class="button_1">Weegle 검색</button> <button class="button_2">I'm feeling Lucky</button> <form> <br> <br> <br> <footer> <span class="korean"> Weegle 제공 서비스:</span> <span class="english">English</span> </footer> </body>
- html을 만들 때 css를 같이 만들어 link herf를 이용해 서로 연동시켜 놓고 코드를 작성하였다.
- weegle 이미지는 header 태그로 감쌌고 class="logo"를 지정하였다.
- 검색바와 검색바 안에 이미지는 form태그로 감쌌고 검색바는 input을 사용하였고 아이콘을 img 태그의 src로 주소를 복사해서 사용했다.
- 검색바 밑에 버튼 역시 form 태그를 사용해서 button 태그를 감쌌고 각 버튼마다 class를 다르게 줬다.
- 마지막 하단의 글은 inline 속성을 갖는 span 태그를 footer로 감싸서 하단 글로 마무리했다.
CSS
* { box-sizing: border-box; } body{ display: flex; flex-direction: column; align-items: center; } /* weegle 이미지 */ header .logo{ padding-top: 150px; width: 600px; } /* search :bar */ .search input{ width: 400px; height: 30px; border: 2px solid rgb(209, 207, 207); border-radius: 15px; } /* seach bar 안에 글 */ input::placeholder{ text-align: center; font-size: 14px; } /* 검색바 안 아이콘 */ .icon_1{ position: absolute; width: 16px; top: 400px; left: 530px; } .icon_2{ position: absolute; width: 16px; top: 400px; right: 555px; } .icon_3{ position: absolute; width: 16px; top: 400px; right: 530px; } /* 버튼 */ .button_1{ position: absolute; height: 40px; border-radius: 5px; right: 740px ; font-size: 14px; background-color: gainsboro; } .button_2{ position: absolute; height: 40px; border-radius: 5px; right: 600px; font-size: 14px; background-color: gainsboro; } /* 하단 글 */ .english{ color: blue; }
- box-sizing: border-box;은 필수적으로 사용했다.
- body에 flex-direction: column;를 입력해 주축이 column 형태로 만들었고 display flex를 적용해서 수평이 될 수 있게 하였고 align-items: center;를 적용해 모든 아이템을 가운데로 정렬하게 만들었다.
- 아직 css 사용감이 익숙하지 않아서 position abosolute를 사용하여 각각의 위치 조정했고 html로 돌아가 띄어쓰기로 각 이미지의 간격을 조절했다.
baik9261@gmail.com