본문 바로가기
728x90

Front-end/HTML&CSS37

웹접근성 준수하여 웹접근성 인증 홈페이지 퍼블리싱 하기 공공기관이나 규모가 큰 사이트는 웹접근성 인증을 받는 경우가 많다.이번에 처음으로 웹접근성 심사가 필요한 프로젝트(PC 웹)를 하였는데 웹접근성 받는 것이 생각보다 많이 까다롭더라. 다음에 또 웹접근성 인증이 필요한 프로젝트를 진행할 경우 같은 혼란을 반복하지 않기 위해 기록용으로 자료를 남겨두려한다. 웹접근성이란?웹접근성 인증 홈페이지 참고 웹접근성 심사 항목 웹접근성 작업 Tip 👀 정보통신접근성(웹접근성) 인증이란?장애인, 고령자 등 정보접근약자가 웹 사이트 이용에 불편이 없도록 「지능정보화기본법」 제47조 및 동법 시행규칙 제5조에 의거 ‘국가표준 한국형 웹 콘텐츠 접근성 지침 2.1’을 준수한 웹사이트에 대해 정보통신접근성(웹접근성) 수준을 인정하고 이를 상징하는 정보통신접근성(웹접근성) 품질.. 2022. 11. 25.
[Javascript] 전체화면 켜는 버튼 만들기 How to - fullscreen 출처 https://www.w3schools.com/howto/howto_js_fullscreen.asp HTML 삽입 미리보기할 수 없는 소스 전체화면을 켜기/끄기 버튼 코드이다. :fullscreen {}을 통해 전체화면일때 적용되는 css를 작성할 수도 있음. Fullscreen with JavaScript 전체화면 켜기 전체화면 끄기 Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method. Note에 적힌대로 IE10 이전버전에서는 해당 기능을 지원하지않는다. 2022. 11. 3.
[jQuery] 가로 스크롤 탭 메뉴 만들기 See the Pen Untitled by nah (@wimmwell) on CodePen. 모바일에서 가로 스크롤을 할 수 있다. 2022. 9. 27.
[Javascript] THREE.JS 3D 정육면체에 여러 이미지 적용하기 (textureLoader) 완성본 요새 THREE.JS의 사용법을 익히고 있다. 나는 3D 오브젝트를 소환하고 간단한 환경 수정 정도만 할 수 있는 초보인데 한가지 이미지의 텍스쳐가 아닌 정육면체를 6가지 이미지로 맵핑(+컨트롤 가능)을 하라는 미션이 떨어졌다. 직장인은 안되도 되게 해야한다. three.js의 예제를 뒤져보자 https://threejs.org/examples/#webgl_geometry_cube 그나마 비슷한 샘플을 찾았다. 하지만 한 개의 나무 이미지 텍스쳐만 쓰였다는 것을 육안으로 그리고 코드로 알 수 있다. ..이게 아냐 구글링 갈겨~~~ 출처: https://r105.threejsfundamentals.org/threejs/lessons/threejs-textures.html 발견! three.js 예제.. 2022. 7. 22.
[HTML/CSS] 테이블 thead에 border-radius 들어간 CSS 적용하기 테이블에 border-radius가 들어간 디자인 시안을 받으면 아주 킹받습니다. 테이블에는 CSS 적용에 제한이 있기때문이죠 대충 예를 들면 아래와 같은 디자인은 보기에 아주 쉬워보이지만 THEAD에는 border-radius가 적용되지 않아 좀 번거롭습니다. thead에 border-radius값을 주면 이렇게 아무런 변화가 없습니다. table 태그 자체에 border-radius를 주게 되면 이렇게 말그대로 테이블 전체가 둥글어집니다. thead에만 border-radius 디자인을 적용하려면, 가상요소 속성을 사용하는 방법이 있습니다. See the Pen round thead by nah (@wimmwell) on CodePen. 정리하면 thead에 position:relative; 를 주고.. 2022. 7. 20.
[Javascript] 간단한 데이터 필터링 탭 메뉴 (forEach, dataset) 전체 1번 3번 4번 2번 1번 2번 4번 2번 2번 3번 위의 탭 메뉴 기능은 아래의 HTML과 자바스크립트를 이용하여 구현할 수 있다. 단순히 탭이 아니고 데이터 필터를 이용하여 data-type을 읽어 데이터를 구분하기 때문에 유동적이고 많은 양의 데이터를 분류별로 표시하기에 좋은 코드이다. 아카이브용으로 정말 대충 작성함주의 See the Pen Tab menu by nah (@wimmwell) on CodePen. 내가 만든 것이 아니고 공부 중에 알게 된 코드이다. 나중에 사용하기 위한 아카이빙 2022. 7. 14.
[javascript] 체크박스 클릭으로 selectbox의 disabled 속성 추가/제거하기 input 체크박스를 체크/해제시 selectbox의 disabled 속성이 토글되는 코드이다.체크박스 체크 여부를 확인하는 속성은셀렉터.checked /* 240711 본문 수정*/jQuery -> javascript disabled 속성 제거하기: removeAttribute('disabled');disabled 속성을 disabled로 설정: setAttribute('disabled', 'disabled'); 코드펜 예제 See the Pen Undisable selectbox o checkbox click by sel (@wimmwell) on CodePen.+jQuery에서는disabled 속성 제거하기: removeAttr('disabled');disabled 속성을 disabled로 설정:.. 2022. 4. 25.
무료 datepicker 소스 Air-datepicker 한국어로 바꾸는 방법 MIT라이센스인 날짜 선택 air-datepicker는 간편하게 쓰기 좋은 소스인데 기본 언어가 러시아이고 한국어 로컬 파일을 지원하지않는다. air-datepicker.js 파일의 locale 부분을 수정하면 원하는대로 달력을 커스텀할 수 있다. locale:{days:["일요일","월요일","화요일","수요일","목요일","금요일","토요일"],daysShort:["일","월","화","수","목","금","토"],daysMin:["S","M","T","W","T","F","S"],months:["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],monthsShort:["1","2","3","4","5","6","7","8","9","10.. 2022. 4. 14.
유용한 MIT LICENSE(오픈소스 라이센스) 모음 - 애니메이션 @Github 🚩 MIT라이센스를 사용해도 될까? -오픈소스 라이센스이니 이론적으로는 저작권을 표시하면 상업적으로도 사용이 가능한 걸로 판단된다. 그래도 무작정 쓰지말고 허용 범위를 잘 찾아보고나서 저작권을 지켜 사용하도록 하자. 요약하면 MIT 허가서는 다음과 같은 라이선스이다. 이 소프트웨어를 누구라도 무상으로 제한없이 취급해도 좋다. 단, 저작권 표시 및 이 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 한다. 저자 또는 저작권자는 소프트웨어에 관해서 아무런 책임을 지지 않는다. 출처: https://ko.wikipedia.org/wiki/MIT_%ED%97%88%EA%B0%80%EC%84%9C 💻 유용한 MIT 라이센스 애니메이션 소스 10가지 1. AOS 마우스 스크롤 시 개체가 나타난다... 2022. 4. 1.
728x90

티스토리툴바