01.Computer/HTML 2

{ Html만으로 가능한 기능 } 자동완성

Html만으로도 자동완성 기능을 구현할 수 있습니다. 자동완성?? 어떻게 해야되지?? 막상 코딩을 하려고 해보면 검색하지 않고서는 쉽게 구현할 수 없었죠. Js로 Auto Complete를 구현하려면 유저가 입력값을 입력하면 검색어를 필터하고 필터링하려면 어떠한 .. 로직이 필요하고..등등.. 뭔가 복잡하죠. https://shplab.tistory.com/entry/jQuery%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-Autocomplete-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%B5%EC%85%98-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0 [jQuery] 제이쿼리 Autocomplete(자동완성) 사용법 및 옵션..

01.Computer/HTML 2022.01.27

{ Html만으로 가능한 기능 } 패턴 숨기기

숨기기, 보이기 기능의 경우 Jquery 를 이용한 방법을 가장 많이 이용했을 것이라 생각이 된다. jQuery('#toggle').click(function () { if($("#id").css("display") == "none"){ jQuery('#id').show(); } else { jQuery('#id').hide(); } }); 하지만 HTML만으로도 같은 효과를 낼수 있다. 태그를 열고, 그 안에 summary 태그를 사용하면 된다. summary 영역은 클릭 가능한 영역이고, 유저가 클릭하기전에 볼 수 있는 영역이기도 하다. summary 이후 라인은 유저가 클릭한 후에만 표시가 된다. 세상에서 가장 큰 동물은? 코끼리 detail 태그에는 'open'이라는 css selector가 있어..

01.Computer/HTML 2022.01.26