inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

파이널 코딩테스트 : 프론트엔드

css 관련 질문있습니다.

232

클라우더

작성한 질문수 1

1

안녕하세요! 강의를 듣던중에 궁금한 점이 생겨서 간단히 질문 남깁니다.

3D 캐러셀만드는 영상 중에 html 작성을 하면서 화면에 보여지지 않을 일부 태그들

ex :

<h1 class="util-ir">캐러셀 이미지 리스트</h1>

을 안보여지게 css 속성값을 지정할때 왜 "display : none " 을 사용하지 않고

.util-ir {
  displayblock;
  overflowhidden;
  width1px;
  height1px;
  font-size1px;
  line-height0;
  text-indent-9999px;
}

이런식으로 화면 외부로 빼는건가요?

그리고 굳이 화면에 보여지지 않을 "<h1>캐러셀 이미지 태그</h1>" 등과 같은 태그를 사용하고 지우지않고 살려두는 이유는 코드작성시 가독성을 높이기 위함인지, 아니면 테스트 후에 채점사항이거나 혹은 다른 이유가 있어서 남겨두는 것인지 궁금합니다.

sr-only 코테 준비 같이 해요! util-ir

답변 1

3

MostOneBrush

강사님은 아니지만 몇 가지 답변을 남겨드리면,

1.

웹 접근성은 유저가 어떠한 도구나 장애를 갖더라도 똑같이 사이트를 이용하는데 지장이 없겠금 하는 것에 목적을 두고 있습니다.

display:none 속성을 사용할 경우 청각 장애를 갖고 있는 사용자일 경우 스크린리더라는 보조기기를 사용하는데, display:none으로 숨김 처리를 할 경우 보조기기가 해당 컨텐츠를 읽지 않습니다. ir 기법이라 해서 이미지를 설명할 수 있는 대체텍스트를 제공함으로써 시각적으로는 보여지지 않지만 그들을 위한 보조 텍스트를 제공하기 위해 좀 더 수고롭게 스타일을 넣는거죠.

https://juyeol.tistory.com/25

2.

h1 태그를 굳이 남기고 스타일 처리하는 것은 코드 가독성보다는 스크린리더 사용자가 해당 컨텐츠에 대한 이해를 쉽게 할 수 있도록 하기 위한 목적이 더 큽니다. 부가적으로 검색엔진에 컨텐츠와 맞는 텍스트를 제공할 경우 그만큼의 가중치를 얻을 수 있습니다.

3.

국내에서는 널리가 접근성 관련해서 어떤 부분들이 있는지 안내를 잘해놔서 한 번 사이트 참고해보시는 것도 좋을 것 같네요.

https://nax.naver.com/index

0

Hojun Lee

안녕하세요! 제주코딩베이스캠프입니다!

친절하고 상세한 답변 감사합니다! :)

공유해주신 링크도 너무 좋네요!!

0

클라우더

답변 정말 감사합니다!

뮤직플레이>인트로 컴포넌트 작성강의에 관련해서 궁금한게있어서 문의드립니다!

0

346

1

cart 페이지 피그마 로직관련 질문드립니다!

0

456

1

createRootElement가 static인 이유가 무엇인가요?

0

357

1

11번째 파트 강의 정말 잘보고 있습니다!

0

244

1

좋아요 기능 만드는 강의가 완전하지 않아요!

0

269

1

[카드게임] 타이틀 display부분 질문 있습니다!

2

267

1

[카드게임] 카드게임 타이틀 부분 질문있습니다.

0

232

1

git public레포로 코드와 제공해주신 리소스들 올려도되나요?

0

290

1

items

1

336

2

album 컴포넌트 스크립트까지 다 따라 쳤는데 화면에 아예 안뜨네요..ㅜㅜ

0

268

1

SPA 섹션 강의 완성 예정일이 궁급합니다.

0

299

1

다음 구현 부분은 아직 강의 공개가 안된걸까요 ??

0

183

1

추가문제 강의 업로드

0

218

1

강의자료는 어디서 다운받을 수 있나요

0

263

1

index.js를 빼는 이유

1

283

1

파코테4 - 뮤직플레이 화면이 없어지고 li가 떠야하는데 안뜨네요.. 빨간줄이 뜬 부분은 오타가 아닌데 오타라고 뜨고 렌더쪽 문제 해결하는 법을 모르겠네요

0

313

2

reset.css 는 어디에 설정 하나요?

0

474

2

노션 링크 질문입니다.

0

206

1

이미지 하나가 움직임이 좀 부자연스럽

0

275

1

CSS 업데이트 부탁드립니다.

1

180

1

궁금한점이 있어서 질문드립니다!

1

310

2

난이도 별 3개가 많은데 어떤순서가 좋을까요?

2

188

1

질문입니다.

2

217

1

리액트로 구현

1

268

2