input과 button을 딱 붙여 인풋 그룹을 만들 때 유용한 inline-flex

아래와 같은 모양의 검색창을 만들어야 할 때 inline-flex는 매우 유용합니다.

위 이미지는 컨테이너에 display: inline-flex 속성값을 부여한 결과인데요. 플렉스 박스의 특성에 의해 좌측 input의 높이와 우측 button의 높이가 동일해졌습니다. 이런 인풋 그룹을 구현할 때 가장 까다로운 부분이 손쉽게 해결된 것입니다.

그리고 플렉스 박스의 특성에 의해 inputbutton 사이의 간격이 없이 딱 붙었습니다. 이것도 만세입니다. 간격을 없앨 때 쓰는 여러 기법을 굳이 쓸 필요가 없어졌습니다.

디자인까지 포함한 구체적인 코드는 아래와 같습니다.

<form class="search-box">
    <input type="search" class="search-box__input" 
           placeholder="검색어를 입력하세요">
    <button class="search-box__button">검색</button>
</form>
.search-box {
  display: inline-flex;
  height: 1.5em; 
  border: 3px solid #1864ab;
}

.search-box:focus-within {
  box-shadow: 0 0 3px gold;
}

.search-box__input {
  border: none;
  outline: none;
  background-color: #fff;
  transition: background-color 300ms;
}

.search-box__button {
  background-color: #1864ab;
  color: white;
  font-weight: bold;
  border: none;
  border-left: 3px solid #1864ab;
  -webkit-appearance: none;
}

inline-flex의 장점 또 하나: 레이아웃

inline-flex는 그냥 flex와 달리 인라인 요소처럼 움직이기 때문에 헤더에서 좌우로 정렬하기에 편합니다.

아래 코드펜은 좌측에 로고가 있고 우측에 검색창이 있는 전형적인 헤더를 보여 줍니다. 꽤 심플한 HTML 코드로 이를 구현했습니다.

외곽선 스타일의 디자인 충돌 문제 해결

검색창에 외곽선이 있는 디자인은 브라우저가 포커스를 표시해 주는 스타일과 충돌하기 때문에 따로 신경을 써 줘야 합니다. 아래 이미지를 한 번 보세요.

브라우저는 포커스를 표시해 주는데, 이게 외곽선이라 디자인이 충돌합니다(위가 파폭, 아래가 크롬).

그래서 우선 inputoutlinenone으로 줘 브라우저의 기본 포커스 디자인이 작동하지 않게 만들었습니다.

그리고 컨테이너에 :focus-within 가상선택자를 이용해 은은한 그림자가 지게 처리했습니다(아웃라인을 없애는 데서 그치면 곤란합니다. 이렇게 별도의 조처를 해 줘야 합니다).

정리

inline-flex를 이용하면 두 요소의 높이를 동일하게 맞추면서 간격이 하나도 없게 만들 수 있습니다.

inline-flex는 인라인 요소처럼 움직이므로 레이아웃 내의 요소에 플렉스 박스의 속성을 부여하고 싶을 때 유용하게 사용할 수 있습니다.

외곽선이 있는 검색창 디자인은 브라우저의 포커스 스타일과 충돌하므로 별도의 조처를 해 줘야 합니다.

카테고리 글 목록 👉

대표글

댓글 남기기