어제 오늘 한 일
- 여전히 새로운 마음으로 html 마크업 연습 중
- 강의 중 html 기초, html 훈련 챕터 수강 완료
공부한 내용
강의를 토대로 작성한 내용
img 태그 활용
alt
- 텍스트 자체와 alt를 동시에 적어야 할 때는 텍스트를 생략하고 alt값으로 대체할 수 있다.
<h1>
<a href="https://edu.goorm.io">
<img src="https://statics.goorm.io/logo/edu/goorm_edu.svg" alt="Goorm Edu"/>
</a>
</h1>- 이미지를 설명하기 어렵거나 큰 의미가 없는 이미지일 경우 alt값을 비워둔다.
<div class="feature-box no-image">
<img src="https://본문과-관련-없는-이미지-경로"
alt=""/>
</div>- 수많은 검색 엔진은 그림에 대한 정보를 alt 속성을 읽어서 얻는다.
- 시각장애인 등을 위해 문서의 내용을 목소리로 변환해 주는 음성 합성 기술을 이용한 스크린 리더(또는 Text-to-speech) 소프트웨어에서 사용된다.
이미지 태그를 사용하지 않고 싶을 때
이미지가 정보로써 가치가 없다고 느껴지면 css로 별도의 처리를 해준다.
.feature-box.no-image {
padding-top: 200px;
background-image: url("https://본문과-관련-없는-이미지-경로");
background-repeat: no-repeat;
background-position: center 20px;
background-size: auto 150px;
}WAI-ARIA
시각장애인 등 스크린 리더기를 사용하는 사람들에게 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말한다.
<a href="#" aria-label="Go to previous page">Previous</a>
<dt>
Coke Light - 0.3<span aria-label="litter">L</span>
</dt>
aria-label눈에 보이는 것과 다르게 읽혔으면 하는 정보aria-hidden="true"aria 마크업을 해도 의미가 없는 상태(내용 생략)
읽어 볼 자료
- 레진 기술 블로그의 '레진 WAI-ARIA 가이드라인 소개'
https://tech.lezhin.com/2018/04/20/wai-aria
- 네이버 NULI에서 제공하는 WAI-ARIA 바르게 사용하기 시리즈 (현재 1부에서 10부까지 있음)
https://nuli.navercorp.com/community/article/1132879
해야 할 것
- 강의 계속 듣기 / 내용 복습하기
- 영타 속도 200 이상으로 올리기
- Git에 대해 공부하기
영타 속도 더럽게 안오른다 굼벵이 탈출하고싶어...
근 며칠 신경을 못쓰니까 TIL가 방학숙제 일기 밀리듯이 밀려버렸다. 어휴
wai-aria 기능은 처음 알게 되어서 새로웠다. 생활코딩이나 내가 가지고 있는 html 기본서에도 없는 내용이었는데 강의에서 짚어줘서 정말 좋았다. 이렇게 다양한 사용자를 위해 웹 접근성을 높이는게 프론트엔드 개발자의 중요한 덕목이며 또 의미 있는 html 마크업이 얼마나 중요한지 알게 되었다. 한 발짝 성장한 기분...
