개발/Front-end

가깝고도 먼 HTML

devriver 2021. 8. 2. 23:34

가깝고도 먼 HTML 1탄

WHY?

HTML, 잘 알고 있다고 생각했으나 지식이 구멍이 뻥뻥 뚫려있었다. 그래서 시작한 가깝고도 먼 HTML! 오늘부터 GO GO!

`< !DOCTYPE>` 을 왜 선언할까?

HTML 문서를 작성할 때 항상 DOCTYPE을 문서의 맨 위에 선언한다. ... 왜 선언할까?

<html> 태그 전에 선언되야하며 <!DOCTYPE> 을 통해 브라우저가 해당 웹 문서가 어떤 타입(HTML5, HTML, XHTML)의 문서인지 파악할 수 있다. 웹 브라우저에게 HTML 버전을 알려주는 역할을 한다. HTML2 ~ HTML4는 SGML(Standard Generalized Markup Language, HTML 할아버지)에 기반을 두어 만들어져서 <!DOCTYPE> 을 통한 DTD 참조가 필요하다. 반면에 HTML5는 SGML에 기반을 두지 않아서 DTD 참조가 필요 없고 표준 모드로 작동되게 하는 역할만 하면 되서<!DOCTYPE html> 으로 간단하게 선언할 수 있다.

DTD(Document Type Definition: 문서형 정의)는 마크업 언어를 위한 규칙으로 HTML5, XHTML, HTML 등의 문서 형식을 정의할 수 있다. <!DOCTYPE> 과 같은 문법을 사용한다. 기술한 유형에 따라 마크업 문서의 요소와 속성등을 처리하며 유효성 검사 에 이용된다. DTD를 생략하는 경우 웹 브라우저가 표준 모드가 아니라 비 표준 모드로 렌더링되어 크로스 브라우징에 어려움을 겪는다.

head 태그에는 무엇이 있을까? 메타가 있죠.

보통 에디터의 자동 완성으로 HTML5 기본 형태를 작성한 후 <body> 부터 태그를 작성했다. <body> 앞은 신경쓰지도 않았다. 물론 예전에 일할 때 페이지 공유 기능을 위해 메타 태그를 설정한 적이 있었지만, 가물가물하니 다시 정리해보았다.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  <script src='main.js'></script>
</head>
<body>

</body>
</html>

HTML head란?

head는 페이지를 열 때 브라우저에 표시되지는 않는다. head는 <title>, CSS 링크, favicon(사이트 아이콘), 메타 데이터(작성자, 중요한 키워드 같은 HTML에 대한 내용)를 포함한다.

메타데이터 `<meta>` 요소들

`<meta charset='utf-8'>`

문서에서 허용하는 encoding에 대해 표시

Viewport

모바일 브라우저들은 뷰포트로 알려진 가상 window 상에 페이지를 렌더링한다. 데스크탑의 뷰포트는 브라우저 창(visible area)의 뷰포트와 같고 사용자가 창의 크기를 조절하면 뷰포트의 크기도 조절된다. 웹 페이지가 뷰포트보다 크면 스크롤 하여 나머지 영역을 볼 수 있다. 반면에 모바일 뷰포트는 웹 브라우저 창보다 크거나 작을 수 있고 상하좌우로 움직이거나, 더블 탭, 줌인, 줌아웃을 통해 뷰포트의 배율을 변경할 수 있다.

뷰포트를 설정안하면 기본 뷰포트가 980px라 페이지가 작게 보인다.

~~아.. 그래서 예전에 작게 보였었구나..~~

기본 사용법

<meta name='viewport' content='width=device-width, initial-scale=1'>

width : viewport의 가로 크기를 조정한다. 숫자가 들어갈 수도 있다. device-width는 100% 스케일에서 css 픽셀들로 계산된 화면의 폭을 의미한다. 즉 기기의 가로 크기에 맞게 설정된다.
initial-scale : 페이지가 처음 로딩될 때 줌 레벨을 조정한다. 값이 1이면 CSS 픽셀과 기기 종속적인 픽셀 간의 1:1 관계를 형성한다.

