๐ Crucial : Paragraph Elements, HTML Headings, HTML Lists, HTML Anchor Tags, HTML Images, HTML Boilerplate
๐ Important : Using MDN as a Resource,The Chrome Inspector
๐ Nice To Have : VSCode Formatting On Save
HTML(HyperText Markup Language)
โช๏ธ ์นํ์ด์ง์ ๋ช ์ฌ๊ฐ์ ์ญํ , ์ฝํ ์ธ ์ ๊ตฌ์กฐ๋ฅผ ๊ท์ ํ๋ ๊ฒ, ํ์ด์ง์ ๋ฌด์์ด ์๋์ง ๋ํ๋
โช๏ธ ๋งํฌ์ ์ธ์ด, ์์ ํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ์๋, ์นํ์ด์ง๋ผ๋ ๋ฌธ์์ ๋งํฌ์ ์ ํ๊ธฐ ์ํ ์ธ์ด
โช๏ธ ํ ์คํธ ๋ฌธ์ -> ๋งํฌ์ -> ๊ตฌ์กฐํ
โช๏ธ HTTP ์์ฒญ -> ๋ธ๋ผ์ฐ์ ๋ ์๋ฒ์์ HTML...์ด ํฌํจ๋ ์ฝ๋๋ฅผ ๋ฐ์
HTML Elements(์์)
โช๏ธ ํ๊ทธ๋ก ํ ์คํธ๋ฅผ ๊ฐ์ธ์ ๋ฒ์๋ฅผ ์ง์
โช๏ธ ์ฌ๋ ํ๊ทธ์ ๋ซ๋ ํ๊ทธ๊ฐ ํ์, ๊ทธ๋์ผ์ง ์ด๋๊น์ง ๊ตฌ์กฐ๋ฅผ ๋ณํ์ํฌ์ง ์ ์ ์๊ธฐ ๋๋ฌธ
Mozilla Developer Network(MDN)
โช๏ธ HTML, CSS, javaScript์ ๋ฐฑ๊ณผ์ฌ์
โช๏ธ Reference๋ฅผ ํด๋ฆญํ๋ฉด Element Reference๊ฐ ์์. ๋ชจ๋ HTML ํ๊ทธ๋ฅผ ํ์ธํ๊ณ ์ง์ ์ฒดํํด๋ณผ ์ ์์
Paragraph Elements, <p>
โช๏ธ <p>๋ ๋จ๋ฝ ํ๊ทธ, ๋จ๋ฝ์ฒ๋ผ ๋ฌถ๊ณ ์ถ์ ๋ชจ๋ ๊ฒ์ p๋ก ๋ฌถ์ ์ ์์
โช๏ธ ๋จ๋ฝ์ ๋ฌถ์ผ๋ฉด ์ค๊ฐ์ ํ์ค์ด ๋น์์ง๋๋ฐ ์ด๊ฒ์ block level element๋ผ๊ณ ํจ ->ํ๋ธ๋ก์ ๊ณต๊ฐ์ ์ฐจ์งํ๋ค๋ ๋ป
Heading Elements, <h1><h2> ... <h6>
โช๏ธ ์ซ์๊ฐ ์์์๋ก ๋ ์์ ์ฃผ์ ์ ์ ๋ชฉ(ํฌ๊ธฐ), ์ด ํ๊ทธ๋ก ๊ธ์์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋ ค๊ณ ํ๋ฉด ์๋จ(ํฌ๊ธฐ๊ฐ ์ค์ํ๊ฒ ์๋)
โ๏ธ <h1> : ํ์ด์ง์ ์ต์๋จ์ ์์ด์ผํ๋ฉฐ, ํ ํ์ด์ง์ ๋จ 1๊ฐ๋ง ์์ด์ผํจ, ํ ํ์ด์ง์ ์ต์์ ์ฃผ์ ๊ฐ ๋๊ฐ์ง์ผ ์ ์๊ธฐ ๋๋ฌธ
โ lorem : ์ด๋ผ๊ณ ์์ฑํ๋ฉด ์์์ ํ ์คํธ๊ฐ ์์ฑ๋จ, ๊ทธ๋ฅ ์์๋ก ๊ธ์ ์ฑ์ฐ๊ธฐ์ฉ, lorem*5 ํ๋ฉด 5๋ฒ ๋์ด
<h1>๊ณผ <h2>๊ฐ ์๋๋ฐ <h3> (ํ์ ํ์ดํ) ์ฌ์ฉ ๋ถ๊ฐ๋ฅ -> ๊ฐ์ ์๋ฏธ๊ฐ ์๊ธฐ ๋๋ฌธ์ ๊ทธ๋ฅ ์ฌ์ฉํ๋ฉด ์๋จ
โช๏ธ Heading์ ํ์ด์ง์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค๊ณ , ํต์ฌ ์ฃผ์ ์ ํ์ ์ฃผ์ ๋ฅผ ํ์ํ๋ ์ญํ ์ ์ํ
Exercise - Pangolin Practice
Chrome Developer Tools - Inspector(๊ฒ์ฌ)
โช๏ธ ๋ชจ๋ ํ์ด์ง์์ ์ฌ์ฉ๊ฐ๋ฅ, ํ์ด์ง์ ํ ์คํธ๋ฅผ ์ ํํ๋ฉด ์ด๋ค ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋์ง ํ์ธํ ์ ์์
HTML Skeleton(Boilerplate, ๊ณจ์)
โช๏ธ HTML ๋ฌธ์๋ผ๋ฉด ํ์์ ์ผ๋ก ๊ฐ์ถฐ์ผ ํ๋ ๊ตฌ์กฐ๊ฐ ์์ -> HTML Boilerplate
โ๏ธ<!DOCTYPE html> : HTML5๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค๋ ํ์, html์ ์ต์ ๊ท๊ฒฉ์ ์ฌ์ฉ์ค์ด๋ผ๋ ํ์
โ๏ธ<html> : ๋ฃจํธ์์, ๋ฌธ์์ ์ต์์ ์์, ํ์ด์ง์ ๋ค๋ฅธ ์์๋ ์ด ๋ฃจํธ์์๋ฅผ ๊ทผ๊ฐ์ผ๋ก ํจ, head์ body๊ฐ ํ๋์ฉ ์์ด์ผํจ
โ๏ธ<head> : ๋ฉํ๋ฐ์ดํฐ ์์, ํ์ด์ง ์์ ๋ณด์ด์ง ์๋ ๋ด์ฉ ํฌํจ
โ๏ธ<title> : ๋ธ๋ผ์ฐ์ ํญ์ ํ์๋๋ ์ ๋ชฉ์ ์ค์ ํ๋ ํ๊ทธ, ๊ตฌ๊ธ์ ํ์ดํ ์์๋ก ๊ฒ์ํจ, ํ์ดํ ์๋ ๊ฒฝ์ฐ ๊ทธ๋ฅ ํ์ผ์ ์ด๋ฆ
โ๏ธ<body> : ๋ฌธ์์ ๋ชจ๋ ์ปจํ ์ธ ํฌํจ
โ (! + Tab) : VScode์์ ๊ธฐ๋ณธ์ ์ธ ๊ณจ๊ฒฉ์ด ์๋์ผ๋ก ์์ฑ๋จ.
VSCode Formatting On Save - ์๋์ ๋ ฌ, ๋ค์ฌ์ฐ๊ธฐ
โช๏ธ vscode์์ ์ ์ฅํ๋ฉด ์ ๋ ฌ๋๊ฒ ์ค์ ํด๋์ผ๋ฉด ๋งค์ฐ ๊ฐํธ -> ์ด๊ฑฐ ์ง์ง ํธํ๋ค!
HTML Lists
โ๏ธ<ol> : ordered list , ์ซ์๋ก ํ์๋๋ ๋ฆฌ์คํธ
โ๏ธ<ul> : unordered list, ์ ์ผ๋ก ํ์๋๋ ๋ฆฌ์คํธ
โ๏ธ<li> : ๋ชฉ๋ก ์์ดํ , ol์ด๋ ul ์์ ๋ค์ด๊ฐ์ ๋ฆฌ์คํธ์์ ํ์ ์์๋ฅผ ๋ํ๋
โช๏ธ ol์ด๋ ul ์์๋ li๋ง ๋ค์ด๊ฐ ์ ์์ง๋ง, li ์์๋ ๋ค์ํ ํ๊ทธ๊ฐ ๋ค์ด๊ฐ ์ ์์, ์ค์ฒฉํ๊ณ ์ถ์ผ๋ฉด li ์์ ๋ค์ ๋ฆฌ์คํธ ์์ฑ
โ (shift + alt + ๋ฐฉํฅํค ์๋) : ํ๊ทธ๊ฐ ๋ณต์ ๋จ
Exercise - Favorite Movies Exercises
HTML Anchor Tags
โ๏ธ<a> : ์ต์ปค ํ๊ทธ, ํ์ดํผ๋งํฌ๋ฅผ ์ฐ๊ฒฐํ ์ ์๋ ํ๊ทธ, ํ์์ ์ผ๋ก ๋ชฉ์ ์ง์ ๋ํ ์ ๋ณด๊ฐ ํฌํจ๋์ด์ผํจ
โช๏ธ attribute(์์ฑ) : html์์ ํ๊ทธ์ ๋ถ์ฌํ ์ ์๋ ์์ ์ ๋ณด, ํ๊ทธ ์ฌ์ด๊ฐ ์๋๋ผ ์ ํ๊ทธ์ ์์ ๋ค์ด๊ฐ
โ๏ธ<a href=""> : href(hypertext references), ๋ฐ์ดํ ์ฌ์ด์ ๋งํฌ๋ฅผ ๋ฃ์ด์ค, ํ์ผ ํ๋กํ ์ฝ์์ http๋ฅผ ๋ฃ์ด์ค์ผ ์ ๋๋ก ์๋, ๊ฐ์ ํด๋์์ ์์ผ๋ฉด ํ์ผ ์ด๋ฆ๋ง ์์ฑํด๋ ๊ด์ฐฎ์
HTML Images
โช๏ธ ์ด๋ฏธ์ง ์์๋ ์ด๊ณ ๋ซ๋ ํ๊ทธ๊ฐ ์์, ๊ทธ๋ฅ ํ๋์ ํ๊ทธ๋ง ์์ฑํ๋ฉด ๋จ, ์ด๋ฏธ์ง๋ ์ฌ์ด์ ๋ญ๊ฐ๋ฅผ ์ฝ์ ํ ํ์๊ฐ ์๊ธฐ ๋๋ฌธ
โ๏ธ<img src=""> : src๋ source๋ก ์ด๋ฏธ์ง์ ์์น๋ฅผ ์์ฑํด์ค์ผํจ, ํ์ผ๋ช ๊ณผ ํ์ฅ์๋ฅผ ์ ํํ๊ฒ ์์ฑ
โช๏ธ ํฌ๊ธฐ์กฐ์ html์์๋ ๊ฐ๋ฅํ์ง๋ง, css์์ ์์ ํ๋ ๊ฒ์ ์ถ์ฒ
โช๏ธ ์ ์ฅ๋ ์ฌ์ง์ด ์๋ ์จ๋ผ์ธ ์์ ์ฌ์ง๋ ์ฝ์ ํ ์ ์์, ์ด๋ฏธ์ง ๋งํฌ๋ฅผ ๋ณต์ฌํด์ ์ ๋ ฅํ๋ฉด ๋จ
โ๏ธ<img alt=""> : ์ด๋ฏธ์ง์ ์ค๋ช ์ ๋ฃ์ ์ ์์, ์ด๋ฏธ์ง๊ฐ ๋ก๋๋์ง ์์ผ๋ฉด ์ด ํ ์คํธ๊ฐ ๋ถ๋ฌ์์ง๋ฉด์ ์ฌ์ง์ ์ค๋ช ํด์ค
HTML Comment(์ฃผ์)
โช๏ธ ๋ธ๋ผ์ฐ์ ์์๋ ๋ณด์ด์ง ์๊ณ , ๋ฉ๋ชจ๋ ํผ๋๋ฐฑ, ๋ฆฌ๋ง์ธ๋ ์ฉ๋๋ก ์ ์
โ๏ธ<!--> <--> : ์ด ์ฌ์ด์ ์ฃผ์ ์ ์ด์ฃผ๋ฉด ๋จ
โ ( ctrl + / ) : ์ฃผ์ ๋จ์ถํค, ์ฃผ์์ ์ง์ ํ๊ฑฐ๋ ์ ๊ฑฐํ ์ ์์
Exercise - Wolf Images & Link Exercise
'๊ณต๋ถ ๊ธฐ๋ก > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Udemy] The Web Developer Bootcamp 2022 : [7] CSS Selector (0) | 2022.07.11 |
|---|---|
| [Udemy] The Web Developer Bootcamp 2022 : [6] CSS ๊ธฐ์ด (1) | 2022.07.09 |
| [Udemy] The Web Developer Bootcamp 2022 : [5] HTML form, table (0) | 2022.07.03 |
| [Udemy] The Web Developer Bootcamp 2022 : [4] HTML Semantics (0) | 2022.06.22 |
| [Udemy] The Web Developer Bootcamp 2022 : [2] ์น ๊ฐ๋ฐ์ด๋? (1) | 2022.06.16 |
