🔸 HTML

• HTML로 삽입하는 이미지를 무엇이라 하고, 어떤 방법을 사용하는가?

: 콘텐츠 이미지, img 태그로 삽입할 수 있음

• 특수 문자는 어떻게 마크업하는가?

: &'특수 문자 이름';의 방식으로 마크업할 수 있고, 이를 엔티티라고 함
: 가령 <나 > 같은 특수 문자는 이미 HTML에서 태그 오프닝과 클로징의 역할을 담당하고 있으므로 표기의 혼란을 막기 위해 엔티티를 사용함
ex) © : 저작권 기호, & : & 기호

• 키보드 포커싱을 받을 수 있는 요소에는 무엇이 있는가?

: href 속성이 존재하는 a 태그, form
: a 태그의 경우 href 속성이 없으면 인터랙티브 콘텐츠가 될 수 없기 때문에 포커싱되지 않음

• img 태그의 alt 속성은 왜 작성해야 하는가?

: 웹 접근성과 관련하여 W3C가 따로 지침을 만들 정도로 강조하고 있는 부분
: 네트워크 이슈로 이미지를 다운로드할 수 없을 때 이미지에 해당하는 대체 텍스트를 보여줌으로써 정보를 제공할 수 있음
: 가장 중요한 이유는 스크린 리더 사용자의 접근성을 향상시키는 데 있음

• img 태그의 alt 속성을 작성할 때 주의해야 할 점은 무엇인가?

: 이미지와 전혀 관련이 없거나 이미지를 충분히 설명할 수 없는 텍스트를 제공해서는 안 됨, 이미지를 볼 수 없는 사용자도 충분히 이미지에 대한 정보를 획득할 수 있게끔 작성해야 함
: 만약 영어로 대체 텍스트를 제공한다면 사전에 등록되어 있는지의 여부를 먼저 파악해야 함, 'Web Cafe'의 경우 사전에 등록된 단어라서 스크린 리더가 매끄럽게 읽어주지만 'naver'의 경우 사전에 등록된 단어가 아니기 때문에 스크린 리더가 매끄럽게 읽지 못하기 때문

• 논리적 마크업과 디자인을 위한 마크업은 무엇이고, 어떤 방식을 지향해야 하는가?

🔸 CSS

• CSS로 삽입한 이미지를 무엇이라 하고, 어떤 방법을 사용하는가?

: 배경 이미지, background-image 속성으로 삽입할 수 있음

• box-sizing을 border-box로 설정할 때, *, *::before, *::after처럼 가상 요소까지 선택하는 이유는 무엇인가?

: 공식 문서의 box-sizing 스펙에 따르면 기본값은 content-box임, 특히 기본적으로 상속되지 않는다는 점이 중요함
: 상속되지 않기 때문에 *만 사용하면 부모 요소에만 border-box가 적용되어 자식 요소는 따로 적용을 해주어야 함, 이를 위해 가상 요소 선택자를 사용하는 것

• 상속되는 속성과 상속되지 않는 속성의 가장 두드러지는 차이는 무엇인가?

: margin, padding 등 사이즈 조절과 관련된 속성은 대부분 상속되지 않음
: color, font-size 등 꾸밈을 위한 속성은 대부분 상속됨

• CSS에서 레이아웃을 가로로 배치할 수 있는 방법에는 무엇이 있는가?

: flex, float, inline-block

• fallback design이란 무엇인가?

: 자바스크립트의 try catch 구문처럼 예외 상황에 대해 처리할 수 있는 디자인
ex) 배경 이미지가 존재하고 폰트를 흰색으로 설정한 경우, 네트워크 이슈로 배경 이미지를 불러올 수 없다면 폰트가 아예 보이지 않기 때문에 추가로 background-color 속성을 설정하여 폰트가 보일 수 있도록 하는 것

• 키보드로 포커싱되지 않는 요소에 어떻게 포커싱을 부여할 수 있는가?

