이번 글에서는 사용자가 마우스로 클릭하였을 때에, 검색을 수행할 검색바가 표시되는 반응형 검색바를 이루고 있는 구성요소들에 대하여 다루겠습니다.
위 사진이 반응형 검색바와 그 검색바를 이루고 있는 태그와 속성들의 집합입니다. 설명드리기에 앞서서 div 태그에 대하여 먼저 다루겠습니다. div 태그는 그 어떠한 의미도 없는 그저 그룹핑을 해주는 태그입니다. div와 함께 쓰이는 class라는 속성에서 그룹명을 지정하여 CSS나 javascript 에서 꾸미기를 수행하기 위한 도구입니다.
- 여기서, 이 검색바는 search 라는 그룹으로 그룹핑되어있습니다.
본래, s태그는 <s> 내용 </s>와 같이 쓰이며 글자에 취소선을 , 즉, 글자를 가로지르는 선을 긋는 역할을 하는 태그입니다. 하지만 티스토리에서는 이에 더하여 <s_search>와 같이 사용하였을 때, 검색창을 구현하도록 하는 치환자가 적용되어 있기에 1번 박스와 같은 형태로 이 태그 내부에 들어있는 내용이 검색바로서 작동하게 되는 것입니다.
위 사진의 2번 박스는 '검색;이라는 행위를 할 수 있게 해주는 태그들입니다.
- <input type = " text " > 는 검색바에 텍스트를 입력할 수 있도록 해주는 역할을 합니다.
- <buttontype="submit">은 우리가 검색바에 입력한 내용이 티스토리 서버로 전송되도록 하는 역할을 합니다.
- onclick 속성은 검색바를 클릭하였을 때만 검색이라는 행위가 수행되도록 합니다.
- "" 은 onclick 속서으이 세부 설정입니다.
이 3번 박스부분은 검색바에 사용자가 입력한 검색어가 서버로 전달될 때에 어떠한 형태로 전달되는지에 대한 내용입니다. name 은 우리의 검색어가 서버로 넘어갈 때에 파일 명이라보시면됩니다. value 는 그 name 파일 안에 들어있는 실질적인 값입니다.
- placeholder는 input text type에서 사용되는 속성으로 안내문구를 지정하는 역할을 수행하는 속성입니다.
4번 박스는 onkeypress 속성의 설정값입니다. onkeypress는 검색바의 역동적인 동작을 도와줍니다. 만약 우리가 어떠한 검색할 때에 키보드를 누르고 있지만, 검색바 내부에는 어떠한 내용도 입력되지 않는다면 검색바의 수행능력을 의심할 것입니다. 이러한 상황이 발생하지 않도록 키를 누를 때마다 검색바의 검색자가 입력한 키들이 역동적으로 입력되게 하는 것입니다.
여기까지 사용자가 마우스로 클릭하였을 때에, 검색을 수행할 검색바가 표시되는 반응형 검색바를 이루고 있는 구성요소들에 대하여 다루었습니다.
댓글