🔸 HTML

• 웹에서의 자막 파일 포맷은 무엇인가?

: video 태그 사용 시 자식 요소인 track의 src 속성에 자막 파일을 삽입할 수 있는데, 확장자는 '.vtt'

• 사용자 정의 속성은 어떻게, 왜 사용하는가?

: data-"원하는 이름"="값"과 같은 방식으로 설정할 수 있음
ex) data-name="drink
: 스크립트를 조작하기 위해 의미 없는 class, Id 사용하지 않아도 됨
: 사용자 정의 속성을 부여한 요소에만 따로 스타일 요소 적용하고 싶을 때 유용함

• video, img 등의 콘텐츠를 마크업할 때 속성으로 width, height 값을 먼저 지정하면 어떤 이점이 있는가?

: 속성에 크기 값을 지정하는 경우 브라우저에서 렌더링 시 HTML이 먼저 크기 값을 제공하기 때문에 CSS에서 스타일링 정보를 읽어오는 시간이 더 빨라지므로 성능 개선 가능

🔸 CSS

• 반응형 디자인 시 가장 중요하게 생각해야 하는 부분은 무엇인가?

: 모바일과 데스크탑에 공통으로 스타일링할 부분과, 각각 스타일링할 부분을 구분하기

• position을 absolute로 적용한 경우 부모 요소를 기준으로 어떻게 세로축 중앙 정렬을 할 수 있는가?

: top 값을 50%로 설정하면 부모 기준 세로 크기의 50% 좌표에서 배치가 시작됨
: 완전하게 중앙 정렬되지 않기 때문에 tranform 속성의 translateY 함수 값으로 요소 본인 높이의 -50% 만큼 이동시켜야 함

• transition속성 적용 시 width, height 값 등의 사이즈를 변화시키는 것보다 transform으로 위치를 변화시키는 경우 어떤 이점이 있는가?

: 크기를 조절하는 경우 모든 요소의 위치와 크기를 다시 계산하는 리플로우가 발생하므로, 그만큼 성능이 저하될 수 있음
: 반면 transform 사용 시 리플로우가 발생하지 않기 때문에 성능 면에서 유리함

• transform 속성의 translate 함수 사용 시 주의할 점은 무엇인가?

: 만약 X 좌표로 이동 후 Y 좌표로 이동하는 효과를 부여할 때, 각각 transform 속성을 설정하면 속성이 재정의되면서 앞의 X 좌표 이동 효과가 사라짐
: 그러므로 이전 효과까지 고려하여 transform: translate(X 값, Y 값)와 같은 방식으로 설정해야 함

• transform 속성의 rotate 함수 사용 시 기본으로 설정되는 기준점은 무엇이고, 이를 바꾸려면 어떻게 해야 하는가?

: 기본으로 설정되는 기준점은 요소의 중앙, center
: top 값을 적절히 조절하여 위치를 변경하는 방식으로 기준점을 바꿀 수 있음

• transform 사용하여 위치를 변경했을 때 새로고침하면 영역이 보이는 문제를 어떻게 해결할 수 있는가?

: 자바스크립트의 setTimeout과 같은 함수로 해결할 수 있음

• 키보드 포커스 상태일 때 보이는 아웃라인을 CSS로 어떻게 확장시킬 수 있는가?

: outline-offset 속성의 값을 적절히 설정

• backdrop-filter는 무엇이고, 어떻게 사용하는가?

: 요소의 opacity를 조절한 경우 뒤에 비치는 다른 요소가 blur 처리를 한 것처럼 흐리게 보이게끔 할 수 있음
: backdrop-filter: blur("값")과 같은 방식으로 사용 가능
: 다만 지원하지 않는 브라우저가 있으니 사용 전 확인 필요

• width, height 값의 단위를 px이 아닌 %, vw, vh로 설정하는 이유는 무엇인가?

: 반응형 디자인 시 장치마다 뷰포트 크기가 다르기 때문에, 뷰포트를 기준으로 고정적인 크기를 설정하면 어떤 장치에서든 동일한 크기로 보임

• li에 포함된 a의 스타일링 시 사이에 구분선이나 충분한 여백을 설정해야 하는 이유는 무엇인가?

: 너무 서로 붙어 있으면 a 사이의 중간 영역을 터치하는 경우 혼란을 유발할 수 있음
: 만약 구분선을 추가하는 경우 a가 아니라 그 안의 콘텐츠에 설정해야 함, a에 설정하면 구분선까지 링크로 처리되기 때문

• margin-left, margin-right 속성의 값을 auto로 설정하면 어떤 이점이 있는가?

: 요소 왼쪽의 margin 값과 요소 오른쪽의 margin 값을 자동으로 계산하여 꽉 채워주기 때문에 창 크기를 확대/축소해도 고정적으로 중앙 정렬되는 효과가 있음

• 모바일과 데스크탑의 레이아웃 배치 순서가 다른 경우, 무엇을 먼저 스타일링하는 것이 바람직한가?

: 모바일 먼저 스타일링하는 것이 좋음
: 모바일은 화면 크기가 작기 때문에 보통 한 줄이나 두 줄로 레이아웃 배치가 간단한 편이기 때문

• 데스크탑 레이아웃에 grid를 사용할 경우 보편적으로 column은 몇 개로 설정하는가?

: 2, 3, 6 등의 숫자로 나누었을 때 딱 떨어지는 수이기 때문에 보편적으로 12개의 column으로 구획을 나누는 편
: 컴포넌트의 영역을 더 세분화한다면 24개, 덜 세분화한다면 8개로 나누기도 함

• 데스크탑 레이아웃에 grid를 사용하는 경우, 각 구획의 크기를 어떻게 계산하는가?

: http://gridcalculator.dk/ 페이지 참고
: 차지하는 영역의 크기와 그 사이의 여백을 모두 더한 후 상대 단위로 변환하여 계산

• 이름의 특정 부분만 포함한 클래스는 어떻게 선택하는가?

: 속성 선택자를 적절히 활용
: [class*="포함하는 특정 부분"]과 같은 방식으로 선택

• 모바일, 데스크탑 스타일링시 공통적인 부분이 많다면 레이아웃 배치는 어떤 방식으로 하는 것이 효율적인가?

: 먼저 공통적인 부분의 스타일링을 마무리하고 레이아웃 배치를 나중에 하는 것이 더 효율적임
: 반면 공통적인 부분이 거의 없다면 모바일 > 데스크탑 순으로 스타일링하는 것이 덜 까다로움

• text-align 속성은 inline 요소에 사용할 수 있는가?

: block 요소에만 사용할 수 있음
: inline 요소는 어차피 width 값을 콘텐츠가 차지하는 만큼 가지므로 text-align을 사용할 필요가 없음

• 반응형 디자인에 iframe 요소를 삽입할 때 발생하는 height 이슈는 무엇이고, 어떻게 해결할 수 있는가?