: tabindex 속성으로 포커싱을 부여할 수 있음
: 값을 0으로 설정하면 포커싱 부여, 양수로 설정하면 포커싱 우선 순위 지정, 음수로 지정하면 포커싱 제거

• UX를 향상시키려면 button과 같은 인터랙티브 콘텐츠의 크기는 어떻게 설정해야 하는가?

: padding 값을 부여하여 마우스를 hover 할 수 있는 일정 크기의 영역을 확보하는 것이 바람직함
: 키보드로 포커싱했을 때 아웃라인이 잘리는 것을 방지하기 위해 padding 외에도 적당한 margin 값을 부여하는 것이 좋음

• line-height를 정렬의 관점에서 어떻게 활용할 수 있는가?

: 컨테이너의 height 값만큼 콘텐츠에 line-height 값을 부여하면 세로축 기준 중앙 정렬되는 것처럼 보이게 할 수 있음
: 그러나 콘텐츠가 한 줄일 때만 가능하다는 조건이 있음

• 흰색 텍스트의 가독성을 향상시킬 수 있는 방법에는 무엇이 있는가?

: text-shadow 속성을 부여하여 테두리가 있는 것처럼 표현하면 가독성을 향상시킬 수 있음
: 테두리처럼 만드려면 1px 1px 0, -1px -1px 0처럼 대칭 방향으로 그림자를 적용해야 함

• color 속성의 값으로 inherit를 설정하면 어떻게 되는가?

: 부모 요소에 부여된 color 속성의 값을 그대로 상속 받게 됨

• color 속성의 rgba 함수로 투명도를 조절하는 방식과 opacity 속성으로 투명도를 조절하는 방식에는 어떤 차이가 있는가?

: color 속성의 rgba는 요소가 포함하는 콘텐츠, 즉 텍스트에 한정되어 투명도가 적용됨
: opacity 속성은 텍스트를 포함하는 컨테이너 자체의 투명도를 조절하기 때문에 좀 더 포괄적으로 사용할 수 있음

• border-radius 속성의 값을 엄청 크게 적용하면 어떻게 되는가?

: width 값보다 훨씬 큰 크기를 값으로 적용하면 렌더링 엔진이 적용한 값부터 1px씩 축소시키면서 border-radius를 최대로 적용할 수 있는 값까지 찾아나감, 결국 원의 형태로 보여지게 됨

• CSS의 가상 요소 선택자로 구분선을 어떻게 만들 수 있는가?

: 구분선 위치에 따라 요소에 ::before 혹은 ::after의 가상 요소 선택자로 적절한 height 값의 빈 컨테이너를 만들고, 상황에 따라 position 속성과 background 속성 등을 조절

.요소 이름::before{
content: "";
position: absolute;
top: 30px;
left: 0;
width: 80%;
height: 1px;
background: #aaa;
}

• HTML의 공백 문자가 CSS에 어떤 영향을 미치는가?

: 공백 문자를 사용하지 않았는데 공백이 생겼다면, HTML 마크업에서 inline 요소가 엔터 처리되어 있어서 그런 것은 아닌지 추측해볼 수 있음
: inline 요소의 마크업시 엔터가 공백 처리되기 때문
: HTML 마크업을 엔터 없이 붙여주면 공백이 사라지긴 하지만, 문서의 가독성을 위해서는 그냥 놔두고 CSS에서 처리하는 것이 바람직함

• white-space 속성은 무엇이고 어떻게 활용할 수 있는가?
  
  
• CSS로 숨김 콘텐츠 영역을 만드는 방법에는 무엇이 있는가?
  
  
• position은 무엇이고, 어떻게 활용할 수 있는가?
  
  
• background 관련 속성에는 무엇이 있는가?
  
  
• 아이콘을 웹 폰트 방식으로 어떻게 삽입할 수 있는가?
  
  
• CSS로 애니메이션은 어떻게 적용할 수 있는가?
  
  
• CSS로 요소가 움직이는 애니메이션을 넣고 싶다면 어떤 방법을 활용할 수 있고, 각 방법의 장단점은 무엇인가?