728x90 반응형 Front-end48 [HTML/CSS] 웹접근성 인증 홈페이지 퍼블리싱 하기 공공기관이나 규모가 큰 사이트는 웹접근성 인증을 받는 경우가 많다. 이번에 처음으로 웹접근성 심사가 필요한 프로젝트(PC 웹)를 하였는데 웹접근성 받는 것이 생각보다 많이 까다롭더라. 다음에 또 웹접근성 인증이 필요한 프로젝트를 진행할 경우 같은 혼란을 반복하지 않기 위해 기록용으로 자료를 남겨두려한다. 웹접근성이란? 웹접근성 인증 홈페이지 참고 웹접근성 심사 항목 웹접근성 작업 Tip 👀 정보통신접근성(웹접근성) 인증이란? 장애인, 고령자 등 정보접근약자가 웹 사이트 이용에 불편이 없도록 「지능정보화기본법」 제47조 및 동법 시행규칙 제5조에 의거 ‘국가표준 한국형 웹 콘텐츠 접근성 지침 2.1’을 준수한 웹사이트에 대해 정보통신접근성(웹접근성) 수준을 인정하고 이를 상징하는 정보통신접근성(웹접근성) .. 2022. 11. 25. [jQuery] 디데이 표시하기 (날짜 카운트다운) - The Final Countdown 예제 전에 포스팅한 적이 있는 오픈소스 글https://selinak.tistory.com/3의 9번 소스이다. 얼마전 디데이를 노출하는 홈페이지 퍼블리싱 작업을 하면서 이 소스를 유용하게 써서 아카이빙을 해보려한다. 🎅🎄 2022년 크리스마스까지 며칠이 남았을까요? HTML 삽입 미리보기할 수 없는 소스 위의 소스는 디데이인 크리스마스까지 남은 날짜와 시간을 표시하다가, 디데이가 지나면 Merry Christmas! 문구를 노출합니다. 원래는 로컬 jquery.countdown.min.js를 활용하지만, 나는 편의상 라이브러리에서 가져왔다. 위의 예제가 어렵다면 The Final Countdown에서 제공하는 기본예제를 살펴보자! HTML 삽입 미리보기할 수 없는 소스 2023년 1월 1일까지 남은 시간은?.. 2022. 11. 3. [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. [React] 리액트로 Three.js 작업하기 기본 (3D 박스 구현) 내가 까먹을까봐 쓰는 Three.js 리액트 작업 순서 VSCODE 실행하고 터미널을 열어 npx create-react-app my-app 리액트 프로젝트를 설치한다. (my-app 부분을 내 프로젝트 이름으로 대체) 나는 대충 문서 폴더에 threejs라는 프로젝트를 생성했다. cd 프로젝트명 명령어를 통해 프로젝트 폴더로 이동해준다. 터미널에 npm start를 입력해 로컬 서버를 켠다. 익숙한 리액트 로고 등장 작업 준비완 이제 리액트로 three를 설치하면 된다. https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js 작업에 필수적인 document. 설치법이 나와있다. 아래의 명령어들로 THREE와 THR.. 2022. 7. 25. [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. 이전 1 2 3 4 5 6 다음 728x90 반응형
