HTML 인터뷰
1. doctype이 무엇이고, 몇 번 지정할 수 있나요?
1) 정의
- DOCTYPE 은 DTD를 선언할 때 쓰는 태그이다
- DTD는 브라우저의 렌더링 모드를 지정하고 유효성 검증기의 기준이 되므로 HTML이나 XHTML과 같은 마크업 문서는 문서가 시작할때 DTD를 명시하여 사용된 마크업을 파서가 파악할 수 있게 해주어야한다.
2) 사용법
- <!DOCTYPE 1.최상위엘리먼트 2.문서제한 "3.인증기관//4.기관명//DTD 5.DTD TYPE// 6.인코딩언어" "7.DTD주소"
3) 종류
2. 표준모드(Standards mode ) vs 관용모드(quirks mode)
1) 정의
- 웹 브라우저는두 가지 렌더링 모드를 가진다
- 브라우저는 선언된 doctype에 따라 렌더링할 모드를 선택하는데 이를 doctype sniffing 또는 doctype switching이라고 한다
2) 표준모드(standards mode)
- doctype이 지정된 HTML문서는 IE6 이상 버전 부터 모두 표준모드로 렌더링된다
- doctype 이전에 요소가 있다면 관용모드로 렌더링 된다
3) 관용모드(quirks mode)
- IE5, IE5.5 등 이전의 웹이지를 최신 브라우저에서 알맞게 실행되도록 돕는다
- doctype을 선언하지 않은 경우
3. XHTML 이란?
1) 정의
- XML + HTML
- HTML을 대체하기 위해 만들어 졌지만 HTML4.0.1의 규약과 비슷하다
- XML을 이용하여 다양한 데이터셋을 만들어 표현할 수 있다. 브라우저에서 작동하는 혼성 문서를 생성하여, 사용자가 새로운 마크업 태그를 XHTML를 통합할 수 있다
- XHTML은 XML을 이용하여 HTML을 혁신한 것으로 XML이 사용되는 모든 새로운 툴에 XHTML을 결합한다.
2) 장점
- 호환성 및 확장 가능성
- 유지비용의 감소 및 재생산성 확대
- 경량의 로딩속도
4. XHTML 1.0 vs HTML5
구분 |
XHTML 1.0 |
HTML5 |
태그 |
소문자 |
대문자, 소문자 |
태그 닫힘 |
반드시 |
선택 |
홀 태드시 닫힘 |
반드시 |
선택 |
- XHTML은 body 태그안에 문자만 입력할 수 없다
- XHTML인라인 요소가 블럭요소를 감싸면 안된다
- 자세한 사항 : http://psytan.tistory.com/51
5. UTF-8 vs euc-kr
1) UTF-8
- 유니코드로 전세계의 모든 문자를 표현할 수 있다.
- 한글 한 자를 3byte, 문서가 커질 수 있다
- 공백이나 영어는 1byte
2) euc-kr
- 2350개의 한글문자, 한국에서 사용하는 한자와 영어를 표현
- 한글을 2byte로 표현
6. HTML5에서 XML 혹은 XHTML 사용하기
- HTML5는 하위 버전 호환성을 고려하여 만들어졌다. 그렇기 때문에 HTML5에서 XHTML은 사용가능하다
- XML 사용시 최상단에 아래와 같이 인코딩한다
7. HTML5 Custom data attribute(data-*) 이란?
1) 정의
- 기존에 지정된 태그(class, id, name...) 속성 이외에 사용자의 필요에 의해서 만들어진 속성이다.
- 주소 유효성검사(validation)를 하는데 사용된다
- data-으로 시작해야하며 속성 추가에 제약이 없다
- 브라우저는 해당 속성을 만나면 skip 한다
2) 사용 예
- css에서 4를 제거하면 해당 속성 전체에 적용된다
8. HTML4와 HTML5의 콘텐츠 모델(contents model) 비교
1) 콘텐츠 모델(contents model)이란?
- HTML 문서작성의 큰 구조
- 어떤 요소가 어떤 콘텐츠 또는 요소를 포함하는지에 관한 정의(요소들의 관계)
2) HTML4
- Block element(<div>, <p>...), Inline element(<img>,<input>...)로 구분되어 태그를 가지고 표현
- Tree 형태의 구조를 가진다
- 계층형 구조의 outline을 구성하고 구조에 따라 contents에 접근
3) HTML5
- Semantic 태그를 이용하여 웹 구성을 한다
- 문서의 Outline을 잡고 contents 구성
9. HTML5 구성요소
- 시멘틱태그
- API
- 이벤트 핸들러
10. 웹 스토리지 그리고 쿠키(Cookie) vs 세션저장소(session storage) vs 로컬저장소 ( localstorage)
1) 웹 스토리지란?
- HTML5에서 브라우저의 내부 스토리지를 사용할 수 있도록 제공하는 기능
- 브라우저 로컬 스토리지이다(웹 스토리지 X)
- 세션저장소(session storage)와 로컬저장소(localstorage)가 있다.
- 키:값 형태로 저장된다
A. 웹 스토리지 API
메소드/속성 |
설명 |
length |
저장된 변수 갯수 |
setItem(key, value) |
key/value를 로컬 스토리지에 저장 |
getItem(key) |
key와 연관된 값 반환 |
removeImte(key) |
key/value 로컬스토리지 삭제 |
clear() |
모든 값 삭제 |
- localStorage.customKey = 0;
- localStorage.setItem("customKey",0) 같다
2) 웹 스토리지 목적
- 쿠키(cookie)의 제약들을 해소하고 다양한 클라이언트 기능을 넣기위함이다.
- 5MB 까지 데이터 저장
- 서버로 전송할 필요 없음
- 보안에 안전하며 개수 제한이 없다
3) 쿠키(cookie)
- 쿠키는 서버가 클라이언트에 남기고 싶은 정보를 저장하는 텍스트 ㄱ비ㅏㄴ 파일
- 데이터가 4KB만 저장된다
- 매번 HTTP 요청 헤더에 붙여 전송되므로 트래픽 낭비된다
- 보안에 취약하다
- 20개 정도로 개수 제한
4) 세션저장소(session storage)
- 각 세션(윈도우 하나)마다 데이터가 별도저장
- 세션을 종료하면 데이터가 사라진다
- 같은 도메인이라도 윈도우가 다르면 서도 다른 영역 사용
a. 세션저장소(sessionStorage) 예제
5) 로컬저장소(local storage)
- 만료 날짜가 없는 데이터를 저장
- 브라우저를 껐다 켜도 값이 유지된다.
- 도메인이 다르면 서로의 로컬 스토리지에 접근 할 수 없다.
- 같은 도메인은 로컬 스토리지를 공유한다.
- 사용 예는 sessionStorage와 같다
