HTML
[HTML] 태그 기본 정보 - DOCTYPE, meta, viewport ..
ui-o
2025. 6. 18. 14:45
반응형
HTML 기본 정보 태그
DOCTYPE
- HTML 문서가 어떤 형식과 버저으로 작성되었는 지를 명시
- 해당 선언을 빠뜨리면 쿽스 모드(quirks mode)로 읽게 되고, 이는 지금은 사용하지 않는 옛날 브라우저 형태로 HTML을 읽는것을 의미
<!--
해당 문서가 HTML5로 작성되었음을 의미,
브라우저가 해당 선언을 보고 가장 최신 표준안인 html5 방식으로 문서를 읽음
-->
<!DOCTYPE html><html>
- lang을 선언하여 검색엔진, 스크린 리더에게 언어를 알려줌
<head>
- 해당 문서의 메타 데이터, 컴퓨터가 읽어 낸 문서 정보가 담겨 있음
- 페이지 정보, 파비콘, 메타정보, css, javascipt 코드 및 링크 포함
<title>
- 웹 페이지의 제목
- 브라우저 탭, 즐겨찾기, 검색 결과에 표시되는 제목
<meta>
- 문서의 상세 정보 포함
charset
- 웹 페이지 문자 인코딩 방식 지정
- 반드시 형식을 명시해야 글자가 깨지는 형상이 발생하지 않음
- 화면에 보여지는 웹사이트 영역 제어ㅈㅅ
- 모바일의 경우 시각적 뷰포트(visual viewport)와 레이아웃 뷰포트(layout vieport)가 동일하나, 키패드 의해 밀려올려가며 두 뷰포트의 차이가 생기는 경우가 발생할 수 있음
- 장치에 따라 최적화하여 렌더링 된 페이지를 위해 다양한 속성 설정
| 속성 | 설명 |
| width | - 뷰포트의 너비 제어 - width = px, vw, % 설정 가능 - width=device-width : 100%를 의미 - 입력 범위 : 1~10000 / 음수값 무시 |
| height | - 뷰포트의 높이 제어 - height= px, vw, % 설정 가능 - height =device- height : 100%를 의미 - 입력 범위 : 1~10000 / 음수값 무시 |
| initial-scale | - 페이지가 처음 로드될 때 줌 레벨 제어 - 기본값 : 1 - 입력 범위 : 0.1~10 / 음수값 무시 |
| minimun-scale | - 페이지의 줌 아웃 제어 - 기본값 : 0.1 - 입력 범위 : 0.1~10 / 음수값 무시 |
| maximun-scale | - 페이지의 줌 인 제어 - 기본값 : 10 - 입력 범위 : 0.1~10 / 음수값 무시 - 3보다 작은 값 : 접근성에 위배 |
| user-scale | - 페이지의 줌 인, 줌 아웃 허용 엽 제어 - 기본값 : 1 - 값 : 0, 1, no, yes - 0, no 설정 : 접근성에 위배 * 접근성을 위해 최소 2배 이상의 스케일링을 요구하나, 5배 줌이 가능하도록 하는 것이 좋음 |
| interactive-widget | - 가상 키보드와 같은 대화형 UI 위젯이 뷰포트에 미치는 영향 제어 - 기본값 : resize-visual - 값 : resive-visual, resize-content, overlay-content |
뷰포트 width 설정
| 속성 | 설명 |
| width=n | - 모든 기기애서 뷰포트를 해당 고정값으로 고정 - 화면이 더 큰 기기에서 화면이 텍스트가 확대된 느낌이 들 수 있음 (디스플레이 너비보다 적은 너비를 설정 시 브라우저는 실제 화면보다 작다고 생각하여 텍스트,이미지, 레이아웃 등의 콘텐츠를 확대 시켜서 보여줌) - 넓은 화면에서도 낭비되는 공간 발생 - 일반적으로 사용되지 않 |
| width=divice-width | - 브라우저가 기기의 실제 화면 너비를 기준으로 뷰포트 설정 - 반응형 웹 디자인에 표준적으로 사용 - 모든 기기의 폭에 적절하게 콘텐츠가 렌더링 됨 - 확대/축소 없이 1:1로 매칭되어, 텍스트, 이미지, 레이아웃이 자연스러운 비율로 표 - 사용자가 확대/축소하지 않아도 보기 편하게 구성 - 다양한 크기 대응이 용이해서 mobile first에 적합 |
반응형