DOCTYPE 🔥

DOCTYPE이란 Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것 DOCTYPE의 선언에는 두가지 이유가 존재함.

1. 첫번째로 렌더링모드를 선언하는 용도로 사용된다.

렌더링 모드란 웹페이지를 번역, 또는 읽는 방식으로써 다양한 웹브라우저에서 웹표준에 따라 웹페이지를 올바르게 표시하도록 만들어주는 것이다.

렌더링 모드에는 표준모드(standard mode)와 비표준모드(quirks mode), 거의 표준모드(almost standard mode) 또는 엄격모드(strict mode)가 존재한다.

표준모드(standard mode)는 DOCTYPE을 선언함으로써 실행이 되고, 웹표준에 따라 렌더링(읽어짐)된다.

비표준모드(quirks mode)는 DOCTYPE을 선언하지 않으면 실행되고, 구 브라우저처럼 렌더링 되어지므로 올바르게 표현하지 못한다.

DOCTYPE에 대하여 설명하시오

2. 두번째로는 HTML버전을 선언하는 용도로 사용된다. 이를 DTD(문서형 정의)라고 한다.

문서형 정의(DTD:Document Type Definition)은 HTML5, XHTML, HTML의 세가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성등을 처리하는 기준이 되며 유효성 검사에 이용된다.

즉, HTML 문서가 어떤 문서 형식을 따르는지 DOCTYPE에서 DTD를 지정하는 것이다.

우리가 흔히 사용하는 HTML5는 HTML5에서는 SGML에 기반을 두지 않아서 DTD 참조가 필요 없으며, 최소한의 코드 작성이 기본 방향이라 매우 간단히 선언할 수 있다.

<!DOCTYPE html>

나머지에는 아래와 같은 방식이 존재하고 자세한 태그 방식은 https://www.w3.org/QA/2002/04/valid-dtd-list.html 여기를 참조하면 된다.

meta 태그에 대해서 알고 있나요?

메타태그(meta tag)란 이름에서 볼수있듯 (x)html 문서의 특수태그이며 반드시 <head></head> 안에 <body></body> 보다

상단에 위치해야합니다. 메타태그는 이 (x)html 문서가 어떤내용을 담고있고 핵심키워드는 무엇이며 누가만들었는지 어떤 언어코드로 설정되었는지의 정보를 담고있습니다. 화면에 표시되지는 않지만 검색엔진이나 브라우저에 읽힙니다. 이러한 메타태그로

charset, description, keyword, author, refresh, mode, viewport 등의 정보를 표기할수있습니다.

1.메타태그(meta tag)의 속성

메타태그는 http-equiv, name, content 세가지의 속성이있습니다.

http-eqyiv이속성은 문서에서 초기정보를 나타내는 속성으로 메타요소에서 정의된 명령사항들을 먼저 실행한 후 페이지를 로딩합니다. HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다. 기본언어(content-language), MIME 타입(content-type), 브라우저호환성설정(X-UA-Compatible), 페이지 리로드(refresh)등을 나타낼 수 있습니다. name 속성값으로는 subject, title, author, keywords 등이 있습니다. 검색엔진에게 문서의 내용을 요약해 주는 역할을 담당한다고 할 수 있습니다. content 메타태그의 정보를 지정해줍니다.

2. 메타태그(meta tag)의 종류

기본언어(content-language) 전처리될 기본 언어를 지정할 수 있습니다. 선언하지 않는 경우 기본언어가 존재하지 않는것으로 간주합니다. content 에는 그에 맞는 값을 입력해야합니다. 아래 예제에서는 ko(한국어) 로 지정되어있습니다.

