반응형
-
HTML
[웹 접근성] aria-expanded, 토글-아코디언 메뉴 속성값!
최근에 프로젝트를 하면서 웹 접근성을 하나씩 뜯어보면서 궁금한 부분이 있어서 정리를 하는 느낌으로 블로그에 포스팅을 하고 있습니다. 토글 및 아코디언 메뉴에서 접근성 코드가 들어가게 됩니다. 과금미사용된 아이템을 환불 받을 수 있나요? (CSS는 따로 잡지 않았습니다.) 현재 토글 메뉴에서 aria-expanded="false" 로 최초로 닫혀있는 상태입니다. 과금미사용된 아이템을 환불 받을 수 있나요? 답변 사이트 운영자 답변 구매한 후에 24시간 이내에 환불 요청을 하신다면 가능합니다. 과금 부분을 클릭하게 되면 태그에 있던 aria-expanded="true"로 속성값을 변화시킵니다. view 클래스를 가지고 있던 div 태그를 display: block 값을 줍니다. 다른 방법으로도 접근성을 하는..
- HTML a 태그 특정 위치로 이동하기 이제 a태그를 통해서 페이지를 이동하게 되면, 최상단으로 가게 되는데 해당 문서에서 특정 위치나, 다른 페이지에서 특정 위치로 가는 방법이 있습니다. 물론, JS 등을 사용해서 이동하는 방법도 있겠지만, a태그를 통해서 간단하게 이동이 가능합니다. 1. 같은 페이지에서 특정 위치 이동 박스 영역으로 이동 여기는 박스 영역 위의 a태그에서 href에 #ID 영역만 작성하게 되면, 바로 이동이 가능합니다. 2. 다른 페이지에서 특정 위치로 이동 이동 위의 a태그에서는 특정 위치로 이동하려는 사이트 + 그 섹션이 있는 ID값을 같이 기재해주면 a태그에서 이동하려는 URL과 해당 섹션으로 자동으로 포커스가 이동이 됩니다. a태그 특정위치로 이동 이동된 사이트는 제가 플레이하는 일루전커넥트 홈페이지인데, 위의 내..
-
HTML
로티 플레이어(lottie Player)를 통해 애니메이션을 추가해보자!
Lottie는 JSON 기반의 애니메이션 파일을 웹이나 모바일에 쉽게 통합할 수 있는 라이브러리입니다. 이 중 LottiePlayer는 웹에서 Lottie 애니메이션을 간편하게 재생할 수 있는 웹 컴포넌트입니다. 이번 포스팅에서는 CDN 방식으로 LottiePlayer를 사용하는 방법을 소개하겠습니다. 1. LottiePlayer란?LottiePlayer는 Lottie 애니메이션을 HTML 태그만으로 손쉽게 삽입하고 제어할 수 있게 해주는 도구입니다. LottiePlayer는 다양한 속성으로 애니메이션의 반복 재생, 자동 재생 등의 설정을 손쉽게 할 수 있습니다. 2. CDN으로 LottiePlayer 사용하기LottiePlayer를 사용하려면 CDN을 통해 라이브러리를 불러오고, HTML에 태그를 추가..
-
HTML
[html] tbody 여러 번 사용할 수 있다
2단으로 게시물들을 작업할 때 li 태그로 작업하는 방법도 있지만, table 태그로 th와 td로 사용하는 방법도 있습니다. 그러면서 의문도 생겼습니다. tbody를 여러 번을 줘야하는 경우가 생기는데, 과연 tbody를 여러 개 사용해도 웹 표준에 문제가 없을지 궁금했습니다. ...생략 정답은 tbody는 갯수 제한없이 사용이 가능합니다. 반면 thead의 경우는 한 테이블에서 한 번만 사용할 수 있다고 하니, 이 부분도 코딩을 하면서 체크를 해야할 것 같습니다. (사실 이전에는 잘 몰라서.. ul > li 위주로만 사용했었습니다.) ...생략 지금은 이렇게 "tbody가 아~ 3개구나" 하면서 잘보이겠지만, 안에 내용들이 엄청 많아지면 조금은 관리가 어려운 점도 있었습니다. 금일 작업하면서 궁금했던..
-
카테고리 없음
맥Mac용 키보드에서 백틱 입력 방법
자바스크립트 ES6에서 백틱 (` `)을 은근히 많이 사용됩니다. 윈도우 PC에서는 백틱키가 숫자 1번 좌측에 ~키와 같이 배치가 되어 누르면 작성이 가능했지만, 맥(mac) 전용 키보드에서는 백틱을 찾지 못하면서 당황한 적이 있습니다. 매직키보드에서도 숫자 1 좌측옆에 있는 키를 누르면 됩니다. 하지만 한글 상태에서는 누르게 되면 ₩ 표시가 됩니다. 그러면 백틱은 어떻게 사용해야하나? 영문으로 전환된 상태에서 해당 키를 누르면 ` ` 나오게 됩니다. 많이 알고 계시지만, 은근히 미세먼지팁같은 내용입니다.
-
jQuery
jQuery Zoomer를 이용하여 이미지를 확대 축소 해보자
이번에 필요했던 기능은 header와 bottom을 고정한 상태에서 이미지 영역만 확대를 시킬 수 있는 기능이 필요 했습니다. 은행이나 카드 상품 정보에서 약관을 PDF나 이미지 정보로 보여주는 기능을 볼 수 있는데, 이 기능이 필요해서 작성을 하게 되었습니다. HTML부터 CSS와 그리고 jQuery 플러그인인 Zoomer 플러그인을 사용해서 이미지를 확대하고 스크롤 할 수 있는 기능까지 추가로 알아봅시다.0. 준비하기 (CDN)jQuery 플러그인 Zoomer를 사용하기 위해서는 기본적으로 jQuery가 필요하고, zoomer.js가 필요합니다. 파일이 있으시면 추가하시면 되지만, 저는 CDN 기준으로 작성 하였습니다. zoomer.css 역시 추가 해주시면 됩니다. 해당 CSS는 확인해보니 라인 수..
💲 추천 글
반응형
