css3 [HTML] datalist 태그로만 autocomplete 구현하기 datalist 태그로만 autocomplete 구현하기 지금까지 autocomplete(자동완성)를 구현하기 위해서는 Javascript을 이용하여 직접 구현하거나 jQuery를 이용하여 autocomplete를 구현하여 사용하고 있었다. 그러나 HTML5에서 datalist라는 태그를 통해서 autocomplete(자동완성)를 쉽게 구현할 수가 있다. 그럼 어떻게 사용하여 구현하면 되는지 알아보도록 하자. 1. datalist 태그 일단 datalist 태그는 input 태그와 option 태그와 함께 사용된다. datalist 태그는 다른 컨트롤에 대해 미리 정의된 option 태그를 나타내는 집합을 나타낸다. 일단 datalist 태그에 대한 정보는 아래 링크를 통해서 확인할 수 있다. https.. 2022. 3. 13. [Tistory] 티스토리 New 아이콘 변경하기 티스토리 New 아이콘 변경하기 티스토리(Tistory)를 꾸미면서 글을 새롭게 작성하면 카테고리 옆에 나오는 회색 New 아이콘이 꾸미고 있는 색상과는 너무 달라서 이걸 한번 변경해보고자 한다. 일단은 새롭게 사용할 아이콘부터 만들어 보았다. 1. 아이콘 만들기 먼저 아이콘을 만들기 위해서 무료 웹 이미지 에디터 사이트인 Pixlr(픽슬러)를 이용하여 제작하였다. https://pixlr.com/ 먼저 사이트 접속 후 "Pixlr E"를 선택하여 들어가자, 이제 "신규 생성" 선택 후 맨 오른쪽에 가로, 세로 사이즈를 선택하고 "생성" 하자. 생성한 파일에 대해서는 다시 누군가 사용할 수도 있을 수 있어 Pixlr에서 사용 가능한 파일과 png 파일 모두 남겨 놓도록 하겠다. 2. 아이콘 이미지 업로드.. 2022. 2. 5. [Tistory] 티스토리 Book Club Pagination 수정하기 티스토리 Book Club Pagination 수정하기 티스토리(Tistory) Book Club 스킨을 사용하는 도중, 글의 개수가 많이 지면서 Pagination이 나오는 부분에서 기존과 다르게 한 줄이 아닌 두줄로 변경된 것을 확인할 수 있다. 아래처럼 두줄로 확인된 Pagination을 기존과 같이 한 줄로 나오도록 수정해보도록 하자. 1. HTML 편집 화면으로 이동 우선 티스토리 관리자 화면으로 들어가서 "꾸미기 > 스킨 편집"을 선택하자. 그 후 "html 편집" 선택 후 "CSS" 항목으로 이동하자. 2. 기존 설정 찾기 "CSS" 편진 화면으로 들어가서 ".pagination a"을 검색 하자. 검색을 해보면 대략 1258줄에 아래와 같이 내용을 확인할 수 있다. 줄 번호는 CSS 설정에.. 2022. 1. 31. 이전 1 다음 300x250 300x250 300x250 300x250
