# Aria-hidden

4개의 포스트
post-thumbnail

ilva

-사이트명 : ilva -사용언어 : html , css -분류 : 적응형pc, 🔋 Main Point [x] view port [x] 폰트 올라오는 효과 [x] gsap [x] 스크롤실행시 visual이미지 파묻히는효과 [x] 4-1.ease [x] clip-path:inset [x] mouseover (마우스오버) [x] 글자css 1. viewport 메인 비주얼에 나오는 큰 글씨는 vh로 설정하면 화면이 줄어들때마다 일정한 비율로 주시될수 있다 다른 영역에는 픽셀크기가 일정한게 좋기때문에 메인비주얼에 주로 사용한다 http://publishing.kr/vw/ (px -> vh 계산기) => ![](https://velog.velcdn.c

2023년 7월 5일
·
0개의 댓글
·

html, css로 접근성 챙기기

접근성이란? 접근성은 개인의 신체적, 인지적 능력 및 웹에 접근하는 방법과 관계없이 가능한 한 접근할 수 있도록 콘텐츠를 개발하는 것을 의미한다. 즉, 웹페이지를 신체적인 어려움에서도 어떻게든 사용할 수 있게 만들어야한다. 사용하는 방법은? 키보드로 움직인다. 스크린리더의 도움을 받는다. 등의 방법이 있다. 때문에 시멘틱요소를 적절히 사용하여 웹페이지를 만들어야한다. 시멘틱요소를 스크린리더가 구분하기 때문이다. 스크린리더에서는 읽히는데 화면에는 보이지 않게 만드는 방법 예를 들어 할인율을 나타내고자 할 때 할인율은 웹페이지 상에는 표시가 되지 않지만 HTML에는 할인율을 적어줘서 스크린리더에 읽히게 만들어야한다. 위 구조에서 a11y 클래스를 생성하여 css에 값을 입력해준다. 스크린리더에서는 안읽히는데 화면에는 보이게 만드는 방법 이번엔 반대의 방법이다. 불필요한 요소

2023년 3월 30일
·
0개의 댓글
·
post-thumbnail

✏️ 프로젝트 진행 중 새로 배운 것

✅ Role > alt 와 유사한 속성을 가졌습니다. alt 는 우리가 볼 수 있는 상황에 오류로 인해 이미지를 보지 못하였을 때 텍스트로 알려주는 기능이라면 role은 시작 장애인처럼 사진을 볼 수 없는 사람이 인식할 수 있도록 도와주는 역할을 합니다. ✏️ 사용법 |문법|설명| |-|-| |role = "alert"|중요한 내용 및 정보가 있는 곳 또는 정보가 변경된 곳| |role = "article"|웹페이지의 내용이 들어간 곳| |role = "banner"|배너가 있는 곳| |role = "contentinfo"|안내가 있는 부분| |role = "heading"|페이지 머리말 부분| |role = "img"|이미지가 있는 곳| |role = "navigation"|메인,서브 메뉴가 있는 곳| |role = "menuitem"|메뉴 옵션이 있는 곳| |role = "exmple"/"form"|폼 양식이 있는 곳| ✅ Overflow > 요소

2023년 1월 12일
·
0개의 댓글
·
post-thumbnail

[221111] 오늘의 배움(TIL) - React / 웹 접근성

🔸 React > * createRef 메서드로 생성한 ref 객체의 특징은 무엇인가? > > : ref 객체는 current 라는 프로퍼티를 가지며, 변경해도 렌더링이 발생하지 않음 > : 클래스 컴포넌트에서 ref 객체는 실제 DOM 요소에 접근해야 할 때 주로 사용 > : 함수 컴포넌트에서 ref 객체는 값을 변경해도 렌더링을 발생시키지 않는 데이터를 저장할 때 주로 사용 > * forwardRef 메서드는 무엇이고, 왜 사용하는가? > > : createRef 메서드로 생성한 참조 객체(컴포넌트)를 전달하는 역할을 함 > : 하위 컴포넌트에서 상위 컴포넌트의 참조 값을 접근할 수 있지만 상위 컴포넌트에서 하위 컴포넌트의 참조 값을 접근할 수는 없음, 이런 경우에 forwardRef를 사용하여 해결할 수 있음 > * forwardRef 메서드 사용 시 주의할 점은 무엇인가? > > : `defa

2022년 11월 14일
·
0개의 댓글
·