🔸 HTML

• q와 blockquote의 차이는 무엇인가?

: q는 inline 요소 인용문을 생성
: blockquote는 block 요소 인용문을 생성

• q의 속성인 cite에 어떤 값을 설정할 수 있는가?

: cite에는 인용문의 출처를 기재할 수 있음
: 인터넷 사이트라면 URL을 기재하고, 책이라면 ISBN을 기재함

🔸 CSS

• IR 기법은 무엇이고, 어떤 것들이 있는가?

: Image Replacement의 약자, 이미지의 대체 텍스트를 제공함으로써 접근성을 향상시킬 수 있는 CSS 기법
: padding, text-indent로 대체 텍스트를 숨길 수 있음
: 이미지가 있다면, 가상 요소로 생성한 block 요소에 이미지를 삽입하여 텍스트를 뒤로 감출 수 있음

• IR 기법을 활용할 때 키보드 포커스 영역이 잘려서 보이는 이슈를 어떻게 해결할 수 있는가?

: outline-offset 속성의 값을 적절히 설정하여 포커스 테두리를 안쪽으로 들어가게끔 설정

• IR 기법을 사용할 때 발생하는 이슈를 방지하기 위해 대체하여 사용할 수 있는 방법은 무엇인가?

: WAI-ARIA 스택을 사용할 수 있음, 특히 aria-label 속성을 지정하여 대체 텍스트를 제공하면 됨

• 요소에 margin-left 속성 값을 auto로 설정하는 경우 어떤 이점이 있는가?

: 요소 왼쪽의 모든 빈 공간이 자동으로 margin처리 되면서 오른쪽으로 요소가 정렬됨

• button의 스타일링시 주의해야 할 점은 무엇인가?

: button과 같은 form 요소의 경우 크로스 브라우징 이슈가 빈번하게 발생함
: 동일한 속성과 값을 적용해도 브라우저마다 다르게 보일 수 있기 때문에 이를 유의하면서 스타일링해야 함

• 단축 속성을 사용할 경우에 발생할 수 있는 이슈는 무엇인가?

: 개별 속성을 사용한 스타일링과 함께 사용했을 때 우선 순위 때문에 무시될 수 있음
: transition을 단축 속성으로 사용하면 브라우저에 따라서 새로고침시 한 번 자동으로 재생되는 경우가 있음, 이는 개별 속성 사용으로 해결 가능

• 하나의 class에 너무 많은 속성을 부여하면 좋지 않은 이유는 무엇인가?

: 하나의 class가 담당하는 속성을 최소화해야 중복된 스타일링을 컴포넌트화하여 사용하기 쉬움

• transition을 hover, focus와 같은 가상 클래스 선택자에 설정하면 안 되는 이유는 무엇인가?

: 가상 클래스 이벤트에 transition을 설정하면 이벤트가 사라지자마자 transition이 종료되어 자연스럽지 못함
: 매끄러운 transition을 위해서는 가상 클래스 말고 transition을 적용할 원래 요소에 적용해야 함

• 다양한 속성의 transition에 각각 지연 시간을 부여하면 어떤 장단점이 있는가?

: 장점으로는 좀 더 동적인 애니메이션을 부여할 수 있음
: 단점으로는 너무 과도하게 사용하면 피로감을 유발할 수 있음

• ol의 기본 스타일링을 해제하는 방법에는 어떤 것이 있고, 각각 어떤 특징이 있는가?

: list-style-type 값을 none으로 설정하면 스크린 리더가 순서를 읽어주지 않기 때문에 따로 대체 텍스트 제공할 필요가 있지만, 시각적으로 아예 사라지기 때문에 스타일링 하기가 편함
: overflow 값을 hidden으로 설정하면 스크린 리더가 순서를 읽어주므로 대체 텍스트를 제공할 필요가 없지만, 시각적으로 숨긴 것일 뿐이기 때문에 스타일링시 이슈가 발생할 수 있음

• counter-increment 속성은 무엇이고, 어떻게 사용하는가?

: 원하는 변수명을 값으로 지정하여 counter 함수 사용시 변수처럼 사용할 수 있음
: 예를 들어 ol의 li에 counter-increment 속성의 값으로 number를 사용하면, li의 순서 정보가 자동으로 변수에 설정됨

• attr 함수는 무엇이고, 어떻게 사용하는가?

: attr 함수 값으로는 class와 같은 속성의 이름을 사용할 수 있음, 이를 변수처럼 활용 가능

• inline-flex는 무엇이고, 어떻게 활용할 수 있는가?

: inline-block과 동일한 기능이지만, 내부의 요소를 flex item처럼 활용할 수 있기 때문에 justify-content 등의 속성을 적용할 수 있음

• q 요소의 스타일링시 특징은 무엇인가?

: 가상 요소로 앞과 뒤에 큰따옴표가 자동 생성됨, 이를 선택하여 변경하거나 제거할 수도 있음

• 가상 요소의 위치를 before로 지정할 때와 after로 지정할 때 어떤 점을 고려해야 하는가?

: before은 left, top 값을 크게 고려하지 않아도 되지만, after는 콘텐츠 뒤에 생성되기 때문에 필수적으로 left, top 값을 고려해야 함

• quotes 속성은 무엇이고, 어떻게 사용하는가?

: q와 같이 자동으로 큰따옴표를 생성하는 요소의 경우, quotes 속성의 값으로 큰따옴표를 직접 변경할 수 있음
ex) quotes: "[" "]";

• inline 요소에 translate 함수를 적용하면 어떻게 되는가?

: 정상적으로 적용되지 않음, translate 함수를 적용하려면 block 요소여야 함

• transform 속성의 값을 한 번에 없애려면 어떻게 해야 하는가?

: transform 속성의 값을 여러 개 지정한 경우, none을 값으로 설정하여 한 번에 지정한 값들을 무효화할 수 있음

• margin 병합 현상이 발생하는 이유는 무엇인가?
  
  
• svg 이미지는 Image Sprite 방식으로 어떻게 사용할 수 있는가?