반응형
- 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 [html] tbody 여러 번 사용할 수 있다 2단으로 게시물들을 작업할 때 li 태그로 작업하는 방법도 있지만, table 태그로 th와 td로 사용하는 방법도 있습니다. 그러면서 의문도 생겼습니다. tbody를 여러 번을 줘야하는 경우가 생기는데, 과연 tbody를 여러 개 사용해도 웹 표준에 문제가 없을지 궁금했습니다. ...생략 정답은 tbody는 갯수 제한없이 사용이 가능합니다. 반면 thead의 경우는 한 테이블에서 한 번만 사용할 수 있다고 하니, 이 부분도 코딩을 하면서 체크를 해야할 것 같습니다. (사실 이전에는 잘 몰라서.. ul > li 위주로만 사용했었습니다.) ...생략 지금은 이렇게 "tbody가 아~ 3개구나" 하면서 잘보이겠지만, 안에 내용들이 엄청 많아지면 조금은 관리가 어려운 점도 있었습니다. 금일 작업하면서 궁금했던..
- jQuery [jQuery] 이벤트 중복 오류 해결 (이벤트가 두번 실행됩니다!) jQuery를 이용해서 좌측의 메뉴를 클릭할 때마다 SlideToggle 메서드를 이용해서 구현하려고 하였으나, 뭔지 모르게 갑자기 두번씩 SlideToggle이 발생되는 것을 보았습니다. $('셀렉터').on('click', function(){ 이벤트 내용 }); 하지만 여러가지 방법을 찾다가 해결책을 찾게 되었고, 위 현상이 일어나는 것은 바로 이벤트가 중복으로 걸리는 경우라고 확인 되었습니다. 조금 코드가 길어지기는 하지만, off 메서드를 혼합하여 사용함으로써 해당 이벤트 중복 오류를 막을 수 있었습니다. $('셀렉터').off('click').on('click', function(){ 이벤트 내용 }); 위의 코드 내용으로 작성하면 이벤트 중복을 막을 수가 있습니다. 하지만, 해당 셀렉터에게만..
- 카테고리 없음 맥Mac용 키보드에서 백틱 입력 방법 자바스크립트 ES6에서 백틱 (` `)을 은근히 많이 사용됩니다. 윈도우 PC에서는 백틱키가 숫자 1번 좌측에 ~키와 같이 배치가 되어 누르면 작성이 가능했지만, 맥(mac) 전용 키보드에서는 백틱을 찾지 못하면서 당황한 적이 있습니다. 매직키보드에서도 숫자 1 좌측옆에 있는 키를 누르면 됩니다. 하지만 한글 상태에서는 누르게 되면 ₩ 표시가 됩니다. 그러면 백틱은 어떻게 사용해야하나? 영문으로 전환된 상태에서 해당 키를 누르면 ` ` 나오게 됩니다. 많이 알고 계시지만, 은근히 미세먼지팁같은 내용입니다.
- CSS [CSS] 배경이미지를 넣어보자! background 추가 속성들! 기존에 img 태그를 통해서 이미지를 삽입하는 방법도 있지만, HTML 요소 뒤에 배경 이미지를 넣는 방법이 있습니다. 바로 CSS의 background-image 속성입니다. 전체 페이지부터 부분적으로 배경이미지를 설정할 수 있습니다. 1. background-image .box1 { background-image: url("이미지 경로") } background-image 속성에 url (" ") 괄호 안에 경로를 넣으면 배경 이미지가 삽입됩니다. 이미지 경로만 넣어둔다면 딱 맞는 사이즈라면 모르겠지만, 사이즈가 다른 이미지라면 바둑판 모양처럼 반복이 됩니다. background-repeat의 repeat는 기본값입니다. 반복이 되지 않으려면 아래의 코드와 같이 기재를 하면 됩니다. 2. backgr..
💲 추천 글
반응형