출저
1. DOCTYPE 은 무슨 역할을 하나요?
<!DOCTYPE html>
- DOCTYPE 은 DOCument TYPE 의 약자로
DTD - for Document Type Definition와 관계있다. - DTD는 특정 타입의 문서가 어떻게 구조되어야 하는지 (예를 들어, button은 span을 갖을 수 있지만 div는 갖지 못한다.) 정의하지만, DOCTYPE 은 어떤 DTD가 어떤 문서를 취하는지 정한다.
- 웹페이지는 DOCTYPE 선언을 필요한데 유저에게 어떤 사양의 문서형식을 사용하고 있는지 알려줌으로써 쿼크모드로 바뀌지 않고, 개발자가 의도한 문서형태로 보여줄 수 있다.
- 쿼크모드에서는 브라우저 회사마다 정의된 방식에 따르며, 그 결과에 차이를 보인다. 대표적으로 박스모델에서 폭(width)과 높이(height)의 여백처리는 IE가 W3C의 표준과 달리 처리하기에 다른 결과를 보이게 된다.
문서형식을 지정하는 것으로 어떤 사양의 문서형식으로 작성되어 있는지 브라우저에게 알려주는 역할을 한다.
2. 여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요?
<html lang="en">
- 웹페이지를 이용하는 이용자의 언어를 알맞게 지원하기 위해서는?
-
이용자의 국가를 판별하는 방법
가장 일반적으로는 HTTP 요청 헤더의 Accept-Language 정보 또는 IP로 지역을 판단하는 방법이 있을 수 있다.
하지만 지역과 이용자의 언어가 다를 수 있기 때문에 부가적인 방법으로 쓰여야 하며, 이용자가 수동적으로 언어를 바꿀 수 있도록 만들어야 한다. -
웹 접근성
먼저, 웹 접근성을 위해 HTML의 속성 중 lang에는 해당하는 언어에 맞는 값을 집어넣어야 한다. 예를 들면 한국어는<html lang="ko">영어는<html lang="en">
이러한 설정은 시각장애인들에게 웹 화면을 읽어주는 웹 리더가 올바르게 동작할 수 있도록 돕기도 한다. -
i18n
다국어 컨텐츠를 언어별로 제공할 때는 i18n으로 제공하는 것이 일반적이라고 생각한다. 각 언어별 json 파일(ko.json, en.json, jp.json과 같은 파일)을 구성하고i18n 라이브러리를 이용하여 언어별 페이지를 제공한다.
다국적 언어 지원을 위해서는 ip 주소로 이용자의 지역을 파악하는 방법이 있지만 메인이 되는 것을 지양하고 수동적으로 언어를 지정할 수 있도록 해야 하는데 이는 보통 i18n 라이브러리와 언어별 json 파일을 이용하여 구현한다.
3. 다국어 사이트를 디자인하거나 개발할 때 주의해야할 사항은 무엇인가요?
- HTML에 lang 속성을 사용한다.
- 사용자를 그들의 모국어로 안내합니다 - 사용자가 번거롭지 않도록 쉽게 국가/언어를 변경할 수 있도록 한다.
- 텍스트를 포함한 이미지를 사용하는 것은 확장가능한 접근이 아니다. - 이미지에 텍스트를 배치하는 것은 잘 보이고 시스템 글꼴이 아닌 글꼴을 모든 컴퓨터에 표시하는데 여전히 널리 사용되는 방법. 그러나 이미지에 텍스트를 번역하려면, 텍스트 문자열에 각 언어에 대해 만들어진 별도 이미지가 필요하다. 이 같은 대체 방식이 늘어나면 금방 통제가 어려워진다.
- 색상이 어떻게 이해될지에 대해 주의 해야한다. - 색상은 언어와 문화에 따라 다르게 인식된다. 적절한 색상을 사용하여 디자인해야 한다.
- 날짜와 통화 형식 - 날짜는 종종 다른 방식으로 표현된다. 예) 미국의 "May 31, 2012" vs. 유럽의 "31 May 2012".
- 언어를 읽는 방향 - 영어는 왼쪽에서 오른쪽으로, 위에서 아래로 읽지만, 전통적인 일본어는 위에서 아래로, 오른쪽에서 왼쪽으로 읽는다.
4. data-속성은 무엇에 좋은가요?
JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는 비표준 속성, DOM 추가 프로퍼티 등의 조작없이, DOM 자체에 추가적인 데이터를 저장하기 위해 data-속성을 사용했었다. 이는 적절한 속성이나 요소가 없는 페이지나 애플리케이션에 사용자정의 데이터를 비공개로 저장하기 위한 것.
요즘에는, data-속성을 사용하는 것을 권장하지 않습니다. 그 이유 중 하나는 사용자가 브라우저의 inspect 기능를 사용하여 데이터 속성을 쉽게 수정할 수 있다는 것입니다. 데이터 모델은 JavaScript 자체에 더 잘 저장되며, 라이브러리나 프레임워크의 데이터 바인딩을 통해 DOM을 업데이트된 상태로 유지하는 것이 더 낫습니다.
5. HTML5를 개방형 웹 플랫폼으로 간주할 때, HTML5의 구성 요소는 무엇인가요?
- 의미 -
시맨틱태그를 이용하여 콘텐츠를 보다 더 정확하게 설명할 수 있도록 허용한다. - 연결 - 새롭고 혁신적인 방법으로 서버와 통신할 수 있도록 허용한다.
- 오프라인과 저장소 - 웹 페이지가 클라이언트 측에서 데이터를 로컬로 저장하여, 오프라인에서보다 효율적으로 작동하도록 허용한다.
- 멀티미디어 - 개방형 웹에서 비디오와 오디오를 일급으로 만든다.
- 2D/3D 그래픽과 효과 - , svg 지원
- 성능과 통합 - XMLHttpRequest 2 단계, 비동기적 작업 가능. 컴퓨터 하드웨어의 성능 최적화와 개선으로 더 나은 사용을 제공.
- 장치 접근 - 카메라API, 터치이벤트 등 다양한 입출력 장치의 사용을 허용.
- 스타일링 - css 요소 추가, 개선을 통해 사용자가 더 세련된 테마를 사용하게 한다.
