🔸 WCAG
- 웹 접근성 준수 가이드라인을 해석하는 바람직한 방법은 무엇인가?
: 단편적으로 사례 등을 통해서만 가이드라인을 파악하면 안 됨
: 실질적으로 맥락과 사용자를 고려하고 개선하기 위한 노력이 필요함
: 구체적으로는 성공 기준의 이유, 설명, 달성 기법, 타이틀 등을 고려해야 함
- 대체 텍스트 작성을 고려할 때 논점이 될 수 있는 기준에는 어떤 것이 있는가?
: 이미지를 얼마나 정확하게 표현할 것인가?
: 이미지의 기획 의도를 전달할 것인가?
🔸 HTML
figure,figcaption태그는 무엇이고, 어떻게 사용하는가?: 다른 부분으로 이동해도 문제 없는 이미지 등의 독립적인 콘텐츠를 포함할 수 있는 요소
: 첫 번째나 마지막 자식 요소로figcaption태그를 사용하여 설명을 덧붙일 수 있음
- HTML4.01 버전과 HTML5 버전에서
a의 사용에 어떤 차이점이 있는가?: HTML4.01에서
a안에 하나의 요소만 포함할 수 있었고block요소를 포함할 수 없었지만, HTML5에서는a안에block요소를 비롯한 여러 요소를 포함할 수 있음
: 그러나a안에 여러 요소를 포함하면 스크린 리더 사용자 입장에서a링크의 음성 텍스트가 너무 길어져서 접근성 면에서 바람직한 방법은 아님
figcaption으로 이미지에 대한 설명을 제공하더라도, 추가적으로alt속성을 사용하여 대체 텍스트를 제공하는 경우의 이점은 무엇인가?:
figcaption으로 이미지를 충분히 설명할 수 있다면alt속성의 값을 공란으로 두어도 괜찮지만, 값을 작성하면 SEO 관점에서 좋음
hr은 어떻게 사용하는 것이 바람직한가?: 단순히 디자인 목적의 구분선이라면 CSS로 처리하는 것이 바람직함
:hr은 논리 구조상 구획을 나누고 싶은 경우에 사용해야 함
strong과span은 어떻게 구별하여 사용할 수 있는가?: 강조 의미의 포함 여부에 따라서 포함한다면
strong, 포함하지 않고 단순히 스타일링할 목적이라면span사용
a의target속성을_blank로 설정하면 스크린 리더 사용자에게 어떤 이점이 있는가?: 스크린 리더에서 새 창이 열린다는 정보를 알려줄 수 있음
🔸 CSS
inline요소를 웬만하면block요소로 바꾸어서 스타일링해야 하는 이유는 무엇인가?: 키보드 포커스 이슈가 발생할 수 있기 때문
gradient로 스타일링하려면 어떤 전제 조건이 있어야 하는가?:
height값이 1px이라도 있어야 함
- 1px보다 얇은 구분선을 스타일링하려면 어떤 방법이 존재하는가?
:
transform함수로 1px을 50% 축소시키는 방법
: 불투명도를 50% 적용하여 착시 효과로 0.5px처럼 보이게 하는 방법
:gradient방향을 위에서 아래로 설정하되, 반을transparent로 설정하는 방법
:box-shadow를 이용하는 방법
:border-image속성 이용하여 테두리 선에만 이미지를 설정하는 방법
img태그를 스타일링할 때span으로 감싼 후span에 스타일링하면 어떤 이점이 있는가?: 반응형 이미지를 처리할 때 편리함
:span을 감싸면 꾸밈 효과가 적용되고, 제거하면 원본 이미지가 되기 때문에 컴포넌트처럼 사용하기도 쉬움
- 중복되는 스타일링 요소는 어떻게 처리하는 것이 바람직한가?
: 공통으로 지정할 수 있는
class에 한 번만 형식을 만들어놓고 전략적으로 통일하는 것이 바람직함
position: absolute속성을 부여한 요소 주변에 normal flow의block요소가 있따면 고려해야 할 점은 무엇인가?:
absolute를 값으로 설정한 요소는 떠 있는 상태이기 때문에block요소의 높이가 충분한지 확인해야 함, 충분하지 않다면min-height값을 설정할 필요가 있음
text-align속성의 값을justify로 설정하면 어떻게 되는가?: 텍스트가 양쪽으로 정렬됨
: 다만 중간의 여백을 늘려주는 방식이므로 간혹 어색하게 보일 수도 있음
- Image Sprite 방식으로 이미지를 삽입하면 어떤 이점이 있는가?
: 여러 장의 이미지를 서버에 요청하는 대신 한 장만 요청하면 되기 때문에 성능을 향상시킬 수 있음
