📌 <!DOCTYPE html>
DOCTYPE
: 문서의 형식을 지정하는 역할
- 웹 브라우저에게 해당 문서가 어떤 HTML 버전으로 작성되었는지 알려준다.
- DOCTYPE 선언에는 종종 DTD를 참조하는 URL이 포함된다.
- 이 URL을 통해 브라우저는 해당 DTD를 가져와 문서의 구조를 검증하고 올바른지 확인할 수 있다.
📌 DTD (Document Type Definition)
: 문서 내에서 사용할 태그를 정의하기 위한 일련의 구문 규칙
- XML 문서의 구조와 유효성을 정의하는 것
- DTD로 명시되는 규칙은 요소(element) 및 선언들의 집합이 포함
- 웹 문서 등에 대해 유효 요소(element)들을 이용해 문서 구조를 정의
🔺 XHTML DTD의 3가지 타입
- Strict 타입 : CSS를 포함하는 정형화된 마크업이 필요할 때 사용 (엄격한 모드)
- Transitional 타입 : HTML을 이용한 표현은 가능하나, CSS를 해석하지 못하는 브라우저를 지원하기 위해 사용
- Frameset 타입 : 브라우저 창을 2개 이상으로 나누는 HTML 프레임을 사용
<head>
: 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는 태그
<head> 공식 문서
<meta>
: 메타데이터를 제공하는 태그
✨ 메타데이터(Metadata)
: 일반적으로 데이터에 관한 구조화된 데이터
- 대량의 정보 가운데에서 확인하고자 하는 정보를 효율적으로 검색하기 위해 원시데이터(Raw data)를 일정한 규칙에 따라 구조화 혹은 표준화한 정보를 의미
<title>
: 웹 페이지의 제목을 나타내는 태그
<title> 공식 문서
<link>
: 현재 문서와 외부 리소스의 관계를 연결시키는 태그
<link> 공식 문서
<style>
: 문서에 대한 스타일을 설정하는 태그
- CSS 파일을 따로 생성하지 않을 시 사용
<style> 공식 문서
<base>
: 기본 경로를 설정하는 역할
- 모든 상대 URL(상대 경로)들이 기준이 되는 URL을 설정하는 데 사용된다.
- 이 태그를 사용하면 웹 페이지에서의 모든 상대 경로들이 설정된 기준 URL을 기준으로 결정된다.
- 웹 페이지의 기본 경로를 설정하는 데 유용하다.
만약 기본 URL을 "https://www.example.com/"으로 설정하고 페이지 내에서 이미지의 상대 경로를 사용한다면,
<base> 태그를 사용하여 모든 이미지가 "https://www.example.com/"을 기준으로 하도록 할 수 있다.
👉 이미지의 URL => "https://www.example.com/images/example.jpg"로 해석된다.
<!DOCTYPE html>
<html>
<head>
<base href="https://www.example.com/">
</head>
<body>
<img src="images/example.jpg" alt="Example Image">
</body>
</html>
<head>
<base target="_blank" href="./favicon/" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<head/>
<base> 공식 문서
* favicon(favorite icon)
: 웹사이트나 애플리케이션의 아이덴티티를 대표하는 이미지
HTML 배치 구조
<header>
: 제목 태그
- 제목, 로고, 검색창, 작성자 이름 등의 요소를 포함
<header> 공식 문서
<nav>
: 다른 페이지로의 링크를 보여주는 구획
- 메뉴, 목차 등의 메뉴
- <ul>, <li>, <a> 요소 함께 사용
<nav> 공식 문서
<main>
: <body>의 주요 콘텐츠 영역
- 문서의 핵심 주제, 핵심 기능을 가진 콘텐
- 반드시 웹 페이지 안에 1개만 존재해야 한다!
<main> 공식 문서
<aside>
: 간접적 내용(부가 정보)을 넣는 태그
- 사이드바 (같지만 사이드바 자체는 아님)
- 해당 정보가 없어도 <main>에는 영향이 없는 내용을 넣는다.
<aside> 공식 문서
* <main>과 <aside>를 <div>로 묶어놓는 구조가 편하다!
[구분]
<section>
: 장이나 절로 구분할 수 있는 독립적인 컨텐츠 영역
- 제목 <header>을 포함하는게 좋다.
- <section> 안에 <section>, <header>, <footer> 등을 넣을 수 있다.
<article>
: 독립된 온전한 컨텐츠 블록
- 기사, 포스팅 등
- 제목 <header>을 포함하는게 좋다.
<article> 공식 문서
* <section>과 <article>을 구분하는 것에 너무 신경쓰지 말기
<footer>
: 문서의 꼬리말 영역
- 작성자, 저작권 정보, 이용약관, 개인 정보 처리 방침, 관련 문서 등
<footer> 공식 문서
[주소]
<address>
: 연락 가능한 정보를 넣는 태그
- <footer>에 사용하는 태그
- 본문 <main>에 나오면 안됨 ❌
<small>
: 덧붙임 글이나 저작권, 법률 등을 표기하는 작은 텍스트
See the Pen Untitled by nadia kwon (@nadia-kwon) on CodePen.
✨ aria-hidden="true"
: 스크린 리더의 대상에서 제외하는 코드
- 꾸미기 위한 태그, 의미 없는 태그에 부여
[목록]
<ul>
: 비순차 목록 (Unordered List, 순서 X)
- 자식 요소로 <li> 태그만 허용
- 하나 이상의 <li>가 꼭 있어야 함
- 내용은 <li> 태그 안에 넣어야 함
See the Pen ul by nadia kwon (@nadia-kwon) on CodePen.
<ol>
: 순차 목록 (Ordered List, 순서 O)
See the Pen ol by nadia kwon (@nadia-kwon) on CodePen
<li>
: 목록 항목 (List Item)
* 목록 중첩 (Nesting)
- 잘못된 중첩 형식으로 만들지 않도록 주의해야 함
- 에러 안나니까 주의!
- 잘못된 중첩 ❌
<h2>비순서형 목록</h2>
<ul>
<li>목록1</li>
<ul>
<li>서브목록1</li>
<li>서브목록2</li>
</ul>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
</ul>
- 잘 된 중첩 ⭕
<h2>비순서형 목록</h2>
<ul>
<li>
목록1
<ul>
<li>서브목록1</li>
<li>서브목록2</li>
</ul>
</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
</ul>
[설명 목록]
<dl>
: 설명 목록 (Definition List)
- 자식 요소로 <dt>, <dd>, (<dt>와 <dd>를 묶는) <div> 태그만 허용
❗<dl> 요소 내에 <dt>와 <dd>을 그룹핑한 <div>와 <dt>와 <dd> 요소는 서로 형제 관계로 존재할 수 없다.
See the Pen dlllll by nadia kwon (@nadia-kwon) on CodePen.
- 주종 관계가 성립될 때에도 사용함
HTML 5.2 변경점 제대로 이해하기 - The Tracks of mulder21c
HTML 5.2 Changes 중에서 가장 쉽게 오해할 수 있는 내용이 담긴 The following constructions are now valid HTML의 내용에 대해서 제대로 톺아보려 한다.
mulder21c.io
<dt>
: 설명 용어
<dd>
: 설명 세부정보
See the Pen dd by nadia kwon (@nadia-kwon) on CodePen.
[컨테이닝]
<div>
: 레이아웃을 만들거나 콘텐츠를 나누는(division) 컨테이너
- 블럭 요소(Block Element)
- 의미 없음 ❌
- 선형화 구조
- <div>가 정보 전달에 부족함이 있다면 WAI-ARIA를 사용하기
<span>
: 컨텐츠 크기만큼 감싸는 태그
- 인라인 요소(Inline Element)
- 아이콘 사용할 때 자주 사용
- <span> 태그끼리 줄바꿈하면 <span> 태그 안의 내용이 떨어져서 보임
- 줄바꿈 ⭕
See the Pen 띄어쓰기 by nadia kwon (@nadia-kwon) on CodePen
- 줄바꿈 ❌
See the Pen Untitled by nadia kwon (@nadia-kwon) on CodePen
[이미지]
<img>
: 이미지 삽입
- scr 속성 : 경로
- - "./파일명/이미지명"으로 설정
- loading 속성 : 로딩 속성
- - lazy: 지연 로딩
웹 페이지에 포함된 이미지가 웹 브라우저 뷰포트 안에 표시되기 시작하는 시점에 로딩(네트워크를 통해 이미지를 가져옴)하는 기법
이미지 갯수가 많거나 용량이 큰 이미지를 로딩해야 하는 경우에 유용! 👉 웹 성능 최적 - - eager: 이미지가 뷰포트 내에 위치하는지 여부와 무관하게 이미지를 즉시 로드 (기본값)
- alt 속성 : 이미지를 텍스트로 대체하는 정보
- 필수 속성 (생략 X)
- 이미지를 텍스트로 대체하는 시멘틱 요소 - usemap 속성: <map> 태그 사용 시 <map> 태그와 <img> 태그를 연결해주는 속성 (보통 id(#id) 사용)
<img src="images/sns.png" usemap="#image-map" />
<map id="image-map"> ... <map/>
<!-- 제목 역할의 로고 -->
<h1>
<img src="./images/webcafe-logo.png" alt="웹 카페" />
</h1>
# alt를 사용해야 하는 이유
<picture>
: <img> 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용
- 반드시 내부에 <img> 태그가 있어야 한다❗
- <source />는 생략 가능 O
<source />
: 해당 확장자로 다운/재생이 불가능할 경우 대체물을 지정해두는 것
- 브라우저는 <source> 요소 중에서 해당 뷰포트와 가장 잘 어울리는 <source> 요소를 선택
- media 속성: <picture> 요소에서 리소스의 용도에 맞는 매체의 미디어 쿼리를 명시하는 속성
- srcset 속성: 브라우저에 사용할 이미지들과 그 이미지들의 원본 크기를 지정하는 속성
(srcset은 경로 자동 완성이 안되기 때문에 scr로 경로 찾고 scrset으로 수정하기)
원본 크기: w / x 단위 사용
- w: 이미지의 원본 너비
(ex. 400 x 300px => w 값: 400w) - x: 이미지의 배율 정도
- w: 이미지의 원본 너비
<img scrset="images1 400w, images2 700w" scr="images3" alt="사진" />
-> 뷰포트 너비가 400px 이하일 때는 images1, 401~700px일 때는 images2, scrset를 지원하지 않을 때는 images3 사용
✨ 디바이스의 밀도 알아내는 방법
1. 개발자 도구 ➡ console에 devicePixelRatio
2. 현재 디바이스의 밀도를 알려주는 사이트
Mydevice
mydevice.io : web devices capabilities
Mobile devices, in Responsive Web Design, relate to a core value which is the value of CSS width or ("device-width"), in CSS Device Independant Pixels, which depends both of the browser and user zoom settings. Find any device viewport size on Yesviz.com
www.mydevice.io
[비디오]
<video>
: 영상을 삽입하는 태그
- poster 속성: 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소 (썸네일)
- controls 속성: 영상 컨트롤러 제공
- autoplay 속성: 영상 자동재생
- autoplay를 사용하려면 반드시 muted를 함께 부여해야 한다❗
- => 웹 접근성 측면에서 스크린 리더가 인식해야 하기 때문!
- muted 속성: 영상 음소거
<video class="fullsize" poster="video/poster.jpg ">
<source src="video/google-developer-stories.mp4" type="video/mp4" />
<source src="video/google-developer-stories.mov" type="video/mov" />
<source src="video/google-developer-stories.ogg" type="video/ogg" />
<source src="video/google-developer-stories.webm" type="video/webm" />
</video><video> 공식 문서
<track>
: <audio>나 <video> 요소와 같은 미디어 요소를 위한 텍스트 트랙을 정의할 때 사용
- 자막 파일, 캡션 파일, 미디어가 재생되는 동안 화면에 보일 텍스트를 포함한 파일 등을 명시
<video class="fullsize" poster="video/poster.jpg " controls autoplay>
<source src="video/google-developer-stories.mp4" type="video/mp4" />
<source src="video/google-developer-stories.mov" type="video/mov" />
<source src="video/google-developer-stories.ogg" type="video/ogg" />
<source src="video/google-developer-stories.webm" type="video/webm" />
<track
src="video/google-developer-stories-subtitles-en.vtt"
kind="captions"
srclang="en"
label="English Caption"/> <track> 공식 문서
<iframe>
: 웹 페이지 안에 또 다른 웹 페이지를 삽입하는 태그
- inline frame
- 프레임의 규격이 정해져 있음
- 유튜브 영상, 지도 등
- aria-label 속성으로 영상 제목 부여
- 어떤 영상인 지 알 수 있도록 제목을 제대로 적어줘야 함 👉 웹 접근성 향상
- title 속성도 가능하지만 aria-label 속성을 사용하는 것이 더 좋음
✨ aria-label
: 화면에 현재 요소를 설명할 텍스트가 없을 경우 사용하는 설명용 텍스트를 넣는 요소
aria-labelledby
: 화면에 현재 요소를 설명할 텍스트가 있을 경우 해당 텍스트 영역과 요소를 연결하는 요소
[지도]
<map>
: 이미지 맵을 만드는 태그
- <img> 태그의 usemap 속성을 통해 <img> 태그와 연결할 수 있다.
- alt, title, target, href 등의 속성들이 있다.
- coords 속성: 이미지 맵의 각 영역의 좌표를 지정하는 속성
- shape 속성: 이미지 맵의 클릭가능한 영역의 모양을 지정하는 속성
* 이미지 맵
: 하나의 이미지 안에 여러 개의 링크를 지정할 수 있게 하는 HTML 기술
<area>
: 이미지 맵의 클릭할 수 있는 영역을 정의
<img src="images/sns.png" usemap="#image-map" />
<map id="image-map">
<area
target="_blank"
alt="페이스북"
title="페이스북"
href="https://www.facebook.com/"
coords="15,15,14"
shape="circle"
/>
<area
target="_blank"
alt="인스타그램"
title="인스타그램"
href="https://www.instagram.com/"
coords="65,15,14"
shape="circle"
/>
<area
target="_blank"
alt="유튜브"
title="유튜브"
href="https://www.youtube.com/"
coords="115,15,14"
shape="circle"
/>
</map>
[링크]
<a>
: URL로 연결할 수 있는 하이퍼링크를 부여하는 태그
- href 속성: 하이퍼링크의 주소, 참조할 id/class 부여(#id / .class)
- 연락처 연결 가능
- `mailto:메일 주소?subject=제목` : 메일 연결 + 메일 제목 할당
<a href="mailto:contact@likelion.net?subject=문의사항">contact@likelion.net</a>
- download 속성: href가 가리키는 리소스를 다운로드 하는 속성
- target 속성: URL을 열 방법을 정하는 속성
- _self: 현재 창에서 열기
- _blank: 새 탭에서 열기
- _parent: 현재 브라우징 맥락의 부모에 표시
- 부모가 존재하지 않으면 _self와 동일하게 행동
- _top: 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시
부모가 존재하지 않으면 _self와 동일하게 행동
✨ target 사용 시 rel="noreferrer"를 추가해서 window.opener API의 악의적인 사용을 방지해야 한다!
<a> 공식 문서
[표]
<table>
: 표를 제작하는 태그
- 행(row): 가로 / 열(column): 세로
- colspan: 세로 셀 병합
colspan="4"; - rowspan: 가로 셀 병합
<tr>
: 행
<th>
: 셀 제목
- scope 속성: 해당 행 방향의 범위 (시멘틱 요소)
- row: 해당 셀은 행(row) 방향이라고 알려줌
- col: 해당 셀은 열(column) 방향이라고 알려줌
<td>
: 셀 내용
- headers 속성: 셀의 제목들
<tr>
<th id="ko">국어</th>
<th id="en">영어</th>
<th id="math">수학</th>
</tr>
<tr>
<th id="student1">홍길동</th>
<td headers="student1 ko">80</td>
<td headers="student1 en">70</td>
<td headders="student1 math">90</td>
</tr>
<thead>
: 테이블 제목 행
<tbody>
: 테이블 본문 행
<tfoot>
: 테이블 바닥글 행
- 해당 행이 자동으로 테이블 바닥으로 내려감
See the Pen table by nadia kwon (@nadia-kwon) on CodePen.
<table> 공식 문서
* 테이블 관련 예제 참고
Tables Tutorial
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).
www.w3.org
[폼]
<form>
: 사용자 정보를 입력 받는 틀
- action 속성: 폼의 입력값을 전달할 서버 URL
- method 속성: 폼에서 서버로 데이터를 전송할 방식을 설정
- GET: 받아옴
- POST: 보냄, 수행함
<form action="https://formspree.io/seulbinim@gmail.com" method="POST" class="search-form">
<fieldset>
: 연관성 있는 <form> 태그의 서식을 묶는 용도
- 생략 가능 O
- <div>와 비슷
<label>
: 사용자 인터페이스 항목의 설명을 넣는 태그
- 모든 <form> 태그는 각각 대응되는 <label> 태그를 가져야 한다❗
- for 속성: 입력창이 어떤 입력창인지 <input> 태그와 연결하는 속성
See the Pen Untitled by nadia kwon (@nadia-kwon) on CodePen.
[입력]
<input>
: 사용자에게 입력을 받을 수 있는 태그
- required 속성: 필수 입력임을 나타내는 속성
- placeholder 속성: 입력 값에 대한 힌트
- type 속성: 입력창 종류
* type 종류 정리
Web Forms 2.0 test page
Notes: All tested on OSX 10.6.1. Obviously I've left out most of the standard, and therefore boring, inputs. Currently, this page is only interesting in Opera 9.60+ (earlier?) 9.0+ (thanks @FataL), and partially-so in Safari 3+ / Chrome. Safari / Chrome: a
www.miketaylr.com
<select>
: 드롭다운 메뉴(drop-down menu)
- <option> 태그와 함께 사용
<option>
: 드롭다운 리스트(drop-down list)
- <select> 태그와 함께 사용
See the Pen select by nadia kwon (@nadia-kwon) on CodePen
<textarea>
: 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역
- 문의사항, 요청사항 등
See the Pen textarea by nadia kwon (@nadia-kwon) on CodePen.
[인터렉티브(Interactive)]
: 사용자와 상호작용을 할 수 있도록 제공하는 요소
<dialog>
: 모달창
- open 속성: 화면에 보이게 하는 속성
<details>
: 사용자가 선택하여 열고 닫을 수 있는 콘텐츠를 정의하는 태그
- 토글(toggle) 기능
- open 속성: 화면에 보이게 하는 속성
<summary>
: 요약된 정보를 넣는 태그
- 대화형 위젯에서 기본적으로 보이는 제목을 정의할 때 사용
See the Pen 아코디언 by nadia kwon (@nadia-kwon) on CodePen.
[유저 인터렉션 속성]
: 사용자와 상호작용 할 수 있도록 만들어 주는 속성
hidden
: 숨기는 속성
accesskey
: 단축키를 부여하는 속성
- Alt + <부여한 Key>
<button type="button" class="voting-result-button" accesskey="P">
-> alt + P를 누르면 버튼이 열림
tabindex
: 포커스를 받을 수 없는 요소에 포커스를 주는 속성
- 포커스를 받을 수 없는 요소: <div>
- 0보다 큰 수: 포커스 O
- 0보다 작은 수: 포커스 X
contenteditable
: 유저가 편집할 수 있는 속성
draggable
: 드래그(darg) 가능 여부를 설정하는 속성
- true: 드래그 가능
- false: 드래그 불가능
[인용]
<blockquote>
: 인용문을 넣는 태그
<cite>
: 저작물 이름, 출처를 나타내는 태그
- 도서 제목, 웹사이트 또는 TV 프로그램의 이름, 컴퓨터 프로그램의 이름 등
- 기울임체
See the Pen Untitled by nadia kwon (@nadia-kwon) on CodePen.
[어휘]
<em>
: 기울임체
- 텍스트 강조
- 주관적인 강조 (<strong>보다 약함)
<strong>
: 볼드체
- 텍스트 강조
<b>
: 볼드체
- 주변 컨텐츠와 구분할 목적
<i>
: 기울임체
- 주변 컨텐츠와 구분할 목적
- <b>와 <i>는 <em>, <strong>과 모양은 비슷하지만 사용 목적이 다르다.
See the Pen 어휘 by nadia kwon (@nadia-kwon) on CodePen.
❗HTML에서 특수문자를 사용할 때!
⏩ ntt code로 사용하기
✨ Entity Code (ntt code)
: HTML에 본문에 바로 쓸 수 없는 특수한 문자
<미생> 👉 <미생>
HTML 특수문자 코드표 정리
[HTML] HTML 특수문자 코드표 정리
# [HTML] HTML 특수문자 코드표 정리 표현문자숫자표현문자표현설명-�--사용하지 않음space -수평탭space -줄 삽입- - -사용하지 않음space -여백!!-느낌표"""따옴표##-숫자기호$$-달러%%-백분율 기호&&&Ampe
postitforhooney.tistory.com
[텍스트]
<sub>
: 글자 아래에 붙이는 기능
- O2
<sup>
: 글자 위에 붙이는 기능
- 2의 제곱
<mark>
: 하이라이트 기능
<time>
: 날짜 정보임을 알려주는 기능
- datetime 속성: 시스템이 인식할 수 있는 날짜 체계 시스템 (시멘틱 요소)
- 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있다.
<abbr>
: 약어나 줄임말을 나타내는 태그
- title 속성: 요소에 마우스 오버(over) 시 보충 설명을 보여준다.
<s>
: 취소선
See the Pen 텍스트 by nadia kwon (@nadia-kwon) on CodePen.
<del>
: 제거된 텍스트의 범위 (취소선)
- 문서나 소스 코드의 변경점 추적 등에 사용할 수 있다.
- 할인 가격 표시할 때 사용
<ins>
: 추가된 텍스트의 범위
See the Pen Untitled by nadia kwon (@nadia-kwon) on CodePen.
<p>
: 제목에 대한 설명/단락 역할
<figure>
: 캡션을 가질 수 있는 정보의 그룹
<figcaption>
: 부모 <figure> 요소가 포함하는 다른 콘텐츠에 대한 설명
<figure>
<img src="./images/likelion-black.png" alt="" />
<figcaption>멋쟁이 사자처럼</figcaption>
</figure>
<figure>
<img src="images/rwd.jpg" alt="" />
<figcaption>
<p>
<strong>Responsive Web<br />Design Strategies</strong>
<span>반응형 웹디자인 전략</span>
</p>
<a href="/">강의정보</a>
</figcaption>
</figure>
<hr />
: 컨텐츠의 내용이 다를 때 구분을 위해 사용하는 태그
- 줄바꿈
[스크립팅]
<script>
: 데이터와 실행 가능한 코드를 문서에 포함할 때 사용
- </body> 태그 바로 위에 넣는게 좋음
<script> 태그가 위에 있으면 파싱을 멈추기 때문 - <head> 태그 안에 넣으려면 defer / type="module"을 설정해야 함
<noscript>
: Javascript를 지원하지 않은 환경에서 실
async vs defer attributes
The async and defer attributes for the <script> element have great support now, so it’s time to learn exactly what they do!
www.growingwiththeweb.com
참고
DTD
DTD Document Type Definition 문서 유형 정의, 문서 타입 정의(2008-01-12)
www.ktword.co.kr
[HTML/CSS] 이미지 크기 설정
#HTML #WEB #CSS #picture #srcset #2019_09_04 img 태그의 srcset 속성 - 반응형 웹에서 이미지...
blog.naver.com
HTML IMG의 srcset과 sizes 속성(updated)
HTML IMG의 srcset과 sizes를 통해 반응형 이미지를 제공하는 방법에 대해서 알아봅시다!
heropy.blog