MIME 타입(content-type) 이 속성은 현재 페이지의 인코딩(문자셋)을 어떠한 방식으로 출력할 지 결정하는 속성입니다. 만약 제작한 웹 페이지의 한글이 깨져 보인다면, 거의 이 메타정보와 실제 페이지의 문자셋이 달라 생긴 문제일 가능성이 매우 큽니다. MIME타입 을 지정해준다음 세미콜론(;) 으로 구분합니다. 국내에서는 보통 UTF-8, EUC-KR을 많이 사용하고 있습니다. 그리고 현재 추세는 다른 언어의 사용자가 접근 시에도 올바르게 보여질 수 있는 UTF-8 를 권장하고 있습니다.

브라우저호환설정(X-UA-Compatible) 이 메타 정보는 IE(인터넷 익스플로러)가 하위 버전 IE모드로 렌더링 하도록 만들어 줍니다. 예를 들어 content속성 값에 “IE=EmulateIE7”로 넣는 경우, IE8 이상의 최신 IE 브라우저라도 IE7 버전처럼 페이지를 렌더링 합니다.

페이지 리로드(refresh) 페이지를 주기적으로 새로고침 하게 만들어줍니다. 예상치못한 새로고침은 사용자로하여금 불편함을 느끼게 할수있습니다. 아래 예시코드는 content 값에 숫자를 입력후 세미콜론(;)으로 구분지어 url 로 주소를 넣어주면 해당 시간 뒤에 지정해준 url로 페이지가 이동된다는 뜻 입니다.

소개내용(description) 정보 같은 경우는 현재 페이지를 간략히 소개하는 문구를 적도록 합니다. 이를 검색엔진이 검색된 페이지에 페이지 제목과 같이 표현하며, ‘공유하기’ 같은 것을 했을 때에 활용이 될 수도 있습니다.

키워드(Keywords) 페이지에 대한 키워드 정보들을 담고 있습니다. 페이지의 주요한 단어들을 콤마(,)로 구분하여 값을 넣어주도록 합니다. 이 키워드 정보는 검색엔진이 보다 검색엔진을 용이하도록 하게 만듭니다만, 이를 악용한 광고성 페이지들은 실제 콘텐츠와는 다른 단어들을 무작위로 넣기도 합니다.

작성자(author) 페이지의 저자를 나타냅니다. content의 값으로 저자를 나타내는 문자열을 써야 합니다. 이 메타정보가 큰 의미를 가지진 않지만, 소스 상에서도 자신이 제작했음을 명시할 수 있습니다.

그 외 🔥

이미지 크기가 클 경우 렌더링 속도가 느려질텐데 이를 개선하기 위한 방법

브라우저 사이즈에 맞춰 적절한 이미지 제공 이미지를 다양한 사이즈에 대응할 수 있도록 적절한 브레이크 포인트를 설정하여 사이즈를 조절해줍니다. 이렇게 하는 이유는 데스크톱의 이미지는 모바일의 이미지보다 상대적으로 용량이 클 수밖에 없습니다. 그렇게 되면 사용자는 필요 이상의 이미지를 다운받게 되어 리소스가 낭비될 수 있습니다. 그러므로 브라우저 사이즈에 맞게 브레이크 포인트를 걸어 과도한 리소스를 사용하지 못하게 해주어 보다 빠른 렌더링이 가능하도록 해줍니다. 이러한 방식의 해결로 미디어쿼리 및 태그의 srcset 속성, 태그 등의 방법이 있습니다.

UI란 무엇인지 설명하시오

UISMS USER INTERFACE의 약자로, UI란 필자 뿐만 아니라 어떠한 제품이나 소프트웨어를 사용하게되는 사용자가 그에 해당하는 제품과 서비스를 이용할 시 처음 접하게 되는 매개물이다.

유저가 사용하고자 하는 소프트웨어나 서비스를 편리하게 이용할 수 있드록 디자인 된 것이다. 흔히들 말하는 UI 디자인 이라는 것이 아이콘에 대한 디자인이나 색감, 그리고 표현과 글씨 폰트로 보여지는 시각 디자인을 말하는 것임을 알아두자.