일단 완성작 ✌
자세히 들여다보면 이런 느낌.
코드 살펴보기 🤷♀️
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google</title>
<script src="https://kit.fontawesome.com/1bacce22fc.js" crossorigin="anonymous"></script>
<style>
img {
/* 이미지 중앙 정렬을 위해서 block 요소로 만들고 margin 조정 */
display: block;
margin: 0 auto;
width: 300px;
height: auto;
margin-top: 120px;
margin-bottom: 20px;
}
.box {
display: block;
margin: 0 auto;
border-radius: 25px;
border-style: solid;
border-width: 2px;
border-color: #DFE1E5;
width: 584px;
height: 46px;
}
/* link, visited, hover, actice 순서로 적용해야 함 */
.box:hover { /*hover는 input 요소에도 사용 가능 */
box-shadow: 0px 0px 2px grey;
}
i {
width: 20px;
height: 27px;
}
input {
border-style: none;
}
#search {
color: #9aa0a6;
margin: 0 20px;
}
#search-box {
width: 437px;
height: 44px;
font-size: 15px;
}
#search-box:focus {
/* input 요소 클릭 시, 테투리 없애는 것은 border-style 아니고 outline */
outline: none;
}
#microphone {
color: #4285F4;
margin-left: 15px;
}
</style>
</head>
<body>
<img src="google-logo.png">
<div class="box">
<i class="fas fa-search" id="search"></i>
<input type="text" id="search-box">
<i class="fas fa-keyboard" id="keyboard"></i>
<i class="fas fa-microphone" id="microphone"></i>
</div>
</body>
</html>
기가 막힌 기술을 쓰거나 배운 내용을 모두 다 갈아 넣었다고 생각하진 않는다. 하지만 HTML, CSS 초짜에게 이정도는 꽤나 발전된 모습인 것 같다!
헷갈리거나 어려운 부분, 검색을 통해서 새로 얻은 정보들은 코드 안에 주석으로 처리해두었다. 다음 코딩부터는 같은 실수 하지 않도록 잘 숙지해두어야겠다.
상단, 하단에 마저 구현을 못한 부분들도 있다. 어느정도 공부를 마치면 추가적으로 구현해보려고 한다.
코드를 전부 짜놓고 보니, position 속성을 사용해서 구현하면 아이콘 배치 등이 조금 더 쉬워질 것 같다는 생각이 들었다. 추가적인 기능들을 구현할 수 있는 시간적 여유가 된다면 이 부분을 고려해보면 좋을 것 같다.
➕ 폰트어썸 사용법
구글 홈페이지에 사용된 아이콘과 비슷한 모양을 찾다가 'fontawesome'이라는 사이트를 발견하였다. 참고로 꽤나 유용한 사이트인 것 같다!!
회원가입 후, 로그인을 하면 kit를 생성할 수 있다.
생성된 kit의 이미지를 클릭하면 해당 키트의 주소(?)를 얻을 수 있다. 주소를 그대로 복사해서 폰트어썸 아이콘을 사용하고자 하는 코드의 head 부분에 붙여넣기 하면 일단 사용 준비 완료이다.
상단에 icon 버튼을 클릭하고 왼쪽 체크리스트에서 free에 체크해준다. 그리고 원하는 아이콘의 키워드를 검색한다.
사용하기 적합한 아이콘을 찾았으면 클릭 후, 저기 위에 노란색 코드를 클릭하면 복사가 된다. 아이콘의 적용을 원하는 코드의 body에 붙여넣으면 끝!!
무엇이든 할 수 있고, 무엇이든 될 수 있는