input

검색창에 입력해야 할 영역입니다. 여기에 검색 키워드를 작성하는 곳입니다.

button

button에 span class인 blind를 넣어줍니다.
버튼이 있다는 걸 알아야 시각 장애인들도 사용이 가능합니다.

form

input과 button이 있으면 이제 form으로 묶어줘야 합니다.
form을 묶어준 다음에 enter를 치면 input으로 바로 이동이 됩니다.

label

label은 input과 함께 달리는 태그입니다. input을 클릭하면 label이 포커스를 잡아주는 포커스 태그입니다.
label for와 input id의 명칭을 동일하게 하면 screen reader 기기가 이 input이 어디에 쓰이는 input인지 알려줍니다. (아이디 넣는 곳인지, 비밀번호 넣는 곳인지 알 수 없으니 작성해야 합니다.)

이렇게 작성하고 적용을 했으니 이제 꾸며줘야 합니다.

outline

검색창의 검은 부분을 지워주는 역할입니다.

적용 전

적용 후

box-sizing:border-box

border-box는 border의 px을 width로 포함해버리는 css입니다.
width값을 간편하게 해주는 역할입니다.

초기에 값을 넣고 진행하는 방법도 있습니다.

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }

그러면 border에 덧셈계산이 편해집니다.

display:inline-flex

button에 width와 height값을 주면 위아래로 분리가 됩니다. button도 block이기 때문에 그러는 건데요.
이럴 경우에는 display:inline-flex를 사용하면 검색창을 한줄로 이을 수 있습니다.

form에다가 inline-flex를 하면

이런 모양을 보실 수 있습니다.