검색창 만들기 (html, css)

 

👆 위 검색창을 만들기까지 정말 오랜 시간이 걸렸다 🥹

그 과정을 기록한 블로그

 

 

 

 

 

html 블록 결정하기

 

 

 

 

1. weelgle 이미지
2. input 창과 3개의 아이콘
3. 2개 button
4. <p>태그

 

이렇게 4개로 크게 블록 설정을 했다.

css를 최대한 간단히 하기 위해 모두 div class로 묶었다.

 

 

 

 

 

 

html

 

 

 

※ 2번 묶음 class things 를 보면 [돋보기-input박스-마이크-키보드] 순으로 넣었는데 이는 flex 값을 주었을 때 css 지정하기 편하게 하기 위함이다. 최대한 위치에 가깝게 넣어주었다. ( 돋보기가 맨 왼쪽에 위치해 있음)

 

body 안에 있는 div 태그들 (4묶음)들에게 한꺼번에 설정을 주기 위해 전체를 감싸는 <div class = "total"> 를 주었다.

굳이 body를 쓰지 않는 이유는 body보다 더욱 자유롭게 css를 쓸 수 있기 때문 😊

 

 

 

 

👆 순수 html 만 설정했을 때 모습

Weegle 이미지 크기가 커서 잘린다 

 

 

 

 

 

 

css

 

 

 

 

 

큰 고난을 주었던 css 💩

 

일단 전체 box-sizing 을 주었다. 

전체 4개의 block을 total로 감싼 후 가운데 정렬을 해주었고 특이한 점은 height을 100vh로 주었는데 이렇게 하니 블록 안에 있는 클래스들 위치가 크게 튀지 않고 디스플레이 크기 상관 없이 중간에 쉽게 배치되어 편했다.

 

이미지를 감싸는 .weggle 클래스에 absolute를 주어 위치를 지정했다. 일단 top, left로 오른쪽 아래에 밀어넣은 다음 transform을 써서 -50% 값을 주었는데 윈도우 창 값이 아닌 오른쪽 아래 위치 값의 50%를 -로 옮겼더니 이미지가 중앙에 가게 되었다. 후에 img 에 따로 css를 주어 이미지 크기를 조정했다.

 

가장 애먹었던 input과 아이콘들! 처음에 시도했을 땐 input을 늘려 (relative를 주고) 아이콘 (absolute를 주고) 하나하나 위치값을 주었는데 뭔가... 불안정한 듯한 느낌을 받았다. 덕지덕지 붙어있는 css 태그들과... 어딘가 불편하게 정렬되어 있는 아이콘들... 🤔

그리고 해답을 찾았는데 바로 .thing (input 과 아이콘들 묶은 div)에게 테두리를 주고 아이콘들과 input을 가로 정렬하는 것이었다.

이렇게하면 검색창 안에 아이콘들 위치 잡기도 편하고 input도 예쁘게 들어간다. 이 작업은 flex:1, flex:7을 주어서 깔끔하게 해결했다. 

 

그리고 버튼과 sentence는 수월하게 해결했는데 기본 button의 디폴트 값을 지우고 센터로 옮긴 후 margin 설정을 해주었다.

 

 

 

완성!

 

 

 

마치며

 

css 의 absolute와 relative에 꽂혀서 쉽게 만들 수 있는 방법을 생각 못했던 거 같아 많이 아쉽다. 태그에 꽂혀 하나만 파기보단 쉽고 빠르게 만들 수 있는 방법을 찾는 자세가 필요하다 느꼈다. 또 오타 때문에 2시간을 허비했는데😂 오타 검수도 잘 봐야할 듯 하다.