| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- Robo3T 글씨체 변경
- 객체의 밸류값만 찾기
- 깃 토큰 만료
- indexOf()
- Robo3T 폰트 키우기
- sql 문자열 패턴 검색
- 우분투 시간 변경
- @Moditying @Query
- 가상컴퓨터마법사
- 객체의키값만 찾기
- 배열을 객체로
- 프론트엔드 스쿨
- 스프링 데이타 JPA
- 레디스 확인
- js 문자열을 문자배열로
- Robo3T 폰트변경
- 객체를 배열로
- Robo3T 글씨키우기
- sql like연산자
- 시퀄 문법
- 코딩 어?
- 리엑트블로거
- 5.3.8 Modifying Queries
- ...점점점문법
- lastIndexOf()
- 문자열 인터폴레이션
- search()
- ubuntu타임존
- ${변수}
- findIndex()
- Today
- Total
목록2024/08/28 (3)
코딩기록
css) 텍스트가 화면에는 안 보이고 스크린리더만 읽게 하는 방법 / 안 보이고 스크린리더도 읽을 수 없게/ 보이고읽을수없게 + 이미지 텍스트 겹칠때 /웹접근성
웹접근성1-1. 텍스트가 화면에는 안 보이고 스크린리더기만 읽게 하는 방법CSS에 설정 class이름은 "sr-only"로!!display: none;이걸 쓰면 폭망. 화면에도 안 보이고 스크린 리더기도 못 읽는다. 아예 정보가 존재하지 않게 돼서 레이아웃도 틀어진다. 보통 클래스 이름을 '스크린리더기만'이라는 의미의 sr(screen reader)-onlysr-only를 많이 쓴다.[css].sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); white-space: nowrap; /* 줄바꿈 강제 금지 */}..
[html]aria-label="원하는 텍스트적기" [css]가상요소 content 에 아리아 라벨을 쓰면 html에 적은 aria-label의 텍스트를 불러온다.일반적으로 content에 쌍따옴표"" 안에 텍스트를 쓰는 것과 동일한 효과이다.content: attr(aria-label).link:hover .button::before { content: attr(aria-label); /* content: "구매하기" */}
css) a태그border 설정시 border가 짧은 이유? a태그 링크 범위 늘리기-display: block; / a태그 영역넓히기
a태그안에 img를 넣고 a태그에 border를 주는데 아래 그림처럼[html] [css]a {border: 1px; solid blue; a, 앵커태그가 생각보다 짧다 그이유는?[css]a {display: block;border: 1px; solid blue; a태그의 기본 display 속성 때문이다.display: block; 설정후 다시 확인하면 border 가 제대로 보인다.또 이렇게 해야 span태그도 제대로 포함시킬수 있다.