미디어 쿼리(@media) 에서 선언된 width 범위에 따라 css를 적용하는 반응형 웹을 만드려면 width=device-width를 설정해야한다.

IE 문서 모드

같은 웹문서를 IE 버전에 따라 마크업과 CSS를 다르게 렌더링하는 경우가 있다. 이 문제를 해결하기 위해 MS는 호환성 보기(쿼크 모드 == 비표준모드) 기능을 제공한다. 하지만 모든 사용자가 직접 호환성 보기를 설정하는 것은 불가능한 일이라 아래 메타태그가 등장했다.

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

content='IE=edge' 이 메타 태그를 넣으면 자동으로 호환성 보기 기능이 활성화 된다. IE=edge로 선언하면 IE 버전 중 가장 최신 모드를 기준으로 보여지도록 하겠다는 의미다. 이 때, DOCTYPE 선언과 함께 사용해야 유효하다.

HTML에 CSS와 Javascript 적용하기

`<link>` 의 위치

<link> 는 현재 문서와 외부 리소스의 관계를 명시할 때 사용한다. 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘 연결 등 여러 가지로 쓰일 수 있다. 항상 문서의 head 부분에 위치하며 ret="stylesheet" 와 href="경로" 속성을 가진다. head에 놓아야 화면이 여러번 렌더링되는 것을 줄일 수 있다.

`<script>` 의 위치

<script> 요소는 실행 가능한 코드를 문서에 포함하거나 참조할 때 사용한다. head에 들어갈 필요는 없고 </body> 태그 바로 앞, 문서 본문의 맨 끝에 넣는 것이 좋다. 자바스크립트를 적용하기 전에 브라우저가 모든 HTML 내용을 읽었는지 확인하여 자바스크립트가 아직 존재하지 않은 요소에 접근하는 경우를 방지해야 한다.

`<script>` 요소의 defer, async 속성의 차이점

브라우저는 구문 분석을 진행하다 인라인 스크립트(<script> 내부에 코드 작성하는 방식) 또는 async, defer, type="module" 속성이 없는 스크립트에 도달하면 스크립트를 가져온 후 실행하기 전까지 분석을 중단한다. HTML이 화면에 출력되는 시간이 길어져 사용자의 불편을 유발한다.

async

async 속성이 있으면 HTML 구문 분석 중에도 스크립트를 비동기적으로 가져올 수 있고 사용이 가능해지는 즉시 수행한다. 실행 순서가 다운로드 완료 시점이므로 실행 순서가 중요한 스크립트들에 async를 사용할 때는 유의해야 한다.

defer

async과 마찬가지로 브라우저가 HTML 구문 분석을 수행 중에도 스크립트를 다운로드 할 수 있다. 하지만 구문 분석이 완료된 후, DOMContentLoaded 발생 이전에 스크립트가 실행된다. defer 속성을 가진 스크립트는 문서 상의 순서를 따라 실행된다.

DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생한다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않는다.

HTML5의 섹셔닝 요소들

div로 뼈대를 만들던 시대는 지나갔다. HTML5부터 등장한 구조를 위한 태그들.. 잘 알고 잘 사용하고 있을까?

HTML5 에서는 <header> <nav> <aside> <article> <section> <footer> 등의 섹셔닝 요소가 생겨 좀 더 시멘틱한(의미 있는) 마크업 작업을 할 수 있고 여기에 h1 ~ h6 로 섹션의 제목을 작성하면 좋다. 휴. 이제 <div> 로 레이아웃을 만들지 않아도 된다.

HTML%201/Untitled.png

https://www.w3schools.com/html/html5_semantic_elements.asp

SECTION

<section> 은 테마별로 연관된 컨텐츠를 묶어 더 큰 논리적인 단위를 형성할 수 있게 돕는다. 하나의 페이지 안에서 주제가 다른 영역을 구분 짓거나 하나의 글을 부분으로 나누기도 한다. 주로 heading 요소들과 함께 사용한다. 스타일링이나 스크립트를 위해서 엘리먼트들을 감싸는 요소가 필요하다면 <section> 을 사용하지 말고 문서 구조상 특별한 의미가 없는 <div> 를 사용해야 한다.

예) 홈페이지의 뉴스, 긴 글의 세부 사항과 같은 관련 컨텐츠의 묶음

ARTICLE

<article> 은 문서, 페이지, 애플리케이션, 사이트 안에 들어가는 독립적으로 구성할 수 있는 컴포넌트로 별도로 배포하거나 재사용하기 위한 구조다. <article> 은 완전히 떼어내 다른 사이트에 붙여도 그 의미를 사용자가 알 수 있는 컨텐츠를 담으면 된다. article 요소 안에 article이 들어간 경우, 밖의 article 요소의 내용과 안쪽의 article 요소의 내용이 관련있다는 것을 의미한다. article 중첩 사용은 피하는 게 좋고 대신 논리적인 부분들을 section 요소로 사용하면 된다.

예) 블로그에서 글, 포럼에서 포스팅, 코멘트 등

NAV

<nav>는 사이트 네비게이션(다른 페이지로의 이동) 또는 같은 페이지에서 섹션 이동을 위한 네비게이션 링크 목록을 담는 섹션이다. 페이지 안의 모든 링크 그룹이 nav로 기술될 필요는 없다.

<nav>
    <h1>메인 내비게이션</h1>
    <ul>
        <li>메뉴1</li>
        <li>메뉴2</li>
    </ul>
</nav>

ASIDE

<aside> 본문 컨텐츠 흐름과 분리되지만 약간의 관련성이 있는 컨텐츠에 사용한다.

예) 관련 사이트 링크나 광고, nav 요소의 그룹, 메인 콘텐츠와 별도의 내용이라고 생각되는 것, 사이드바, 글의 발췌, 각주 부분, 글에 대한 정보, 여백을 메우는 추가 정보, 코멘트 세션

HEADER

<header> 는 소개나 내비게이션 기능들의 묶음을 나타낸다. 보통 문서나 section의 최상단에 나타나지만, 꼭 그래야 할 필요는 없으며 여러번 사용 가능하다. 한 섹션의 목차나 검색폼, 관련 로고 등을 감싸는 용도로 사용할 수 있다.

FOOTER

FIGURE

<figure> 요소는 이미지와 캡션을 그룹화하여 독립적인 컨텐츠를 표현할 때 사용한다. <figurecaption> 요소를 사용해 설명을 붙일 수 있다.

<figure>
    <img src="/media/examples/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

MAIN

<main> 말 그대로 문서의 메인 컨텐츠를 표현할 때 사용하며 <main> 안의 내용은 문서에서 유일해야한다. 여러 문서에서 반복적으로 사용되는 사이드바, 네비게이션, 로고, 검색 폼 등을 포함해서는 안되며 문서에 <main>은 한 개 여야 한다.

`<ul>` `<ol>` `<dl>` 의 차이점

HTML에서 목록을 표현하는 요소는? 각 요소의 차이점은?

ul(Unordered List)

순서가 없는 목록을 표현할 때 사용하며 목록 앞에 점이나 사각형 등의 도형이 붙는다. 목록의 내용은 <li> 로 만든다.

ol(Ordered List)

순서가 있는 목록을 표현할 때 사용하며 1, 2, 3... 처럼 차례대로 증가하는 번호가 붙는다. 목록의 내용은 <li> 로 만든다.

dl(Definition List)

용어와 그 뜻을 나열할 때 사용한다. 용어는 <dt> , 뜻은 <dd> 로 만든다.

참조

[HTML5] 4-1장 구조를 위한 태그