일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 북 토크
- 지속 가능한 개발
- Winchester
- brand
- 책 후기
- 맨투맨
- typescript
- clean code
- 개발자옷
- HTML
- 프론트앤드
- 티셔츠
- frontend
- Jeremy Winchester
- 티셔츠디자인
- 프론트엔드
- 후드티
- 후드
- 개발자후드
- 개발 책 리뷰
- 브랜드
- react
- 개발자
- 개발자패션
- JavaScript
- jeremy
- 옷
- 생각정리
- 타입스크립트
- 제레미윈체스터
- Today
- Total
목록기술의기록 (14)
Electronic Jeremy Record
아코디언 메뉴 기능은 우리가 웹상에서 꽤나 자주 볼 수 있는 방법이다. 대개 Q&A나 FAQ 등 에서 많이 쓰는 방법인데 질문과 그 질문에 대한 대답 소제목과 그 소제목의 상세 내용 등을 보여줄 때 공간을 최소화하며, 사용자가 본인이 필요한 정보만 선택해서 볼 수 있게 하는 부분이다. 여태까진 css active modifier 를 이용하거나 javascript 에서 구현을 해왔지만 단순히 HTML만으로 구현할 수 있는 것이 있다. 바로 details 이 Details로 어떻게 구현하는지 보겠다. 열려라 참깨 열렸다 들깨 details의 태그 안에 2가지 요소를 넣을 수 있다. summary 는 Q&A로 보면 Question 에 해당 되는 내용 그리고 아래 Answer로 들어갈 Contents 여기서는 ..
이전 글에 Javascript 7개의 반복 함수에 대해 포스팅을 한 적이 있다. https://jeremyrecord.tistory.com/7?category=1046615 [Javascript]배열 내장 반복 함수(Prototype) 7개 정리(forEach,map,filter,some,every,find,findIndex) 코딩을 할 때 반복문은 빠질 수 없는 신텍스다 대부분을 for 문법을 통해 하는게 가장 익숙한 방법이지만 javascript에서 친절(?) 하게 사용할 수 있는 다른 반복문들이 있다. for 조합되는 for in, for of jeremyrecord.tistory.com 이번에도 마찬가지로 Javascript의 반복 함수지만 기존과는 조금 다르다. 일반적으로 반복 함수는 해당 va..
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과 검색 결과를 ..