Electronic Jeremy Record

아코디언 메뉴 기능은 우리가 웹상에서 꽤나 자주 볼 수 있는 방법이다. 대개 Q&A나 FAQ 등 에서 많이 쓰는 방법인데 질문과 그 질문에 대한 대답 소제목과 그 소제목의 상세 내용 등을 보여줄 때 공간을 최소화하며, 사용자가 본인이 필요한 정보만 선택해서 볼 수 있게 하는 부분이다. 여태까진 css active modifier 를 이용하거나 javascript 에서 구현을 해왔지만 단순히 HTML만으로 구현할 수 있는 것이 있다. 바로 details 이 Details로 어떻게 구현하는지 보겠다. 열려라 참깨 열렸다 들깨 details의 태그 안에 2가지 요소를 넣을 수 있다. summary 는 Q&A로 보면 Question 에 해당 되는 내용 그리고 아래 Answer로 들어갈 Contents 여기서는 ..

5년전 쯤에 볼륨조절 기능을 만들기 위해 CSS로 개고생한 적이 있다. 이 HTML 태그가 좀 일찍 나왔더라면 굉장히 쉽게 했었을텐데.. 바로 Progress... 거두절미하고 바로 코드와 시연에 들어가겠다. Progress Volumn 70% Volumn : 70% (브라우저에 따라 보이는 디자인 형태가 다름) 이 얼마나 우아하고 아름다운 코드길이와 결과물이던가 물론 브라우저마다 보이는게 달라서 B2C 사이트에서는 활용가능성이 떨어질 수 있지만 관리자페이지 등에서는 손쉽게 구현하고 활용하기 좋은 것 같다. 하지만 여기에 이래저래 기능을 추가하고 싶은 부분이 있어 더 많은 속성으로 비슷한 기능을 제공해주는 HTML 태그가 또 있다. 바로 Meter 이것도 바로 코드와 시연으로 들어가자 Meter Fuel..

Input 의 자동 완성 기능은 이런 걸 말한다. 특정 키워드를 입력하였을 때 해당 키워드가 포함되어 있는 키워드를 제공해주는 것을 말한다. 예전 카카오 코딩 테스트 시에도 해당 기능을 구현하라 는 문제가 나온 적이 있다. 많은 Front-End 개발자들은 대부분 Javascript를 통해 onChange event를 통해 키워드를 받고 해당 키워드를 API 등으로 DB에 비교해서 List Tag를 띄워주는 식 이었을 것이다. 나도 그랬다. 그런데 이번에 새로운걸 발견하면서 놀라움을 금치 못했다. 그것이 바로 DataList다 바로 코드로 보겠다 Naver 검색창 select 구문을 사용해본 사람이라면 저 옵션이 무엇을 뜻하는지 알 것이다. 여기서 필요한 것은 검색 입력을 받을 input과 검색 결과를 ..