🎆 오늘 한 것
- 수업 들은 거 정리하고 복습
- 이듬 그룹핑 요소, 임베디드 요소, 테이블 요소 보기
- deep dive 빌트인 객체~this 읽기
🙄 오늘 하려고 했는데 못한 것
- 리덕스 강의 보기
- 알고리즘 강의 보기
- 타입스크립트 책 읽기
✨ 숨김 텍스트
🎇 Black Hat
검색 엔진은 text/html만을 수집하는 것이 아닌, Google 알고리즘의 경우 CSS도 검색함. 이걸 활용해 검색 엔진 결과 페이지의 순위를 높이기 위해 올바르지 않은 방법을 사용한 사례도 있음. 이것 때문에 구글은 검색엔진 최적화(SEO) 기본 가이드에서 숨김 텍스트를 사용하지 말라고 함. 잘못하면 검색 엔진이 접근성을 위해 안드로메다로 보내놓은 어쩌고를 스팸이라고 인식해릴 수도 있다고 함...
이것 때문에 보이지 말아야할 어쩌고를 안드로메다로 보내놓고 해결하는 방식은 옳지 못하다는 결론(text-indent 같은 게 여기 해당... 나도 가끔 썼음)
그렇다고 opasity, display:none, zero pixel sizing 같은 것들을 사용하면 이제 스크린리더가 읽지 못함. 이럴 거면 html 작성한 것부터가 의미 없어짐ㅎㅎ;
그럼... 어떻게 하란 말임?
🎇 clip 사용하기
.hidden {
overflow: hidden;
position: absolute;
border: 0;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
}앱솔루트로 띄우고 안 보이게 클리핑 해놓는 방식. 그으으은데 이것도 문제가 있다.
이 방식은 absolute를 사용했기 때문에 숨겨야할 텍스트를 BFC(block formatting context)로 변경시켜버림. 한 문단에서 전달되어야 되는 정보를 BFC로 변경 시키면 분리가 일어남. 즉, 한 번 뚝. 끊어서 읽게 된다는 말임.
그래서 어쩌라는 거임?
🎇 해결방식
.sr-only,
legend {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0); /* 구형 브라우저 때문 */
clip-path: inset(50%);
}참고로 클래스 이름은 sr-only, offscreen, readable-hidden 등등 다양하게 사용된다.
clip-path : 원하는 모양대로 마스킹하는 기능
clip-path 연습 사이트
아이구 어렵다...
✨ i18n? L10n?
🎇 i18n?
국제화(internationalization)를 I18N이나 i18n로,
영어 철자에서 첫 글자와 마지막 글자만 뺀 나머지 글자들을 그 숫자로 표기한 것임
front에서 어떤 상황에 쓰이나 조금 서치해봤는데 다국어를 지원하는 사이트 같은 게 해당 되나 보다.
📌 그리고 발견한 사이트 두개
도큐사우루스
TOAST UI의 국제화(i18n) 자동화 가이드
뭔가... 굉장히 유용해보이는데 아직 내 수준에서는 무슨 말인지 잘 이해가 안된다. 일단 북마크 콕콕ㅎㅎ;
🎇 L10n?
지역화(localization)를 L10N이나 l10n로 표기한 것
특정 국가의 문화, 기타 요구 사항 등을 충족시키는, 말 그대로 로컬라이징 작업
예시로 화폐, 날짜 표현 방식, 기온 단위, 이름 작성방식, 주소 형식 등등이 있음.
국제화를 고려한 사이트라면 L10n -> i18n 식으로 확장하는 것보다, 기초 개발 단계에서부터 국제화를 고려한 작업을 하는 게 훨씬 효율적이라고 한다.
✨ address, pre
🎇 address
가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냄
예시 : 푸터의 기업 정보
🎇 pre
HTML에 작성한 내용 그대로 표현. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지함.
요런 요상한 모양으로 표현도 가넝
console.log('hello world!');
(위의 코드 블록?의 코드)
늘 쓰던 백틱으로 감싼 코드 블럭?은 code 태그를 감싼 pre 태그로 만들어져있는 것임
✨ 임베디드(Embedded) 요소
🎇 picture
미디어 속성 (구형 브라우저일 때는 img가 화면에 보임, source가 우선순위가 더 높다는 말)
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>타입 속성
<picture>
<source srcset="bamboo-pen.svg" type="image/svg+xml">
<img src="bamboo-pen-narrow.png" alt="Bamboo Pen">
</picture>두 개 이상의 이미지를 포함하는 컨테이너 요소
화면의 크기에 따라 보여지는 이미지의 크기와 종류가 달라질 때 사용하면 좋음. sns에서 작은 이미지와 큰 이미지 직접 설정해서 다운받을 수 있는 게 이거 덕분인가보당
🎇 track
비디오/오디오 재생 시, 자막을 표시
<video src="videofile.mp4" poster="posterimage.jpg">
<track kind="subtitles" src="videofile.ko.vtt" srclang="ko" label="한국어" default>
<track kind="subtitles" src="videofile.en.vtt" srclang="en" label="English">
</video>
<audio src="audiofile.mp3">
<track kind="subtitles" src="audiofile.ko.vtt" srclang="ko" label="한국어">
<track kind="subtitles" src="audiofile.en.vtt" srclang="en" label="English">
</audio>default 속성을 설정하지 않을 경우, 자막 사용 안함으로 설정됨
🎆 내일 할 것
- 수업 들은 거 정리하고 복습
- 스터디, 스터디 후 피드백 정리
- 리덕스 강의 보기
- 알고리즘 강의 보기
- 타입스크립트 책 읽기
📌 킵해놓을 todo
- preload / modulepreload / prefetch 공부... 언제하지?
📚 이번 주 개인 목표
- 넷플 페이지 근본적인 문제 드디어 찾음... 내일부터 수정 시작해서 토요일 전까지 최대한 작업
- 일요일까지 과제 1, 2 테일윈드로 완성. 완성 후 궁금한 점 질문
📝 오늘의 일기
목이 부러질 것 같다... 허리를 펴는 습관을 좀 들여야겠음....🐢🐢🐢
아...테일윈드 이거 아닌 것 같다 싶었는데 진짜 아닌 거 맞았음...ㅎㅎ...싹 다 뜯어고치자꾸나
📌 보면 좋을 링크
The Tracks of mulder21c : 웹접근성 관련
css 방법론 BEM
MDN : WAI-ARIA 속성 종류(영어)
📌 추천해주신 css 관련 책
다양한 예제로 배우는 CSS 설계 실전 가이드
