google clone

mynoseis3·2024년 3월 6일

CSS html

practice

목록 보기

26/32

조코딩샘 영상 보면서 구글 클론 연습 !
https://youtu.be/tIC9MfxGOow

난 구글 말고 내 이름 이니셜에서 착안한 수글 ...! ^^

html 마크업

색상 다 다르게 입히기 위해 span태그로 변경

css 입히기

검색 기능 적용

input과 전송버튼을 form 태그 안에 들여 놓기 !
입력창에 검색어 입력 후 버튼 누르면 구글 검색이 잘 된다 ! 주소창 확인해보면
q 파라미터에 입력한 값이 들어가는 걸 확인할 수 있다.

추가 작업

나대로 좀 더 추가해볼 수 있는 걸 찾자 !

구글 사이트에는 상단에 이런 구성되어 있다.

나도 상단에 들어갈 6 아이템을 추가
지금 아무런 스타일을 입히지 않아서 상단 왼쪽에 옹기종기 붙어 있다.

display:flex; 를 입히면 가로로 배치되고 헤더나 div는 블록 요소인 것을 확인 할 수 있다.

justify-content: space-between; 속성으로 양쪽으로 배치하기

마진이랑 적절히 위치를 조정함

++ 구글을 보면 검색창 안에 아이콘들이 있음 / 인풋창에 그림자가 쪼오금 들어가 있다.

돋보기, 마이크, 키보드 아이콘 추가 하면 화면 왼쪽에 붙어져 나온다.
이걸 인풋 창 안에 왼쪽, 오른쪽에 배치해야 함 !

그러기 위해 인풋창과 아이콘들을 div에 묶음

.search-container {
  position: relative;
  display: inline-block;
}

.search-container input {
  width: 100%;
  padding-left: 50px;
}

.search-container i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
}

.search-container .fa-magnifying-glass {
  left: 10px;
}

.search-container .bxs-microphone {
  right: 50px;
}

.search-container .bxs-keyboard {
  right: 10px;
}

입력창 커서를 돋보기 아이콘 오른쪽에 배치하기 위해 아이콘 들어갈 거
고려해서 왼쪽 패딩을 주고 마이크, 키보드 아이콘을 오른쪽에 배치

그림자랑 패딩 등을 주어 좀 더 둥글게 만들었다.

inline-block 속성을 사용하면 div는 기존에 블록요소인데 인라인 요소처럼 배치하면서 조절할 수 있게 됨 !!

근데 이렇게 설정한 후부터 인풋창이 화면 왼쪽에 붙어 있게 됐다.

이걸 중앙으로 배치하려고 수정하면 아이콘이 전부 벗어나게 된다.

여기서 막혀서 고민하다가 div로 한 번 더 묶고
묶은 div에 스타일 적용하면 화면 가운데로 배치하는 것 까진 성공한다 !

여기서 딱 하나 남은 문제가

.search-container input {
  width: 100%;

input width가 100%인데 굉장히 작게 나타나고 있다.

브라우저 도구에서 테스트해보면
인풋을 감싼 컨테이너에 width를 주어보니 인풋창이 길어진다 !

대신 아이콘이 삐져나오게 되는데 right 값을 수정하면

인풋창과 아이콘을 내가 원한 만큼 조절할 수 있다.

조절하면 새로운 문제는 인풋창이 가운데 정렬이 안 된다요
인풋창이 지금보다 좀 더 오른쪽으로 가야 하는데 margin : 0 auto 를 주어도 변화가 없었다.

인풋 창 부모 요소인 .search-container 에 text-align: center; 를 주고
삐져나온 아이콘들을 다시 수정하면 중앙에 배치할 수 있었다.

그럼 또 다른 문제가 발견된다 하하
이 짤이 떠오른다

화면의 크기가 달라질 때마다 아이콘의 위치가 밀리게 된다.
인풋 창 내의 위치가 고정이 되어야 할 것 같다.

아이콘 위치를 픽셀이 아닌 % 단위를 사용하거나 미디어쿼리를 사용해봤지만
아이콘이 밀리는 건 여전했다.

🔎 해결 방법

아이콘들이 인풋창 안에 밀리지 않고 항상 일정한 위치에 있도록 하려면, 부모 요소에 대해 상대적으로 위치를 설정하고, 인풋창과 아이콘들에 대해서도 상대적인 위치를 지정해야 한다.

.search-container {
  position: relative;
  display: inline-block;
  width: 50%;
  text-align: center;
}

.search-container input {
  width: calc(100% - 100px); /* 아이콘들의 총 너비만큼 감소 */
  padding-left: 50px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  outline: none;
  height: 40px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.search-container i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
}

.search-container .fa-magnifying-glass {
  left: 10px;
}

.search-container .bxs-microphone {
  right: 30px;
}

.search-container .bxs-keyboard {
  right: 1px;
}