νλ‘ νΈμλ 체ν¬λ¦¬μ€νΈλ λΉμ μ HTML μ¬μ΄νΈ λλ νμ΄μ§λ₯Ό νλ‘λμ μΌλ‘ λ°μΉνκΈ° μ΄μ μ κ°μ§κ³ μμ΄μΌ ν , λν ν μ€νΈ λμ΄μΌ ν μ λ°μ μΈ μμλ€μ μ§ν©μ λλ€. μ΄ λ¦¬μ€νΈλ λ€λ κ°μ νλ‘ νΈμλ κ°λ°μλ€μ κ²½νμΌλ‘ μμ±λμμΌλ©°, λͺλͺ ν μ€νμμ€ μ²΄ν¬λ¦¬μ€νΈλ€μ μ°Έκ³ λ₯Ό ν΅ν΄ μΆκ°λμμ΅λλ€.
Product Huntμ μΆμ²κ³Ό ν¬νλ₯Ό ν΅ν΄ νλ‘ νΈμλ 체ν¬λ¦¬μ€νΈλ₯Ό λ리 μ리λλ° λμμ μ£ΌμΈμ
νλ‘ νΈμλ 체ν¬λ¦¬μ€νΈμ μν΄μλ λͺ¨λ νλͺ©λ€μ λλ€μμ νλ‘μ νΈμμ νμλ‘ νλ μ¬νλ€μ΄μ§λ§, λͺλͺ μμλ€μ μλ΅λκ±°λ νμμ μ΄ μλ μλ μμ΅λλ€(μλ₯Ό λ€λ©΄ κ΄λ¦¬ν μΉ μ΄ν리μΌμ΄μ μ κ²½μ° RSS νΌλλ νμ μμ κ²μ λλ€). μ°λ¦¬λ λ°λΌμ κ°κ°μ νλͺ©λ€μ 3κ°μ§μ κΈ°μ€μΌλ‘ ꡬλΆνμμ΅λλ€:
- μ κ²½μ° ν΄λΉ νλͺ©μ΄ κΆμ λμ§λ§, λͺλͺ νΉμ ν μν©μμλ μλ΅λ μλ μμ΅λλ€.
- μ κ²½μ° ν΄λΉ νλͺ©μ΄ κΆκ³ λμ§λ§, κ΅μ₯ν νΉμ ν μν©μμλ κ²°κ΅ μλ΅μ΄ λ μλ μμ΅λλ€. λͺλͺ μμμ κ²½μ°, μλ΅ μ μ±λ₯μ΄λ SEO μΈ‘λ©΄μμ μ μ’μ μν₯μ λΌμΉ μλ μμ΅λλ€.
- μ κ²½μ° ν΄λΉ νλͺ©μ μ΄λ ν μν©μμλΌλ μλ΅λ μ μμ΅λλ€. μ΄λ₯Ό μλ΅νκ² λλ©΄ λΉμ μ νμ΄μ§λ μ€λμνκ±°λ μ κ·Ό, λλ SEOμ λ¬Έμ κ° λ°μν κ²μ λλ€. μ΄λ¬ν μμλ€μ λν΄μ μ°μ μ μΌλ‘ ν μ€νΈ νμκΈ° λ°λλλ€.
λͺλͺ μΆκ° λ΄μ©λ€μ κ·Έκ²λ€μ΄ μ΄λ ν μ’ λ₯μ λ΄μ©μΈμ§ μ΄ν΄νλλ°μ λμμ μ£ΌκΈ° μνμ¬ μ΄λͺ¨ν°μ½μ μΆκ°νμμ΅λλ€. μ΄λ‘ μΈν΄ 체ν¬λ¦¬μ€νΈμμ ν΄λΉ νλͺ©λ€μ μ΄ν΄νλ λ°μ λμμ΄ λ κ²μ λλ€:
- π: λ¬Έμ λλ κΈ°μ¬
- π : μ¨λΌμΈ λꡬ / ν μ€νΈ λꡬ
- πΉ: λ―Έλμ΄ λλ λΉλμ€ μ»¨ν μΈ
λ ΈνΈ: a list of everything μμ HTML λ¬Έμ λ΄μ
<head>
μμ μ¬μ©ν μ μλ λͺ¨λ κ²μ μ°Ύμλ³΄μ€ μ μμ΅λλ€.
<!-- Doctype HTML5 -->
<!doctype html>
λ€μ 3κ°μ λ©ν νκ·Έ(Charset, X-UA Compatible and Viewport)λ€μ λ€λ₯Έ μμλ€μ λΉν΄ head μμμλ μλ¨μ μμΉν΄μΌλ§ ν©λλ€.
<!-- μ΄ λ¬Έμμ λν λ¬Έμ μΈμ½λ©μ μ€μ -->
<meta charset="utf-8">
<!-- Internet Explorerμκ² μ΅μ μ λ λλ§ μμ§μ μ¬μ©νλΌκ³ μ§μ -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- λ°μν μΉ λμμΈμ μν Viewport μ€μ -->
<meta name="viewport" content="width=device-width, initial-scale=1">
- Title: λͺ¨λ νμ΄μ§μ titleμ΄ μ¬μ©λ¨ (SEO κ°μ΄λ: μΉμ¬μ΄νΈμ νμ΄νμ ν¬ν¨νμ¬ 65κ° μ΄νμ λ¬Έμλ‘ κ΅¬μ±νκΈ°)
<!-- λ¬Έμμ Title -->
<title>55κ° μ΄νμ λ¬Έμλ‘ κ΅¬μ±λ νμ΄μ§ μ λͺ©</title>
- π Title - HTML - MDN
- π SERP Snippet Generator
- Description: descriptionμ΄ μ λλ‘ κΈ°μ¬λ¨ (μ€λͺ κ°μ κ³ μ ν΄μΌ νλ©°, 150κ° μ΄νμ λ¬Έμλ‘ κ΅¬μ±λμ΄μΌ ν¨)
<!-- Meta Description -->
<meta name="description" content="νμ΄μ§μ λν μ€λͺ
(150κ° μ΄νμ λ¬Έμ)">
- Favicons: κ°κ°μ faviconμ΄ μ λλ‘ μμ±λμκ³ μ¬λ°λ₯΄κ² 보μ¬μ§λκ°? λ§μ½
favicon.ico
νμΌλ§ κ°μ§κ³ μλ€λ©΄, ν΄λΉ λ΄μ©μ νμ΄μ§μ μλ¨λΆμ μΆκ°νλΌ. μΌλ°μ μΌλ‘λ ν΄λΉ νκ·Έλ₯Ό μ¬μ©ν νμλ μμ§λ§, μλμ μμλ₯Ό ν¬ν¨νλ κ²μ΄ μ’μ μ΅κ΄μ. μ€λλ μλ.ico
ν¬λ§·λ³΄λ€ PNG ν¬λ§·μ μμ΄μ½ μ¬μ©μ μΆμ²ν¨(ν¬κΈ°: 32x32px).
<!-- νμ€ favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- μΆμ² favicon ν¬λ§· -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
- Apple ν°μΉ μμ΄μ½: μμ΄ν°μ λͺ¨λ°μΌ μΉ μ΄ν리μΌμ΄μ μ μμ΄μ½μΌλ‘ μ¬μ©λλ faviconμ μ€μ ν΄μ£Όλ apple-touch-icon μμ±μ μ¬μ©ν¨ (μ΅μν 200x200pxμ ν¬κΈ°λ‘ Apple μμ΄μ½μ μμ±νλ©΄, νμν λͺ¨λ ν¬κΈ°μ μμ΄μ½μ μ§μν μ μμ)
<!-- Apple ν°μΉ μμ΄μ½ -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- Microsoft νμΌ -->
<meta name="msapplication-config" content="browserconfig.xml" />
browserconfig.xml νμΌμμ μ¬μ©λλ μ΅μνμ XML λ΄μ©μ λ€μκ³Ό κ°μ΅λλ€:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>
<!-- 컨ν
μΈ κ° μ€λ³΅λλ λ¬Έμ λ₯Ό λ°©μ§νλλ° λμμ΄ λ¨ -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">
<html lang="ko">
- κΈμ λ°©ν₯ μμ±: κΈμλ€μ λ°©ν₯μ΄ μ λλ‘ μ€μ λ¨ (μ°λ¦¬λλΌμμλ μ’μμ μ°λ‘ κΈμ¨λ₯Ό μ½κ³ μ°μ§λ§ λͺλͺ λλΌμμλ μ°μμ μ’λ‘ μ½κ³ μ°λ κ²½μ°λ μμ)
<!-- rtl: right to left -->
<html dir="rtl">
- π dir - HTML - MDN
- λ체 μΈμ΄: νμ¬ νμ΄μ§λ₯Ό μΈμ΄μ λ§κ² λ체ν μ μλ νκ·Έ μμ± κ°μ μ¬μ©ν¨
<link rel="alternate" href="https://en.example.com/" hreflang="en">
-
RSS νΌλ: λ§μΌ νμ΄μ§κ° λΈλ‘κ·Έμ΄κ±°λ κΈ°μ¬κ° μλ€λ©΄, RSS λ§ν¬μ λν΄ νμΈνμμ€
-
μΈλΌμΈ CSS Critical: νμ΄μ§κ° λ‘λ©λλ μ¦μ(νΌμ³μ§λ κ·Έ μκ°) 컨ν μΈ μ μν₯μ λΌμΉλ CSSλ₯Ό "critical CSS" λΌκ³ ν¨. μ΄λ λΉμ μ μ€μ§μ μΈ μ΄ν리μΌμ΄μ μ CSS κ° λ‘λ©λκΈ° μ΄μ μ
<style></style>
νκ·Έ μ¬μ΄μ μ΅μν λ μνλ‘ ν μ€λ‘ μΆκ°λμ΄ μλ² λ© λ¨
- π Critical by Addy Osmani on Github μ΄ λ ν¬λ CSS Criticalμ μλν νλλ°μ λμμ μ€λλ€.
- CSSμ μμ: λͺ¨λ CSS νμΌμ΄
<head>
λ΄μμ μλ°μ€ν¬λ¦½νΈ νμΌλ³΄λ€ μ΄μ μ λ‘λ©μ΄ μλ£λ¨ (μλ°μ€ν¬λ¦½νΈ νμΌμ΄ λΉλκΈ°μ μΌλ‘ λ‘λ©λλ νΉμ ν κ²½μ°λ μ μΈν¨).
Facebookμ OG μ Twitter Cards λ₯Ό μ¬μ©νλ κ²μ μ΄λ ν μΉμ¬μ΄νΈλ μ§κ°μ κΆκ³ λ©λλ€. ν μμ λ―Έλμ΄μ νκ·Έλ νΉμ νκ² κ·Έλ€μ λμμΌλ‘ νμ΄μ§λ₯Ό λ ΈμΆ νλ €λ κ²½μ°μλ κ³ λ €ν΄ λ³Ό μ μμ΅λλ€.
- Facebook Open Graph: λͺ¨λ Facebookμ Open Graph (OG) κ° ν μ€νΈ λμμΌλ©°, κ·Έκ²λ€ μ€μ λλ½λ μ 보λ μλͺ»λ μ 보λ₯Ό κ°μ§κ³ μμ§λ μλ? (μ΄λ―Έμ§μ κ²½μ° μ΅μν 600 x 315 ν½μ μ λμ΄μΌ νλ©°, 1200 x 630 ν½μ ν¬κΈ°λ₯Ό κΆμ₯ν¨)
Notes: Using use
og:image:width
andog:image:height
will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- λ€μμ νκ·Έλ νμλ μλμ§λ§, ν¬ν¨νλ κ²μ μΆμ²ν¨ -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- π μΉλ§μ€ν°λ₯Ό μν μμ΄λ§ κ°μ΄λ
- π μμ΄λ§ - λͺ¨λ² μ¬λ‘
- π Facebook OG testing λꡬλ₯Ό μ΄μ©νμ¬ λΉμ μ νμ΄μ§ ν μ€νΈνκΈ°
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
- π Twitter cards μμνκΈ° β Twitter Developers
- π Twitter card κ²μ¬κΈ° λꡬλ₯Ό μ΄μ©νμ¬ λΉμ μ νμ΄μ§ ν μ€νΈνκΈ°
- HTML5 μλ§¨ν± μ리먼νΈ: HTML5μ μλ§¨ν± μ리먼νΈλ€μ΄ μ μ ν μ¬μ©λ¨ (header, section, footer, main... λ±).
- π HTML λ νΌλ°μ€
-
μλ¬ νμ΄μ§: μλ¬λ₯Ό μν 404 νμ΄μ§μ 5xx νμ΄μ§κ° μ‘΄μ¬νλκ°? 5xx νμ΄μ§λ μλ²λ‘λΆν°μ λ°μ΄ν°λ₯Ό μ μ‘λ°μ§ μκ³ λ 립μ μΈ μ체 CSSλ₯Ό ν¬ν¨νκ³ μμ΄μΌ ν¨μ κΈ°μ΅νλΌ (5xx μλ¬λ μλ² μλ¬μ΄λ―λ‘!).
-
Noopener: μΈλΆ λ§ν¬λ₯Ό
target="_blank"
λ₯Ό μ΄μ©νμ¬ μ° κ²½μ°, tab nabbing νΌμ± 곡격μ λ°©μ§νκΈ° μνμ¬rel="noopener"
μμ±μ μ¬μ©ν΄μΌλ§ νλ€. λ§μ½ Firefox μ λ²μ μ μ§μν΄μΌλ§ νλ€λ©΄,rel="noopener noreferrer"
μ μ¬μ©νλΌ.
- μ£Όμ μ§μ°κΈ°: μΉμ¬μ΄νΈλ₯Ό νλ‘λμ νκΈ° μ΄μ μ λΆνμν μ½λλ μ κ±°νμλμ§, μ£Όμμ μ κ±°νμλμ§ μ κ²νλΌ
- W3C κ·κ²©: λͺ¨λ νμ΄μ§λ HTML μ½λ λ΄μμ μΌμ΄λ μ μλ κ²½μ°λ₯Ό νμΈνκΈ° μνμ¬ W3C μ validatorλ₯Ό μ΄μ©νμ¬ ν μ€νΈ λμ΄μΌ ν¨
- π W3C κ²μ¬κΈ°
- HTML Lint: λꡬλ₯Ό μ΄μ©νμ¬ HTML μ½λ λ΄μ λ°μν μ μλ λ¬Έμ λ€μ λΆμνλλ‘ νμ
- π Dirty markup: HTML μ½λλ₯Ό μ λν΄μ£Όλ μ¨λΌμΈ λꡬ
- Link checker: νμ΄μ§ λ΄μ κΉ¨μ§ λ§ν¬λ μλμ§, 404 μλ¬κ° μ‘΄μ¬νμ§ μλμ§ λ€μ νλ² νμΈνλλ‘ ν¨
- π W3C Link Checker
- κ΄κ³ μ°¨λ¨κΈ° ν μ€νΈ: κ΄κ³ μ°¨λ¨κΈ°κ° νμ±ν λ μνμμλ 컨ν μΈ κ° μ λλ‘ λ³΄μ¬μ§ (μ¬λλ€μκ² κ΄κ³ μ°¨λ¨κΈ°λ₯Ό λΉνμ±ν ν΄λ¬λΌκ³ λ©μΈμ§λ₯Ό μ릴μλ μμ΅λλ€)
λ ΈνΈ: μΉν°νΈλ₯Ό μ¬μ©νλ©΄ μ€νμΌλ§ λμ§ μμ κΈμλ 보μ΄μ§ μλ κΈμλ€μ΄ κΉλΉ‘μΌ μ μμ΅λλ€. μ€ν¨νμ κ²½μ°λ₯Ό λλΉν λμ²΄μ© ν°νΈλ₯Ό ν¬ν¨νκ±°λ, μΉν°νΈ λ‘λλ₯Ό νμ©νμ¬ μ΄λ¬ν λμλ€μ μ μ΄νμΈμ.
-
μΉν°νΈ ν¬κΈ°: λͺ¨λ μ’ λ₯(μ΄ν€λ¦, λ³Όλ체 λ±λ±)λ₯Ό ν¬ν¨ν μΉν°νΈ ν¬κΈ°μ μ΄ ν©κ³λ 2 MBλ₯Ό λμ§ μλλ‘ ν¨
-
μΉν°νΈ λ‘λ: μΉν°νΈ λ‘λλ₯Ό μ΄μ©νμ¬ ν°νΈκ° λ‘λ©λλ λμμ μ μ΄νμμ€
λ ΈνΈ: λλ€μμ νλ‘ νΈμλ κ°λ°μλ€μ΄ λ°λ₯΄λ CSS κ°μ΄λλΌμΈκ³Ό Sass κ°μ΄λλΌμΈ μ μ΄ν΄λ³΄μΈμ. λ§μ½ λͺ¨λ₯΄λ CSS μμ± κ°μ΄ μλ€λ©΄, CSS λ νΌλ°μ€λ₯Ό μ°Έμ‘°νκΈΈ λ°λλλ€. λν CSSμ μΌκ΄μ±μ μν μ½λ κ°μ΄λλ μ½μ΄λ³΄κΈ° λ°λλλ€.
- λ°μν μΉ λμμΈ: μΉμ¬μ΄νΈκ° λ°μνμΌλ‘ λμμΈ λ¨
- CSS Print: νλ¦°ν°κ° μ¬μ©ν print μ€νμΌμνΈ κ°μ΄ μ€μ λμκ³ , κ°κ°μ νμ΄μ§λ§λ€ μ¬λ°λ₯΄κ² μ€μ λ¨
- CSS μ μ²λ¦¬κΈ°: λμμΈμ CSS μ μ²λ¦¬κΈ°λ₯Ό μ΄μ©ν¨ (μΆμ²: Sass).
- κ³ μ IDκ°: μ¬λ¬ κ°μ ID κ°μ΄ μ¬μ©λ κ²½μ°, κ°κ°μ ID κ°μ νμ΄μ§ λ΄μ κ³ μ ν΄μΌν¨
- Reset CSS: μ΅μ μ Reset CSS (reset, normalizeλ reboot) μ΄ μ¬μ©λ¨ (Bootstrapμ΄λ Foundation κ°μ CSS νλ μμν¬λ₯Ό μ¬μ©ν κ²½μ°, Normalizeκ° μ΄λ―Έ ν¬ν¨λμ΄ μμ)
- π Reset.css
- π Normalize.css
- π Reboot
- JS μ λμ¬: js-λ‘ μμνλ μλ°μ€ν¬λ¦½νΈ νμΌ λ΄μμ μ¬μ©λλ λͺ¨λ ν΄λμ€λ IDλ CSS νμΌμμ μ€νμΌλ§ λμ§ μλλ‘ ν¨
<div id="js-slider" class="my-slider">
<!-- λλ -->
<div id="id-used-by-cms" class="js-slider my-slider">
- CSS μλ² λ© λλ μΈλΌμΈ: μ΄λ ν κ²½μ°μλ CSSλ₯Ό μ§μ μλ² λ©νκ±°λ μΈλΌμΈμΌλ‘ μ¬μ©νμ§ λ§μμ€! νλΉν μ΄μ κ° μλ κ²½μ°μλ§ μ¬μ©νμμ€ (μ: μ¬λΌμ΄λ λ΄μ background-image, λλ CSS critical)
- λ²€λ ν리ν½μ€: CSS λ²€λ ν리ν½μ€λ€μ΄ μ¬μ©λμκ³ λΈλΌμ°μ μ§μ νΈνμ±μ λ°λΌ μλ§κ² μμ±λμλμ§ νμΈ
- νμΌ λ¨μΌν: CSS νμΌλ€μ΄ νλμ CSS νμΌλ‘ λ¨μΌν λμμ (HTTP/2μ κ²½μ°λ μ¬λ¬ κ°μ νμΌμ μ¬μ©νλ κ²μ΄ λ μ±λ₯μ μ’μ)
- μ΅μν: λͺ¨λ CSS νμΌλ€μ΄ μ΅μν λ¨
- Non-blocking: CSS νμΌλ€μ DOMμ΄ λ‘λ©νλλ°μ λ°©ν΄κ° λμ§ μλλ‘ λΉλκΈ°μ μΌλ‘ λ‘λ λμ΄μΌ ν¨
- π UnCSS Online π
- π PurifyCSS
- π Chrome DevTools Coverage
-
λ°μν μΉ λμμΈ: λͺ¨λ νμ΄μ§κ° λ€μ μ§μ μμ ν μ€νΈ μλ£λμμ: 320px, 768px, 1024px (κ·Έ μΈ λΉμ μ΄ νμν ν¬κΈ°μ λ°λΌ λ€λ₯Ό μ μμ)
-
CSS κ²μ¬κΈ°: CSSκ° μ λλ‘ ν μ€νΈ λμκ³ , μ€λ₯λ€μ΄ μλ§κ² μμ λμμ
- π CSS κ²μ¬κΈ°
- λ°μ€ν¬ν λΈλΌμ°μ : λͺ¨λ νμ΄μ§κ° λͺ¨λ νμ‘΄νλ λ°μ€ν¬ν λΈλΌμ°μ μμ ν μ€νΈ λ¨ (Safari, Firefox, Chrome, Internet Explorer, EDGE... λ±).
- λͺ¨λ°μΌ λΈλΌμ°μ : λͺ¨λ νμ΄μ§κ° λͺ¨λ νμ‘΄νλ λͺ¨λ°μΌ λΈλΌμ°μ μμ ν μ€νΈ λ¨ (Native browser, Chrome, Safari... λ±).
- μ΄μ체μ : λͺ¨λ νμ΄μ§κ° λͺ¨λ νμ‘΄νλ μ΄μ체μ μμ ν μ€νΈ λ¨ (Windows, Android, iOS, Mac... λ±).
- Pixel perfect: νμ΄μ§κ° Pixel perfectν μν(μλ μλνλ λμμΈλλ‘ νλ©΄μ 보μ¬μ§)μΈκ°? μ°½μλ¬Όμ λ°λΌμ 100% μ ννμ§ μμ μλ μμ§λ§, μλνλ ν νλ¦Ώμ κ°κΉμμΌ ν¨
- κΈμ λ°©ν₯: λ€κ΅μ΄λ₯Ό μ§μν΄μΌ ν κ²½μ°, κΈμ λ°©ν₯μ λ§κ² λͺ¨λ νμ΄μ§κ° μ μ λμν¨ (LTR / RTL)
λ ΈνΈ: μ΄λ―Έμ§ μ΅μ νμ μμ ν μ΄ν΄λ₯Ό μν΄μλ, Addy Osmaniκ° μ΄ λ¬΄λ£ ebook Essential Image Optimization μ νμΈνμΈμ.
- μ΅μ ν: λͺ¨λ μ΄λ―Έμ§κ° λΈλΌμ°μ μ λ λλ§ λ μ μλλ‘ μ΅μ ν λμλ? ννμ΄μ§ κ°μ΄ μ±λ₯μ΄ μ€μν νμ΄μ§μλ WebP ν¬λ§·μ μ¬μ©ν μλ μμ
- π Imagemin
- π ImageOptimλ₯Ό μ¬μ©νμ¬ λΉμ μ μ΄λ―Έμ§λ₯Ό 무λ£λ‘ μ΅μ ννμΈμ
- π Kraken.ioλ₯Ό μ¬μ©νμ¬ κΉμν png μ΄λ―Έμ§μ jpg μ΄λ―Έμ§μ μ΅μ νλ₯Ό μνν μ μμ΅λλ€. νμΌλΉ 1MBμ ν¬κΈ°μ λν΄μλ 무λ£μ λλ€
- Picture/Srcset: You use picture/srcset to provide the most appropriate image for the current viewport of the user.
- λ ν°λ λμ€νλ μ΄ μ§μ: λ ν°λ λμ€νλ μ΄λ₯Ό μ§μνκΈ° μνμ¬ λΉμ μ ν λ μ΄μμμ ν΄λΉνλ 2λ°°, λλ 3λ°° μ΄μ ν° μ΄λ―Έμ§λ₯Ό μ§μν¨
- μ΄λ―Έμ§ μ€νλΌμ΄νΈ: μμ μ΄λ―Έμ§μ κ²½μ° μ€νλΌμ΄νΈ νμΌλ‘ ꡬμ±λμ΄μ Έ μμ (μμ΄μ½μ κ²½μ°, SVG μ€νλΌμ΄νΈ μ΄λ―Έμ§ μΌ μλ μμ).
- λλΉμ λμ΄: λͺ¨λ
<img>
νκ·Έμ λλΉμ λμ΄κ° μ€μ λμμ (pxμ΄λ %λ‘ μ§μ νμ§ λ§μμ€) - λ체 ν
μ€νΈ: λͺ¨λ
<img>
νκ·Έκ° μ΄λ―Έμ§λ₯Ό μ μμ νλ λ체 ν μ€νΈλ₯Ό κ°μ§κ³ μμ (alt
μμ±μΌλ‘ λΆμ¬)
- Lazy λ‘λ©: μ΄λ―Έμ§λ€μ΄ lazy λ‘λ λ¨ (μλ°μ€ν¬λ¦½νΈ λ―Έμ§μμ λν μμΈμ²λ¦¬κ° νμ μ 곡 λμ΄μΌ ν¨)
- μΈλΌμΈ μλ°μ€ν¬λ¦½νΈ: HTML μ½λμ μμ΄ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό μΈλΌμΈμΌλ‘ ν¬ν¨νμ§ μλλ‘ νμμ€
- νμΌ λ¨μΌν: μλ°μ€ν¬λ¦½νΈ νμΌλ€μ΄ νλμ μλ°μ€ν¬λ¦½νΈ νμΌλ‘ λ¨μΌν λμμ
- μ΅μν: λͺ¨λ μλ°μ€ν¬λ¦½νΈ νμΌμ΄ μ΅μν λμμ(λ€μ
.min
μ λ―Έμ¬λ₯Ό λΆμ΄λ κ²μ μΆμ²)
- μλ°μ€ν¬λ¦½νΈ 보μ:
- Non-blocking: JavaScript νμΌλ€μ
async
μdefer
μμ±κ°μ μ΄μ©νμ¬ λΉλκΈ°μ μΌλ‘ λ‘λ λμ΄μΌ ν¨
- Modernizr: νΉμ ν κΈ°λ₯μ μ§μΉνκ³ μΆλ€λ©΄, 컀μ€ν°λ§μ΄μ§ λ Modernizrλ₯Ό μ΄μ©νμ¬
<html>
νκ·Έ λ΄μ ν΄λμ€λ€μ μΆκ°ν μ μμ
- HTTPS: νμ΄μ§ λ΄μ μ‘΄μ¬νλ λͺ¨λ μΈλΆ 컨ν μΈ (νλ¬κ·ΈμΈ, μ΄λ―Έμ§...)μ λν΄μλ HTTPS κ° μ¬μ©λμμ.
- HTTP Strict Transport Security (HSTS): HTTP ν€λ κ°μΌλ‘ 'Strict-Transport-Security'κ° μ€μ λ¨.
- μ¬μ΄νΈ κ° μμ² μμ‘°(CSRF; Cross Site Request Forgery): CSRF 곡격μ λ°©μ§νκΈ° μνμ¬ μνμ¬ λΉμ μ μλ² μͺ½μΌλ‘ λ°μνλ λͺ¨λ HTTP μμ²μ΄ ν©λ²μ μ΄κ³ λΉμ μ μΉμ¬μ΄νΈλ μ΄ν리μΌμ΄μ μΌλ‘λΆν° λ°μν κ²μμ νμ ν¨
- μ¬μ΄νΈ κ° μ€ν¬λ¦½ν (XSS; Cross Site Scripting): λΉμ μ νμ΄μ§λ μΉμ¬μ΄νΈκ° μ¬μ΄νΈ κ° μ€ν¬λ¦½ν μ΄ λ°μν μ¬μ§κ° μ ν μμ
- Content Type Options Prevents Google Chrome and Internet Explorer from trying to mime-sniff the content-type of a response away from the one being declared by the server.
- 컨ν μΈ λ³΄μ μ μ± (CSP; Content Security Policy) μ¬μ΄νΈ λ΄μ 컨ν μΈ κ° μ΄λ»κ² λ‘λ©λκ³ , μ΄λμ λ‘λ©λλλ‘ νκ°λ°μλμ§λ₯Ό νμΈ. μ΄λ₯Ό μ μ©ν¨μΌλ‘μ¨ ν΄λ¦μ¬νΉ 곡격μ λ°©μ§ν μ μμ
- π W3C κ²μ¬κΈ°
-
Lazy λ‘λ©: μ΄λ―Έμ§, μ€ν¬λ¦½νΈ, CSS νμΌλ€μ΄ lazy λ‘λ λμ΄μ ν νμ΄μ§μ μλ΅μκ°μ ν₯μμν΄ (κ° μΉμ μ μμΈν λΆλΆμ μ°Έμ‘°νμμ€).
-
μΏ ν€ ν¬κΈ°: μΏ ν€λ₯Ό μ¬μ©νλ€λ©΄, κ° μΏ ν€μ ν¬κΈ°κ° 4096 λ°μ΄νΈλ₯Ό λμ§ μκ³ , λλ©μΈ λ΄μ 20κ° μ΄μμ μΏ ν€λ₯Ό κ°μ§μ§ μλλ‘ μ£Όμνμμ€
- π μΏ ν€ μ¬μ: RFC 6265
- π μΏ ν€
- π λΈλΌμ°μ μΏ ν€μ μ νμ
- μλ νν° μ»΄ν¬λνΈ: 곡μ νκΈ° λ²νΌμ²λΌ μΈλΆ μλ°μ€ν¬λ¦½νΈ νμΌμ μμ‘΄νλ μλνν° iframeμ΄λ μ»΄ν¬λνΈμ κ²½μ°, κ°κΈμ μ μ μΈ μ»΄ν¬λνΈλ‘ κ΅μ²΄νμ¬μ μΈλΆ API νΈμΆμ μ ννκ³ μ¬μ©μλ€μ νλλ€μ μΈλΆλ‘ μ μΆλμ§ μλλ‘ νμμ€
- DNS resolution: DNS of third-party services that may be needed are resolved in advance during idle time using
dns-prefetch
.
<link rel="dns-prefetch" href="https://example.com">
- Preconnection: DNS lookup, TCP handshake and TLS negociation with services that will be needed soon is done in advance during idle time using
preconnect
.
<link rel="preconnect" href="https://example.com">
- Prefetching: Resources that will be needed soon (e.g. lazy loaded images) are requested in advance during idle time using
prefetch
.
<link rel="prefetch" href="image.png">
- Preloading: Resources needed in the current page (e.g. scripts placed at the end of
<body>
) in advance usingpreload
.
<link rel="preload" href="app.js">
- Google PageSpeed: ννμ΄μ§ λΏ μλλΌ λͺ¨λ νμ΄μ§κ° ν μ€νΈ μλ£ λμκ³ μ΅μν 100μ λ§μ 90μ μ νλνμμ
λ ΈνΈ: μ νλΈμ μ¬μ λͺ©λ‘μ νμΈν΄λ³΄μΈμ A11ycasts with Rob Dodson πΉ
- Progressive enhancement: λ©μΈ λ€λΉκ²μ΄μ μ΄λ κ²μκ³Ό κ°μ λλ€μμ κΈ°λ₯λ€μ΄ μλ°μ€ν¬λ¦½νΈκ° μλνμ§ μκ³ λ λμν΄μΌ ν¨
- π Contrast ratio
- H1: λͺ¨λ νμ΄μ§ λ΄μ μΉμ¬μ΄νΈμ νμ΄νκ³Ό λ€λ₯Έ H1 νκ·Έκ° μ‘΄μ¬ν΄μΌ ν¨
- ν€λ©: ν€λ©μ΄ μ¬λ°λ₯Έ μμ(H1λΆν° H6κΉμ§)λ‘ μ μ ν μ¬μ©λμ΄μΌ ν¨
- banner μν :
<header>
νκ·Έκ°role="banner"
μμ±κ°μ κ°μ§κ³ μμ - navigation μν :
<nav>
νκ·Έκ°role="navigation"
μμ±κ°μ κ°μ§κ³ μμ - main μν :
<main>
νκ·Έκ°role="main"
μμ±κ°μ κ°μ§κ³ μμ
- νΉμ ν HTML5μ input νμ λ€μ μ¬μ©: μ΄ νλͺ©μ κ°κ° λ€λ₯Έ input νμ μ λνμ¬ κ°λ³μ μΈ ν€ν¨λλ μμ ―μ 보μ¬μ£Όλ λͺ¨λ°μΌ μ₯μΉλ€μ λν΄ νΉν λμ± μ€μν¨
- λ μ΄λΈ: λ μ΄λΈμ κ°κ°μ μ
λ ₯ νΌ μ리먼νΈμ μ°κ΄λ¨. λ μ΄λΈμ΄ 보μ¬μ§ μ μλ κ²½μ°
aria-label
μ λμ μ¬μ©νμμ€
- μ κ·Όμ± νμ€ ν μ€νΈ: WAVE λꡬλ₯Ό μ΄μ©νμ¬ λΉμ μ νμ΄μ§κ° μ κ·Όμ± νμ€μ λ§μ‘±νμλμ§ ν μ€νΈ ν΄λ³΄μΈμ
- π Wave ν μ€νΈ
- ν€λ³΄λ λ€λΉκ²μ΄μ : ν€λ³΄λλ§μ μ΄μ©νμ¬ μΉμ¬μ΄νΈλ₯Ό μμΈ‘ κ°λ₯νλλ‘ μμ§μΌ μ μλμ§ ν μ€νΈ νμμ€. λͺ¨λ μΈν°λν°λΈ μ리먼νΈλ€μ μ κ·Ό κ°λ₯νκ³ μ¬μ© κ°λ₯ν΄μΌ ν¨
- μ€ν¬λ¦° 리λ: λͺ¨λ νμ΄μ§λ€μ΄ μ€ν¬λ¦° 리λ (VoiceOver, ChromeVox, NVDA or Lynx) ν μ€νΈλ₯Ό μλ£ν¨
- ν¬μ»€μ€ μ€νμΌλ§: ν¬μ»€μ€ λμ§ μμ κ²½μ°, λμ 보μ΄λ μνμ CSSλ‘ λ체λμ΄μΌ ν¨
- κ΅¬κΈ μ λ리ν±μ€: κ΅¬κΈ μ λ리ν±μ€κ° μ€μΉλμκ³ μ λλ‘ μ€μ λμμ
- μ μ ν μ λͺ© λ°°μΉ: μ λͺ©μ ν νμ΄μ§μ λ΄μ©μ μ΄ν΄νλ λ°μ λμμ μ€
- sitemap.xml: sitemap.xml νμΌμ΄ μ‘΄μ¬νκ³ Google Search Console(μμ μ΄λ¦: Google Webmaster Tools)μΌλ‘ μ μΆλμμ
- robots.txt: robots.txt νμΌμ΄ μΉνμ΄μ§λ₯Ό λΈλ‘νΉ νμ§ μμ
- π Google Robots ν μ€νΈ λꡬλ₯Ό μ΄μ©νμ¬ λΉμ μ robots.txt νμΌμ ν μ€νΈ ν΄λ³΄μΈμ
- ꡬ쑰ν λ λ°μ΄ν°: ꡬ쑰ν λ λ°μ΄ν°λ₯Ό μ¬μ©νμ¬ νμ΄μ§κ° ν μ€νΈλμκ³ μλ¬κ° μ‘΄μ¬νμ§ μλκ°? ꡬ쑰ν λ λ°μ΄ν°λ μΉ ν¬λ‘€λ¬κ° ν νμ΄μ§ λ΄μ 컨ν μΈ λ₯Ό μ΄ν΄νλ λ°μ λμμ΄ λ¨
- π ꡬ쑰ν λ λ°μ΄ν° μκ° - Search - Google Developers
- π ꡬ쑰ν λ λ°μ΄ν° ν μ€νΈ λꡬλ₯Ό μ΄μ©νμ¬ λΉμ μ νμ΄μ§λ₯Ό ν μ€νΈ ν΄λ³΄μΈμ
- π ꡬ쑰ν λ λ°μ΄ν°λ‘ μ¬μ©λ μ μλ λ¨μ΄λ€μ λͺ©λ‘μ λ§λ€μ΄λ³΄μΈμ Schema.org Full Heirarchy
- HTML μ¬μ΄νΈλ§΅: HTML μ¬μ΄νΈλ§΅μ΄ μ 곡λμμΌλ©° μΉμ¬μ΄νΈμ νΈν° λ΄μ μ‘΄μ¬νλ λ§ν¬λ₯Ό ν΅νμ¬ μ κ·Όμ΄ κ°λ₯ν¨
νλ‘ νΈμλ 체ν¬λ¦¬μ€νΈλ λ€λ₯Έ μΈμ΄λ‘λ μ΄μ© κ°λ₯ν©λλ€. λͺ¨λ λ²μμλ€κ³Ό κ·Έλ€μ λ©μ§ λ Έλ ₯μ κ°μ¬ν©λλ€!
- π―π΅ Japanese: miya0001/Front-End-Checklist
- πͺπΈ Spanish: eoasakura/Front-End-Checklist-ES
- π¨π³ Chinese: JohnsenZhou/Front-End-Checklist
- π°π· Korean: kesuskim/Front-End-Checklist
- π§π· Portuguese: jcezarms/Front-End-Checklist
- π»π³ Vietnamese: euclid1990/Front-End-Checklist
- πΉπΌ Traditional Chinese: EngineLin/Front-End-Checklist
λ§μ½ λΉμ μ΄ νλ‘ νΈμλ 체ν¬λ¦¬μ€νΈμ κ·μΉμ λ°λ₯΄κ³ μλ€κ³ 보μ¬μ£ΌκΈΈ μνλ€λ©΄, νλ¨μ λ°°μ§λ₯Ό README νμΌμ μΆκ°νμΈμ!
[![FrontβEnd_Checklist followed](https://img.shields.io/badge/FrontβEnd_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)
μ΄μλ₯Ό μλ‘ μμ±νκ±°λ PRμ λ λ €μ μμ μ¬νμ΄λ μΆκ°ν λΆλΆμ λν΄ μλ €μ£ΌμΈμ.
νλ‘ νΈμλ 체ν¬λ¦¬μ€νΈ λ ν¬μ§ν 리λ 2κ°μ λΈλμΉλ‘ ꡬμ±λμ΄μ Έ μμ΅λλ€:
μ΄ λΈλμΉλ νλ‘ νΈμλ 체ν¬λ¦¬μ€νΈ μΉμ¬μ΄νΈμ λ°μλλ README.md
νμΌλ‘ ꡬμ±λμ΄μ Έ μμ΅λλ€.
μ΄ λΈλμΉλ νμνλ€λ©΄ ꡬ쑰λ 컨ν μΈ μ μλΉν λ³νλ₯Ό μ€ μ μμ΅λλ€. κ°λ¨ν μλ¬ μμ μ νκ±°λ μλ‘μ΄ νλͺ©μ μΆκ°ν κ²½μ°, master λΈλμΉμ μ§μ νλ κ²μ μΆμ²λ립λλ€.
Check out all the super awesome contributors.
μ§λ¬Έμ΄λ μ μμ΄ μλ€λ©΄, μ£Όμ νμ§ λ§κ³ Gitterλ Twitterλ₯Ό μ΄μ©νμΈμ: