면접 회고

기술 면접에서 나온 질문 중 대답하지 못한 질문들을 정리하면서 새로운 것을 기록하고자 함

1. 보지 못하는 사람이 콘텐츠를 찾기위해서는 어떻게 해야하는지 ?
이 질문에 답을 못했는데 면접관님이 css display에 관한 질문이었다고 하셔서 서치해 본 결과 h1 태그요소를 display:none이나 visivility: hidden으로 하면 음성인식기나 스크린리더기 등에서 읽지 못하여 웹접근성 측면에서 문제가 생긴다고 한다. 이를 해결하기 위해서는 IR방법을 사용해야 한다.
position:absolute;
overflow:hidden;
width:1px;
height:1px;
margin:-1px;
clip:rect(0,0,0,0);
레이아웃에 영향을 주지 않으면서 스크린 리더기가 읽을 수 있게 하는 방법이다

참조 - https://velog.io/@untiring_dev/HTMLCSS-Day32.-IR%EA%B8%B0%EB%B2%95


2. css에서 keyframe이 뭔지
나는 css에서 애니메이션을 많이 사용해보지 않았고 또 사용하더라도 구글링을 하여 그 애니메이션 효과의 css를 복붙해서 사용하여 키프레임이 뭔지 질문을 받았을 때 전혀 생각이 안 나 처음듣는다고 해버렸다 ㅜ 근데 다시 찾아보니 아~~ 했던 것... 너무 아쉽다

keyframes란 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법으로 3가지가 필요함.

• animation-name : 사용자가 직접 지정한 이름, (@keyframes 가 적용될 애니메이션의 이름)

• 스테이지 : from - to 로 0~100% 의 구간 (이 키프레임을 통해 구간별 스타일을 지정할 수 있다.)

• CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일

참조 - https://pro-self-studier.tistory.com/m/108

CSS 애니메이션 구현 - @keyframes 와 animation 속성을 이용하여