🖥️Google 검색창 만들기
이번에는 검색창을 만들어 보겠습니다. 생각보다 어렵지 않아요.
우선 아래와 같이 HTML 코드에 입력창을 추가하고, 경계선 굴곡을 조금 부드럽게 조정해보겠습니다.
CSS에는 다음과 같이 추가해보세요.
입력창이 예쁘게 다듬어졌습니다. 제법이쥬..? 😎
입력창도 가운데로 정렬시켜야 합니다. 어떻게 해야 할까요?
다행히도 input
태그는 기본 설정이 Inline Block의 성격을 띄도록 되어 있습니다. 즉, Inline 성격도 있고, Block 성격도 있다는 뜻이죠. 그렇기에 아까 했던 것처럼 상위 부모 태그에게 text-align: center를
활용하면 가운데 정렬이 가능할것 같습니다.
input
태그의 부모 요소에게 .input-box
라는 class 이름을 지정해주고, 아래와 같이 CSS를 추가해보세요.
멋있어졌네요.
하지만 저는 평정심을 잃지 않습니다. 왜냐하면, 더욱 험난한 단계가 남았기 때문이죠.
입력창 내부에 돋보기 아이콘을 추가해야 합니다. 😤
돋보기 아이콘은 입력창을 기준으로 좌측에서 일정 거리를 두고 배치되어 있습니다. 그리고 입력창의 위치가 바뀌면 돋보기도 함께 움직여야 합니다. 돋보기는 입력창의 위치에 대하여 의존적이라는 뜻이죠.
이런 경우에 우리는 CSS의 Position 속성을 활용해볼 수 있습니다.
Positioning
우리는 CSS를 이용하여 웹페이지 컨텐츠의 위치(Position)를 우리가 원하는 대로 조정할 수 있습니다. 컨텐츠의 위치를 조정하기 위해서는 다양한 방법들이 있는데, 그 중 가장 기본적인 방법이 바로 Position 속성을 활용하는 것입니다.
기본적으로 모든 요소들은 웹페이지에서 기본으로 position: static;
을 갖습니다. static
이란, HTML 문서의 기본 흐름입니다. 즉, 위에서 아래로, 좌측에서 우측으로 진행되는 방식입니다. 가장 기본적인 방식이죠.
하지만 우리가 원한다면 다른 값으로 변경할 수 있고, 가장 흔하게 많이 사용되는 것이 바로 position: relative;
그리고 position: absolute;
입니다.
a. Relative Position
position: relative;
가 적용된 요소들의 경우, 별도의 추가적인 CSS 속성을 적용하지 않는 이상 별다른 특이점이 없습니다.
하지만, top
, right
, bottom
, left
등의 값을 활용하여 상하좌우의 위치를 세밀하게 조정할 수 있습니다.
b. Absolute Position
position: absolute;
가 적용된 요소들의 경우는 조금 다릅니다.
position: absolute;
가 적용되게 되면 기존의 위치는 유지되지 않고, 가장 가까운 부모 요소 중 position: relative;
가 적용된 요소를 찾아 그 요소를 기준으로 위치가 잡히게 됩니다.
만약 부모 요소 중 position: relative;
를 가진 요소가 없는 경우, 전체 페이지를 기준으로 위치가 잡히게 됩니다.
현재 우리의 돋보기는 입력창을 기준으로 하여 좌측에서 일정 거리 떨어져 있어야 합니다.
입력창 태그는 닫는 태그가 없기 때문에 태그 내부에 돋보기를 컨텐츠로 삽입할 수는 없습니다.
그리고 아래 이미지에서 보듯, 현재 우리의 .input-box
는 좌우로 너무 크기 때문에 정확히 입력창과 비례하여 사이즈가 조절되지는 않아서 활용하기 어렵습니다.
다음과 같이 입력창과 돋보기 아이콘을 감싼 요소를 하나 만들어주겠습니다. 그리고 그 요소에게 position 속성을 relative
로 설정해주어 돋보기 아이콘 이미지 요소의 기준점으로 삼겠습니다.
대략적인 위치를 맞추기 위해 픽셀 값은 조금 조정하셔야 할 수 있습니다.
이제 어느 덧 조금 더 돋보기 아이콘의 윤곽이 잡혔습니다.
추가적으로 이와 유사하게 검색창 오른쪽에도 여러분이 원하는 아이콘을 배치할 수 있습니다.
아이콘은 Flaticon 등의 서비스에서 무료 아이콘을 찾을 수 있으며, 구글에서 Free icons 라고 검색하시면 많은 웹사이트가 있으니 이용해보세요. 💁🏻♂️
Last updated