Notice
Recent Posts
Recent Comments
Link
์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- onsnapshot
- ๋ ธ๋ง๋์ฝ๋
- ํฌํธํด๋ฆฌ์ค
- firebase
- ํด๋ก ์ฝ๋ฉ
- styled-components
- sort
- ๋ฐ์ํ์คํจ2
- ๋คํฌ๋ชจ๋
- ํ์ ์คํฌ๋ฆฝํธ
- reduce
- ๋ผ์ดํธ๋ชจ๋
- ๊ฐ๋ฐ์๋ถํด๋ฝ
Archives
- Today
- Total
rigood
[HTML] ์๋์์ฑ ๊ธฐ๋ณธ ํ ํ๋ฆฟ ๋ณธ๋ฌธ
VS Code์์ !์ ๋๋ฅด๊ณ ์ํฐ๋ฅผ ์น๋ฉด ๋์ค๋ HTML ๊ธฐ๋ณธ ํ ํ๋ฆฟ์ ๋ํด์ ์์๋ณด์๋ค.

<!DOCTYPE html>
- DOCTYPE ์ ์ธ๋ฌธ์ ์น๋ธ๋ผ์ฐ์ ์๊ฒ HTML ๋ฒ์ ์ ์๋ ค์ฃผ๋ ์ญํ ์ ํ๋ค. ๋ฒ์ ๋ง๋ค ์ ์ธ ๋ฐฉ์์ด ๋ค๋ฅด๋ฉฐ, HTML5์์๋ ์์ ๊ฐ์ด ๊ฐ๋จํ ์ ์ธํ ์ ์๋ค.
- HTML ํ๊ทธ๋ ์๋๋, <html> ํ๊ทธ ์ ์ ๊ฐ์ฅ ๋จผ์ ์ ์ธํด์ค์ผ ํ๋ค.
<html lang="en"></html>
- html ํ๊ทธ๋ HTML ๋ฌธ์์ ๋ฃจํธ ์์๋ฅผ ์ ์ํ ๋ ์ฌ์ฉ๋๋ฉฐ, DOCTYPE ์ ์ธ์ ์ ์ธํ ๋ชจ๋ HTML ์์๋ฅผ ํฌํจํ๊ธฐ ์ํ ์ปจํ ์ด๋์ด๋ค.
- lang ์์ฑ์ ์น๋ฌธ์ ์ ์ฒด ๋๋ ์ผ๋ถ์ ์ธ์ด๋ฅผ ์ง์ ํด์ฃผ๋ ์์ฑ์ผ๋ก, ์ธ์ด ์ค์ ์ ๋ฐ๋ผ ์คํฌ๋ฆฐ๋ฆฌ๋, ๊ฒ์์์ง ๋ฐ ๋ธ๋ผ์ฐ์ ์ง์์ด ๋ฌ๋ผ์ง๋ค. ISO ์ธ์ด์ฝ๋(ex: ko) ๋๋ ์ธ์ด์ฝ๋-๊ตญ๊ฐ์ฝ๋(ex: en-US)๋ฅผ ์ฌ์ฉํ๋ค.
<meta charset="UTF-8" />
- meta ํ๊ทธ์ charset ์์ฑ์ HTML ๋ฌธ์์ ๋ฌธ์ ์ธ์ฝ๋ฉ ๋ฐฉ์์ ๋ช ์ํ ๋ ์ฌ์ฉ๋๋ค.
- UTF-8์ด๋ ์ ๋์ฝ๋(์ ์ธ๊ณ ๋ฌธ์๋ฅผ ํ์ค์ฝ๋๋ก ๋ํ๋ธ ํ)๋ฅผ ์ธ์ฝ๋ฉ(์ ๋์ฝ๋๋ฅผ ์ปดํจํฐ ๋ถํธ๋ก ๋ณํ)ํ๋ ๋ฐฉ์์ ๋งํ๋ค.
- ASCII: ์๋ฌธ ๋์๋ฌธ์+ํน์๋ฌธ์ 128๊ฐ๋ฅผ 1byte๋ก ํํ, ํ๊ธ ํํ๋ถ๊ฐ
- EUC-KR: ํ๊ธ์ 2byte๋ก ํํ, ์์ฑํ์ฝ๋(๊ธ์์ ์ฝ๋ 1:1 ๋งค์นญ)์ด๋ฏ๋ก ์ฝ๋ํ์ ์๋ ํ๊ธ ํํ๋ถ๊ฐ
- ์ ๋์ฝ๋: ์ ์ธ๊ณ ๋ชจ๋ ๋ฌธ์๋ฅผ ํํํ๋ฉฐ ํ๊ธ์ 3byte๋ก ํํ, ๋ฌธ์์ ๋ฐ๋ผ ํํํ๋ byte๊ฐ ๋ฌ๋ผ์ง๋ฏ๋ก ๋ค์ํ ์ธ์ฝ๋ฉ ๋ฐฉ์์ด ์กด์ฌ, ๊ฐ์ฅ ๋ํ์ ์ธ ๊ฒ์ด UTF-8 ๋ฐฉ์์ผ๋ก ์์คํค์ฝ๋๋ 1byte๋ก ํํํ๊ณ , ์ฒซ๋ฒ์งธ byte์ ์์ bit์ ๋ฐ๋ผ ๋ช byte๋ก ์ธ์ฝ๋ฉํ ์ง๋ฅผ ๊ฒฐ์
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
- meta ํ๊ทธ์ X-UA-Compatible ์์ฑ๊ฐ์ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๊ฐ ์นํ์ด์ง๋ฅผ ํ์ํ ๋ content์ ๋ช ์๋ ์์ฑ๊ฐ์ ๋ฐ๋ผ ๋ ๋๋ง ํ๋๋ก ํ ๋ ์ฌ์ฉ๋๋ค.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- viewport๋ ์นํ์ด์ง๊ฐ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ง๋ ์์ญ์ ์๋ฏธํ๋ค. meta ํ๊ทธ์ viewport ์์ฑ๊ฐ์ ๋ชจ๋ฐ์ผ์์ viewport ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค. PC์์๋ ๋ธ๋ผ์ฐ์ ์ฐฝ์ ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝํ์ฌ viewport๋ฅผ ๋ฐ๊ฟ ์ ์์ง๋ง, ๋ชจ๋ฐ์ผ์์๋ ๋ธ๋ผ์ฐ์ ์ฐฝ์ ํฌ๊ธฐ๊ฐ ๊ณ ์ ๋๋ฏ๋ก viewport์ ๋๋น์ ๋ฐฐ์จ์ ์กฐ์ ํด์ผ ํ๋ค. ์ ํ๊ทธ๋ viewport ๋๋น๋ ๊ธฐ๊ธฐ ๋๋น๋ก, ์ด๊ธฐ ๋ฐฐ์จ์ 1๋ก ์ค์ ํ๋ค๋ ์๋ฏธ์ด๋ค.
<link rel="stylesheet" href="" />
<link rel="shortcut icon" href="" type="image/x-icon" />
- link ํ๊ทธ๋ ํ์ฌ ๋ฌธ์์ ์ธ๋ถ ๋ฆฌ์์ค์ ๊ด๊ณ๋ฅผ ๋ช ์ํ๋ฉฐ, ์คํ์ผ์ํธ๋ฅผ ์ฐ๊ฒฐํ ๋ ์ ์ผ ๋ง์ด ์ฌ์ฉ๋์ง๋ง, ์์ด์ฝ ์ฐ๊ฒฐ ๋ฑ ๋ค์ํ ์ฉ๋๋ก๋ ์ฐ์ธ๋ค.
'๐จ ํ๋ก ํธ์๋ > html & css' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[CSS] word-wrap, overflow-wrap, word-break ์ฐจ์ด์ (0) | 2023.06.06 |
---|---|
[HTML] script ํ๊ทธ์ defer, async (0) | 2023.04.30 |
[CSS] flex-wrap (0) | 2023.01.02 |