반응형 웹 너비 값 지정하는 법
브라우저의 크기에 따라 검색창의 사이즈가 조절되도록 너비 값을 주는 방법!
반응형 웹디자인을 할 때는 너비 값을 %로 주는 것이 좋습니다.
개발자도구(F12)에서 상단 맨 왼쪽 두번째 모니터 모양을 눌러주시면
브라우저 사이즈에 따라 요소의 사이즈를 확인할 수 있습니다.
검색창의 크기를 calc() 함수를 써서 전체 100%에서 가로 요소들의 너비를 빼주시면 됩니다!
(참고로, 여기서 엑스 버튼과의 간격 10px은 따로 넣은 것이 아닌 가로배열 flex의 justifycontent 속성입니다.)
calc() 함수
CSS에서 산술 연산을 할 수 있는 속성으로
더하기, 빼기, 곱하기, 나누기를 사용해서 값을 넣을 수 있습니다.