ํ๋ก ํธ์๋ ์ฒดํฌ๋ฆฌ์คํธ
ํ๋ก ํธ์๋ ์ฒดํฌ๋ฆฌ์คํธ๋ ๋น์ ์ HTML ์ฌ์ดํธ ๋๋ ํ์ด์ง๋ฅผ ํ๋ก๋์ ์ผ๋ก ๋ฐ์นญํ๊ธฐ ์ด์ ์ ๊ฐ์ง๊ณ ์์ด์ผ ํ , ๋ํ ํ ์คํธ ๋์ด์ผ ํ ์ ๋ฐ์ ์ธ ์์๋ค์ ์งํฉ์ ๋๋ค.
How To Use โข Contributing โข Website โข Product Hunt
Other Checklists:
๐ฎ Front-End Performance Checklist โข ๐ Front-End Design Checklist
์ด ๋ฆฌ์คํธ๋ ๋ค๋ ๊ฐ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ค์ ๊ฒฝํ์ผ๋ก ์์ฑ๋์์ผ๋ฉฐ, ๋ช๋ช ํญ๋ชฉ๋ค์ ํ ์คํ์์ค ์ฒดํฌ๋ฆฌ์คํธ๋ค์ ์ฐธ๊ณ ๋ฅผ ํตํด ์ถ๊ฐ๋์์ต๋๋ค.
๋ชฉ์ฐจ
์ด ๋ฆฌ์คํธ๋ ์ด๋ป๊ฒ ์ฌ์ฉํ๋์?
ํ๋ก ํธ์๋ ์ฒดํฌ๋ฆฌ์คํธ์ ์ํด์๋ ๋ชจ๋ ํญ๋ชฉ๋ค์ ๋๋ค์์ ํ๋ก์ ํธ์์ ํ์๋ก ํ๋ ์ฌํญ๋ค์ด์ง๋ง, ๋ช๋ช ์์๋ค์ ์๋ต๋๊ฑฐ๋ ํ์์ ์ด ์๋ ์๋ ์์ต๋๋ค(์๋ฅผ ๋ค๋ฉด ๊ด๋ฆฌํ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ RSS ํผ๋๋ ํ์ ์์ ๊ฒ์ ๋๋ค). ์ฐ๋ฆฌ๋ ๋ฐ๋ผ์ ๊ฐ๊ฐ์ ํญ๋ชฉ๋ค์ 3๊ฐ์ง์ ๊ธฐ์ค์ผ๋ก ๊ตฌ๋ถํ์์ต๋๋ค:
- ์ ๊ฒฝ์ฐ ํด๋น ํญ๋ชฉ์ด ๊ถ์ ๋์ง๋ง, ๋ช๋ช ํน์ ํ ์ํฉ์์๋ ์๋ต๋ ์๋ ์์ต๋๋ค.
- ์ ๊ฒฝ์ฐ ํด๋น ํญ๋ชฉ์ด ๊ถ๊ณ ๋์ง๋ง, ๊ต์ฅํ ํน์ ํ ์ํฉ์์๋ ๊ฒฐ๊ตญ ์๋ต์ด ๋ ์๋ ์์ต๋๋ค. ๋ช๋ช ์์์ ๊ฒฝ์ฐ, ์๋ต ์ ์ฑ๋ฅ์ด๋ SEO ์ธก๋ฉด์์ ์ ์ข์ ์ํฅ์ ๋ผ์น ์๋ ์์ต๋๋ค.
- ์ ๊ฒฝ์ฐ ํด๋น ํญ๋ชฉ์ ์ด๋ ํ ์ํฉ์์๋ผ๋ ์๋ต๋ ์ ์์ต๋๋ค. ์ด๋ฅผ ์๋ตํ๊ฒ ๋๋ฉด ๋น์ ์ ํ์ด์ง๋ ์ค๋์ํ๊ฑฐ๋ ์ ๊ทผ, ๋๋ SEO์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ๊ฒ์ ๋๋ค. ์ด๋ฌํ ์์๋ค์ ๋ํด์ ์ฐ์ ์ ์ผ๋ก ํ ์คํธ ํ์๊ธฐ ๋ฐ๋๋๋ค.
๋ช๋ช ์ถ๊ฐ ๋ด์ฉ๋ค์ ๊ทธ๊ฒ๋ค์ด ์ด๋ ํ ์ข ๋ฅ์ ๋ด์ฉ์ธ์ง ์ดํดํ๋๋ฐ์ ๋์์ ์ฃผ๊ธฐ ์ํ์ฌ ์ด๋ชจํฐ์ฝ์ ์ถ๊ฐํ์์ต๋๋ค. ์ด๋ก ์ธํด ์ฒดํฌ๋ฆฌ์คํธ์์ ํด๋น ํญ๋ชฉ๋ค์ ์ดํดํ๋ ๋ฐ์ ๋์์ด ๋ ๊ฒ์ ๋๋ค:
- ๐: ๋ฌธ์ ๋๋ ๊ธฐ์ฌ
- ๐ : ์จ๋ผ์ธ ๋๊ตฌ / ํ ์คํธ ๋๊ตฌ
- ๐น: ๋ฏธ๋์ด ๋๋ ๋น๋์ค ์ปจํ ์ธ
๋น์ ์ README_APP ํ์ผ์์ ํ๋ก์ ํธ์ ๋ํ ๋ชจ๋ ๊ฒ์ ์ค๋ช ํ๋ ํ๋ก ํธ์๋ ์ฒดํฌ๋ฆฌ์คํธ ์ฑ์ ๊ธฐ์ฌํ ์ ์์ต๋๋ค.
Head
๋ ธํธ: a list of everything ์์ HTML ๋ฌธ์ ๋ด์
<head>
์์ ์ฌ์ฉํ ์ ์๋ ๋ชจ๋ ๊ฒ์ ์ฐพ์๋ณด์ค ์ ์์ต๋๋ค.
๋ฉํ ํ๊ทธ
<!doctype html> <!-- HTML5 -->
๋ค์ 2๊ฐ์ ๋ฉํ ํ๊ทธ(Charset๊ณผ Viewport)๋ค์ ๋ค๋ฅธ ์์๋ค์ ๋นํด head ์์์๋ ์๋จ์ ์์นํด์ผ๋ง ํฉ๋๋ค.
<!-- ์ด ๋ฌธ์์ ๋ํ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ค์ -->
<meta charset="utf-8">
<!-- ๋ฐ์ํ ์น ๋์์ธ์ ์ํ Viewport ์ค์ -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- Title: ๋ชจ๋ ํ์ด์ง์ title์ด ์ฌ์ฉ๋จ (SEO ๊ฐ์ด๋: Google์ ์ ๋ชฉ์ ์ฌ์ฉ๋ ๊ธ์๋ค์ ๋๋น์ ํฝ์ ๊ฐ์ ๊ณ์ฐํ ๋ค, 472~482px ์ฌ์ด์ ๊ฐ์ผ๋ก ์๋ผ๋ ๋๋ค. ํ๊ท ์ ์ธ ๊ธ์ ๊ธธ์ด์ ์ ํ์ ์ฝ 55๊ฐ์ ๊ธ์์ ๋๋ค.)
<!-- ๋ฌธ์์ 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 ํฐ์น ์์ด์ฝ (์ต์ํ 200x200 px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 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-read.html">
HTML ํ๊ทธ
<html lang="ko">
- ๊ธ์ ๋ฐฉํฅ ์์ฑ: ๊ธ์๋ค์ ๋ฐฉํฅ์ด ์ ๋๋ก ์ค์ ๋จ (์ฐ๋ฆฌ๋๋ผ์์๋ ์ข์์ ์ฐ๋ก ๊ธ์จ๋ฅผ ์ฝ๊ณ ์ฐ์ง๋ง ๋ช๋ช ๋๋ผ์์๋ ์ฐ์์ ์ข๋ก ์ฝ๊ณ ์ฐ๋ ๊ฒฝ์ฐ๋ ์์)
<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>
๋ด์์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ณด๋ค ์ด์ ์ ๋ก๋ฉ์ด ์๋ฃ๋จ (์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ด ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ฉ๋๋ ํน์ ํ ๊ฒฝ์ฐ๋ ์ ์ธํจ).
์์ ๋ฉํ
Visualize and generate automatically our social meta tags with Meta Tags
Facebook OG and Twitter Cards are, for any website, highly recommended. The other social media tags can be considered if you target a particular presence on those and want to ensure the display.
- Facebook Open Graph: ๋ชจ๋ Facebook์ Open Graph (OG) ๊ฐ ํ ์คํธ ๋์์ผ๋ฉฐ, ๊ทธ๊ฒ๋ค ์ค์ ๋๋ฝ๋ ์ ๋ณด๋ ์๋ชป๋ ์ ๋ณด๋ฅผ ๊ฐ์ง๊ณ ์์ง๋ ์๋? (์ด๋ฏธ์ง์ ๊ฒฝ์ฐ ์ต์ํ 600 x 315 ํฝ์ ์ ๋์ด์ผ ํ๋ฉฐ, 1200 x 630 ํฝ์ ํฌ๊ธฐ๋ฅผ ๊ถ์ฅํจ)
๋ ธํธ:
og:image:width
์og:image:height
๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ฅผ ์น ํฌ๋กค๋ฌ์๊ฒ ์๋ ค์ฃผ์ด์, ์ด๋ฏธ์ง๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ๋ค์ด๋ก๋ํ๊ณ ์ฒ๋ฆฌํ ํ์ ์์ด ์ฆ์ ๋ณด์ฌ์ค ์ ์๋๋ก ํฉ๋๋ค.
<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 ๊ฒ์ฌ๊ธฐ ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ํ์ด์ง ํ ์คํธํ๊ธฐ
HTML
๋ชจ๋ฒ ์ฌ๋ก
- HTML5 ์๋งจํฑ ์๋ฆฌ๋จผํธ: HTML5์ ์๋งจํฑ ์๋ฆฌ๋จผํธ๋ค์ด ์ ์ ํ ์ฌ์ฉ๋จ (header, section, footer, main... ๋ฑ).
- ๐ HTML ๋ ํผ๋ฐ์ค
-
์๋ฌ ํ์ด์ง: ์๋ฌ๋ฅผ ์ํ 404 ํ์ด์ง์ 5xx ํ์ด์ง๊ฐ ์กด์ฌํ๋๊ฐ? 5xx ํ์ด์ง๋ ์๋ฒ๋ก๋ถํฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ก๋ฐ์ง ์๊ณ ๋ ๋ฆฝ์ ์ธ ์์ฒด CSS๋ฅผ ํฌํจํ๊ณ ์์ด์ผ ํจ์ ๊ธฐ์ตํ๋ผ (5xx ์๋ฌ๋ ์๋ฒ ์๋ฌ์ด๋ฏ๋ก!).
-
Noopener: ์ธ๋ถ ๋งํฌ๋ฅผ
target="_blank"
๋ฅผ ์ด์ฉํ์ฌ ์ฐ ๊ฒฝ์ฐ, tab nabbing ํผ์ฑ ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํ์ฌrel="noopener"
์์ฑ์ ์ฌ์ฉํด์ผ๋ง ํ๋ค. ๋ง์ฝ Firefox ์ ๋ฒ์ ์ ์ง์ํด์ผ๋ง ํ๋ค๋ฉด,rel="noopener noreferrer"
์ ์ฌ์ฉํ๋ผ.
- ์ฃผ์ ์ง์ฐ๊ธฐ: ์น์ฌ์ดํธ๋ฅผ ํ๋ก๋์ ํ๊ธฐ ์ด์ ์ ๋ถํ์ํ ์ฝ๋๋ ์ ๊ฑฐํ์๋์ง, ์ฃผ์์ ์ ๊ฑฐํ์๋์ง ์ ๊ฒํ๋ผ
HTML testing
- W3C ๊ท๊ฒฉ: ๋ชจ๋ ํ์ด์ง๋ HTML ์ฝ๋ ๋ด์์ ์ผ์ด๋ ์ ์๋ ๊ฒฝ์ฐ๋ฅผ ํ์ธํ๊ธฐ ์ํ์ฌ W3C ์ validator๋ฅผ ์ด์ฉํ์ฌ ํ ์คํธ ๋์ด์ผ ํจ
- ๐ W3C ๊ฒ์ฌ๊ธฐ
- HTML Lint: ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ HTML ์ฝ๋ ๋ด์ ๋ฐ์ํ ์ ์๋ ๋ฌธ์ ๋ค์ ๋ถ์ํ๋๋ก ํ์
- ๐ Dirty markup: HTML ์ฝ๋๋ฅผ ์ ๋ํด์ฃผ๋ ์จ๋ผ์ธ ๋๊ตฌ
- Link checker: ํ์ด์ง ๋ด์ ๊นจ์ง ๋งํฌ๋ ์๋์ง, 404 ์๋ฌ๊ฐ ์กด์ฌํ์ง ์๋์ง ๋ค์ ํ๋ฒ ํ์ธํ๋๋ก ํจ
- ๐ W3C Link Checker
- ๊ด๊ณ ์ฐจ๋จ๊ธฐ ํ ์คํธ: ๊ด๊ณ ์ฐจ๋จ๊ธฐ๊ฐ ํ์ฑํ ๋ ์ํ์์๋ ์ปจํ ์ธ ๊ฐ ์ ๋๋ก ๋ณด์ฌ์ง (์ฌ๋๋ค์๊ฒ ๊ด๊ณ ์ฐจ๋จ๊ธฐ๋ฅผ ๋นํ์ฑํ ํด๋ฌ๋ผ๊ณ ๋ฉ์ธ์ง๋ฅผ ์๋ฆด์๋ ์์ต๋๋ค)
์นํฐํธ
๋ ธํธ: ์นํฐํธ๋ฅผ ์ฌ์ฉํ๋ฉด ์คํ์ผ๋ง ๋์ง ์์ ๊ธ์๋ ๋ณด์ด์ง ์๋ ๊ธ์๋ค์ด ๊น๋นก์ผ ์ ์์ต๋๋ค. ์คํจํ์ ๊ฒฝ์ฐ๋ฅผ ๋๋นํ ๋์ฒด์ฉ ํฐํธ๋ฅผ ํฌํจํ๊ฑฐ๋, ์นํฐํธ ๋ก๋๋ฅผ ํ์ฉํ์ฌ ์ด๋ฌํ ๋์๋ค์ ์ ์ดํ์ธ์.
-
์นํฐํธ ํฌ๊ธฐ: ๋ชจ๋ ์ข ๋ฅ(์ดํค๋ฆญ, ๋ณผ๋์ฒด ๋ฑ๋ฑ)๋ฅผ ํฌํจํ ์นํฐํธ ํฌ๊ธฐ์ ์ด ํฉ๊ณ๋ 2 MB๋ฅผ ๋์ง ์๋๋ก ํจ
-
์นํฐํธ ๋ก๋: ์นํฐํธ ๋ก๋๋ฅผ ์ด์ฉํ์ฌ ํฐํธ๊ฐ ๋ก๋ฉ๋๋ ๋์์ ์ ์ดํ์์ค
CSS
๋ ธํธ: ๋๋ค์์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ค์ด ๋ฐ๋ฅด๋ 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
- ๐ PurgeCSS
- ๐ Chrome DevTools Coverage
CSS ํ ์คํธ
-
๋ฐ์ํ ์น ๋์์ธ: ๋ชจ๋ ํ์ด์ง๊ฐ ๋ค์ ์ง์ ์์ ํ ์คํธ ์๋ฃ๋์์: 320px, 768px, 1024px (๊ทธ ์ธ ๋น์ ์ด ํ์ํ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ค๋ฅผ ์ ์์)
-
CSS ๊ฒ์ฌ๊ธฐ: CSS๊ฐ ์ ๋๋ก ํ ์คํธ ๋์๊ณ , ์ค๋ฅ๋ค์ด ์๋ง๊ฒ ์์ ๋์์
- ๐ CSS ๊ฒ์ฌ๊ธฐ
- ๋ฐ์คํฌํ ๋ธ๋ผ์ฐ์ : ๋ชจ๋ ํ์ด์ง๊ฐ ๋ชจ๋ ํ์กดํ๋ ๋ฐ์คํฌํ ๋ธ๋ผ์ฐ์ ์์ ํ ์คํธ ๋จ (Safari, Firefox, Chrome, Internet Explorer, EDGE... ๋ฑ).
- ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ : ๋ชจ๋ ํ์ด์ง๊ฐ ๋ชจ๋ ํ์กดํ๋ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์ ํ ์คํธ ๋จ (Native browser, Chrome, Safari... ๋ฑ).
- ์ด์์ฒด์ : ๋ชจ๋ ํ์ด์ง๊ฐ ๋ชจ๋ ํ์กดํ๋ ์ด์์ฒด์ ์์ ํ ์คํธ ๋จ (Windows, Android, iOS, Mac... ๋ฑ).
- ๋์์ธ ์ถฉ์ค๋: ์ฐฝ์๋ฌผ์์ ์๋ํ๋ ๋์์ธ ํ์ง์ ๊ฐ๊น์์ผ ํจ, ์ผ๋ถ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋ ๊ตฌํ๊ณผ ๋น๊ตํ๊ณ ์ผ๊ด์ฑ์ ๋ณด์ฅํ ์ ์์.
- ๊ธ์ ๋ฐฉํฅ: ๋ค๊ตญ์ด๋ฅผ ์ง์ํด์ผ ํ ๊ฒฝ์ฐ, ๊ธ์ ๋ฐฉํฅ์ ๋ง๊ฒ ๋ชจ๋ ํ์ด์ง๊ฐ ์ ์ ๋์ํจ (LTR / RTL)
์ด๋ฏธ์ง
๋ ธํธ: ์ด๋ฏธ์ง ์ต์ ํ์ ์์ ํ ์ดํด๋ฅผ ์ํด์๋, Addy Osmani๊ฐ ์ด ๋ฌด๋ฃ ebook Essential Image Optimization ์ ํ์ธํ์ธ์.
๋ชจ๋ฒ ์ฌ๋ก
- ์ต์ ํ: ๋ชจ๋ ์ด๋ฏธ์ง๊ฐ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ๋ ์ ์๋๋ก ์ต์ ํ ๋์๋? ํํ์ด์ง ๊ฐ์ด ์ฑ๋ฅ์ด ์ค์ํ ํ์ด์ง์๋ WebP ํฌ๋งท์ ์ฌ์ฉํ ์๋ ์์
- ๐ Imagemin
- ๐ ImageOptim๋ฅผ ์ฌ์ฉํ์ฌ ๋น์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ฌด๋ฃ๋ก ์ต์ ํํ์ธ์.
- ๐ KeyCDN Image Processing๋ฅผ ์ฌ์ฉํ์ฌ ์ค์๊ฐ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ์ธ์.
- ๐ Kraken.io๋ฅผ ์ฌ์ฉํ์ฌ png์ jpg์ ๊ฝค๋ ๋๋จํ๊ฒ ์ต์ ํ ํ ์ ์์ต๋๋ค. ํ์ผ ๋น 1MB์ ๋ํด์๋ ๋ฌด๋ฃ์ ๋๋ค.
- ๐ TinyPNG png, apng(์ ๋๋ฉ์ด์ png)์ jpg ์ด๋ฏธ์ง๋ฅผ ์์ค์์ด ์ต์ ํํฉ๋๋ค. ๋ฌด๋ฃ ๋ฐ ์ ๋ฃ ๋ฒ์ ์์
- ๐ ZorroSVG svg ๋ง์คํน์ ์ฌ์ฉํ์ฌ ํฌ๋ช ์ด๋ฏธ์ง, jpg์ ๊ฐ์ ์์ถ
- ๐ SVGO SVG ๋ฒกํฐ ๊ทธ๋ํฝ ํ์ผ์ ์ต์ ํ ํ๊ธฐ ์ํ Nodejs๊ธฐ๋ฐ ๋๊ตฌ.
- ๐ SVGOMG SVGO์ ์จ๋ผ์ธ ์น๊ธฐ๋ฐ GUI ๋ฒ์ , svg ํ์ผ ์ต์ ํ
- Picture/Srcset: picture์ srcset์ ์ด์ฉํ์ฌ ์ฌ์ฉ์์ ํ์ฌ ๋ทฐํฌํธ์ ๊ฐ์ฅ ์ ํฉํ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ์์
- ๋ ํฐ๋ ๋์คํ๋ ์ด ์ง์: ๋ ํฐ๋ ๋์คํ๋ ์ด๋ฅผ ์ง์ํ๊ธฐ ์ํ์ฌ ๋น์ ์ ํ ๋ ์ด์์์ ํด๋นํ๋ 2๋ฐฐ, ๋๋ 3๋ฐฐ ์ด์ ํฐ ์ด๋ฏธ์ง๋ฅผ ์ง์ํจ
- ์ด๋ฏธ์ง ์คํ๋ผ์ดํธ: ์์ ์ด๋ฏธ์ง์ ๊ฒฝ์ฐ ์คํ๋ผ์ดํธ ํ์ผ๋ก ๊ตฌ์ฑ๋์ด์ ธ ์์ (์์ด์ฝ์ ๊ฒฝ์ฐ, SVG ์คํ๋ผ์ดํธ ์ด๋ฏธ์ง ์ผ ์๋ ์์).
- ๋๋น์ ๋์ด: ๋ชจ๋
<img>
ํ๊ทธ์ ๋๋น์ ๋์ด๊ฐ ์ค์ ๋์์ (px์ด๋ %๋ก ์ง์ ํ์ง ๋ง์์ค) - ๋์ฒด ํ
์คํธ: ๋ชจ๋
<img>
ํ๊ทธ๊ฐ ์ด๋ฏธ์ง๋ฅผ ์ ์์ ํ๋ ๋์ฒด ํ ์คํธ๋ฅผ ๊ฐ์ง๊ณ ์์ (alt
์์ฑ์ผ๋ก ๋ถ์ฌ)
- Lazy ๋ก๋ฉ: ์ด๋ฏธ์ง๋ค์ด lazy ๋ก๋ ๋จ (์๋ฐ์คํฌ๋ฆฝํธ ๋ฏธ์ง์์ ๋ํ ์์ธ์ฒ๋ฆฌ๊ฐ ํญ์ ์ ๊ณต ๋์ด์ผ ํจ)
์๋ฐ์คํฌ๋ฆฝํธ
๋ชจ๋ฒ ์ฌ๋ก
- ์ธ๋ผ์ธ ์๋ฐ์คํฌ๋ฆฝํธ: HTML ์ฝ๋์ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ธ๋ผ์ธ์ผ๋ก ํฌํจํ์ง ์๋๋ก ํ์์ค
- ํ์ผ ๋จ์ผํ: ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ค์ด ํ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ก ๋จ์ผํ ๋์์
- ์ต์ํ: ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ด ์ต์ํ ๋์์(๋ค์
.min
์ ๋ฏธ์ฌ๋ฅผ ๋ถ์ด๋ ๊ฒ์ ์ถ์ฒ)
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ณด์:
-
noscript
ํ๊ทธ: ๋ธ๋ผ์ฐ์ ๋ด์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ง์ํ์ง ์๊ฑฐ๋ ๊บผ์ ธ ์์ ๊ฒฝ์ฐ๋ฅผ ๊ณ ๋ คํ์ฌ HTML ๋ด์<noscript>
ํ๊ทธ๋ฅผ ์ฌ์ฉํ์์ค. ์ด๋ React.js ์ดํ๋ฆฌ์ผ์ด์ ์ฒ๋ผ ํด๋ผ์ด์ธํธ ์ฌ์ด๋์ ๋ ๋๋ง์ด ๊ต์ฅํ ๋ฌด๊ฑฐ์ด ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ๊ต์ฅํ ์ ์ฉํจ. ๋ค์์ ์์ ๋ฅผ ์ดํด๋ณด์์ค
<noscript>
์ด ์ดํ๋ฆฌ์ผ์ด์
์ ์คํ์ํค๊ธฐ ์ํด์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฑํ ์์ผ์ผ ํฉ๋๋ค.
</noscript>
- Non-blocking: JavaScript ํ์ผ๋ค์
async
์defer
์์ฑ๊ฐ์ ์ด์ฉํ์ฌ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ ๋์ด์ผ ํจ
- Optimized and updated JS libraries: All JavaScript libraries used in your project are necessary (prefer Vanilla Javascript for simple functionalities), updated to their latest version and don't overwhelm your JavaScript with unnecessary methods.
- 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) ์ฌ์ดํธ ๋ด์ ์ปจํ ์ธ ๊ฐ ์ด๋ป๊ฒ ๋ก๋ฉ๋๊ณ , ์ด๋์ ๋ก๋ฉ๋๋๋ก ํ๊ฐ๋ฐ์๋์ง๋ฅผ ํ์ธ. ์ด๋ฅผ ์ ์ฉํจ์ผ๋ก์จ ํด๋ฆญ์ฌํน ๊ณต๊ฒฉ์ ๋ฐฉ์งํ ์ ์์
์ฑ๋ฅ
๋ชจ๋ฒ ์ฌ๋ก
- Goals to achieve: Your pages should reach these goals:
- First Meaningful Paint under 1 second
- Time To Interactive under 5 seconds for the "average" configuration (a $200 Android on a slow 3G network with 400ms RTT and 400kbps transfer speed) and under 2 seconds for repeat visits
- Critical file size under 170Kb gzipped
-
Lazy ๋ก๋ฉ: ์ด๋ฏธ์ง, ์คํฌ๋ฆฝํธ, CSS ํ์ผ๋ค์ด lazy ๋ก๋ ๋์ด์ ํ ํ์ด์ง์ ์๋ต์๊ฐ์ ํฅ์์ํด (๊ฐ ์น์ ์ ์์ธํ ๋ถ๋ถ์ ์ฐธ์กฐํ์์ค).
-
์ฟ ํค ํฌ๊ธฐ: ์ฟ ํค๋ฅผ ์ฌ์ฉํ๋ค๋ฉด, ๊ฐ ์ฟ ํค์ ํฌ๊ธฐ๊ฐ 4096 ๋ฐ์ดํธ๋ฅผ ๋์ง ์๊ณ , ๋๋ฉ์ธ ๋ด์ 20๊ฐ ์ด์์ ์ฟ ํค๋ฅผ ๊ฐ์ง์ง ์๋๋ก ์ฃผ์ํ์์ค
- ๐ ์ฟ ํค ์ฌ์: RFC 6265
- ๐ ์ฟ ํค
- ๐ ๋ธ๋ผ์ฐ์ ์ฟ ํค์ ์ ํ์
- ์๋ ํํฐ ์ปดํฌ๋ํธ: ๊ณต์ ํ๊ธฐ ๋ฒํผ์ฒ๋ผ ์ธ๋ถ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์์กดํ๋ ์๋ํํฐ iframe์ด๋ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ, ๊ฐ๊ธ์ ์ ์ ์ธ ์ปดํฌ๋ํธ๋ก ๊ต์ฒดํ์ฌ์ ์ธ๋ถ API ํธ์ถ์ ์ ํํ๊ณ ์ฌ์ฉ์๋ค์ ํ๋๋ค์ ์ธ๋ถ๋ก ์ ์ถ๋์ง ์๋๋ก ํ์์ค
๋ค์์ ๋ฐ์ํ HTTP ์์ฒญ์ ๋ฏธ๋ฆฌ ์ค๋นํ๊ธฐ
- 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 negotiation 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: ๋ฉ์ธ ๋ค๋น๊ฒ์ด์ ์ด๋ ๊ฒ์๊ณผ ๊ฐ์ ๋๋ค์์ ๊ธฐ๋ฅ๋ค์ด ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์๋ํ์ง ์๊ณ ๋ ๋์ํด์ผ ํจ
- ์์ ๋๋น: ์์ ๋๋น ๊ธฐ์ค์ด ์ต์ํ WCAG AA๋ฅผ ํต๊ณผํด์ผ ํจ (๋ชจ๋ฐ์ผ์ ๊ฒฝ์ฐ AAA๋ฅผ ํต๊ณผํด์ผ ํจ)
- ๐ ๋๋น์จ
ํค๋ฉ
- H1: ๋ชจ๋ ํ์ด์ง ๋ด์ ์น์ฌ์ดํธ์ ํ์ดํ๊ณผ ๋ค๋ฅธ H1 ํ๊ทธ๊ฐ ์กด์ฌํด์ผ ํจ
- ํค๋ฉ: ํค๋ฉ์ด ์ฌ๋ฐ๋ฅธ ์์(H1๋ถํฐ H6๊น์ง)๋ก ์ ์ ํ ์ฌ์ฉ๋์ด์ผ ํจ
์๋งจํฑ
- ํน์ ํ HTML5์ input ํ์ ๋ค์ ์ฌ์ฉ: ์ด ํญ๋ชฉ์ ๊ฐ๊ฐ ๋ค๋ฅธ input ํ์ ์ ๋ํ์ฌ ๊ฐ๋ณ์ ์ธ ํคํจ๋๋ ์์ ฏ์ ๋ณด์ฌ์ฃผ๋ ๋ชจ๋ฐ์ผ ์ฅ์น๋ค์ ๋ํด ํนํ ๋์ฑ ์ค์ํจ
ํผ
- ๋ ์ด๋ธ: ๋ ์ด๋ธ์ ๊ฐ๊ฐ์ ์
๋ ฅ ํผ ์๋ฆฌ๋จผํธ์ ์ฐ๊ด๋จ. ๋ ์ด๋ธ์ด ๋ณด์ฌ์ง ์ ์๋ ๊ฒฝ์ฐ
aria-label
์ ๋์ ์ฌ์ฉํ์์ค
์ ๊ทผ์ฑ ํ ์คํธ
- ์ ๊ทผ์ฑ ํ์ค ํ ์คํธ: WAVE ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ํ์ด์ง๊ฐ ์ ๊ทผ์ฑ ํ์ค์ ๋ง์กฑํ์๋์ง ํ ์คํธ ํด๋ณด์ธ์
- ๐ Wave ํ ์คํธ
- ํค๋ณด๋ ๋ค๋น๊ฒ์ด์ : ํค๋ณด๋๋ง์ ์ด์ฉํ์ฌ ์น์ฌ์ดํธ๋ฅผ ์์ธก ๊ฐ๋ฅํ๋๋ก ์์ง์ผ ์ ์๋์ง ํ ์คํธ ํ์์ค. ๋ชจ๋ ์ธํฐ๋ํฐ๋ธ ์๋ฆฌ๋จผํธ๋ค์ ์ ๊ทผ ๊ฐ๋ฅํ๊ณ ์ฌ์ฉ ๊ฐ๋ฅํด์ผ ํจ
- ์คํฌ๋ฆฐ ๋ฆฌ๋: ๋ชจ๋ ํ์ด์ง๋ค์ด ์คํฌ๋ฆฐ ๋ฆฌ๋ (VoiceOver, ChromeVox, NVDA or Lynx) ํ ์คํธ๋ฅผ ์๋ฃํจ
- ํฌ์ปค์ค ์คํ์ผ๋ง: ํฌ์ปค์ค ๋์ง ์์ ๊ฒฝ์ฐ, ๋์ ๋ณด์ด๋ ์ํ์ CSS๋ก ๋์ฒด๋์ด์ผ ํจ
SEO
- sitemap.xml: sitemap.xml ํ์ผ์ด ์กด์ฌํ๊ณ Google Search Console(์์ ์ด๋ฆ: Google Webmaster Tools)์ผ๋ก ์ ์ถ๋์์
- ๐ The robots.txt file
- ๐ Google Robots ํ ์คํธ ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ robots.txt ํ์ผ์ ํ ์คํธ ํด๋ณด์ธ์
- ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ: ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ์ฌ ํ์ด์ง๊ฐ ํ ์คํธ๋์๊ณ ์๋ฌ๊ฐ ์กด์ฌํ์ง ์๋๊ฐ? ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ๋ ์น ํฌ๋กค๋ฌ๊ฐ ํ ํ์ด์ง ๋ด์ ์ปจํ ์ธ ๋ฅผ ์ดํดํ๋ ๋ฐ์ ๋์์ด ๋จ
- ๐ ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ ์๊ฐ - Search - Google Developers
- ๐ RDFa - Linked Data in HTML
- ๐ JSON-LD
- ๐ Microdata
- ๐ ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ ํ ์คํธ ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ํ์ด์ง๋ฅผ ํ ์คํธ ํด๋ณด์ธ์
- ๐ ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ๋ก ์ฌ์ฉ๋ ์ ์๋ ๋จ์ด๋ค์ ๋ชฉ๋ก์ ๋ง๋ค์ด๋ณด์ธ์ Schema.org Full Heirarchy
- HTML ์ฌ์ดํธ๋งต: HTML ์ฌ์ดํธ๋งต์ด ์ ๊ณต๋์์ผ๋ฉฐ ์น์ฌ์ดํธ์ ํธํฐ ๋ด์ ์กด์ฌํ๋ ๋งํฌ๋ฅผ ํตํ์ฌ ์ ๊ทผ์ด ๊ฐ๋ฅํจ
<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">
๋ฒ์ญ
ํ๋ก ํธ์๋ ์ฒดํฌ๋ฆฌ์คํธ๋ ๋ค๋ฅธ ์ธ์ด๋ก๋ ์ด์ฉ ๊ฐ๋ฅํฉ๋๋ค. ๋ชจ๋ ๋ฒ์ญ์๋ค๊ณผ ๊ทธ๋ค์ ๋ฉ์ง ๋ ธ๋ ฅ์ ๊ฐ์ฌํฉ๋๋ค!
- ๐ฏ๐ต 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
- ๐ซ๐ท French: ynizon/Front-End-Checklist
- ๐ท๐บ Russian: ungear/Front-End-Checklist
- ๐น๐ท Turkish: eraycetinay/Front-End-Checklist
- ๐ฉ๐ช German: xfuture603/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๊ฐ์ ๋ธ๋์น๋ก ๊ตฌ์ฑ๋์ด์ ธ ์์ต๋๋ค:
master
1. ์ด ๋ธ๋์น๋ ํ๋ก ํธ์๋ ์ฒดํฌ๋ฆฌ์คํธ ์น์ฌ์ดํธ์ ๋ฐ์๋๋ README.md
ํ์ผ๋ก ๊ตฌ์ฑ๋์ด์ ธ ์์ต๋๋ค.
develop
2. ์ด ๋ธ๋์น๋ ํ์ํ๋ค๋ฉด ๊ตฌ์กฐ๋ ์ปจํ ์ธ ์ ์๋นํ ๋ณํ๋ฅผ ์ค ์ ์์ต๋๋ค. ๊ฐ๋จํ ์๋ฌ ์์ ์ ํ๊ฑฐ๋ ์๋ก์ด ํญ๋ชฉ์ ์ถ๊ฐํ ๊ฒฝ์ฐ, master ๋ธ๋์น์ ์ง์ ํ๋ ๊ฒ์ ์ถ์ฒ๋๋ฆฝ๋๋ค.
Online Setup with a single Click
You can use gitpod ( A free VS Code like IDE) for contributing online, with a single click it will launch a ready to code workspace with all the dependencies pre-installed, build finished & the web server running so that you can start coding straight away.
Support
์ง๋ฌธ์ด๋ ์ ์์ด ์๋ค๋ฉด, ์ฃผ์ ํ์ง ๋ง๊ณ Gitter๋ Twitter๋ฅผ ์ด์ฉํ์ธ์:
์ ์
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers! ๐ [Become a backer]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]