-
가깝고도 먼 HTML개발/Front-end 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>로 레이아웃을 만들지 않아도 된다.
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
<footer>는 페이지를 만든 사람, 저작권 정보, 연관된 컨텐츠에 대한 링크, 블로그 포스트 작성자, 발행일시 등에 쓰인다. 이 요소는 가장 가까운 섹션의 푸터를 의미한다. 작성자의 연락처는 footer 안의<address>로 표현, 저작권은<small>로 표현한다.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>로 만든다.참조
'개발 > Front-end' 카테고리의 다른 글
DOM API란? (0) 2021.08.02 SSR vs CSR vs SPA (0) 2021.08.02 CORS란? (0) 2021.08.02 부트스트랩의 sr-only 클래스가 하는 일 (0) 2021.08.02 GraphQL 알아보기 (0) 2021.08.02