Hyper Text Markup Language ์น์ ์ด๋ฃจ๋ ๊ฐ์ฅ ๊ธฐ์ด์ ์ธ ๊ตฌ์ฑ์์ ์น ํ์ด์ง ํ์ ์ํด ๊ฐ๋ฐ๋ ํ์ค ๋งํฌ์ ์ธ์ด์น ๋ฌธ์๋ฅผ ๊ตฌ์ฑํ๋ ๋ช ๋ น์ด๊บฝ์ ์์ ์๋ ์ ๋ณด๋ฅผ ์ ์ํ๋ ํ์์ผ๋ก ์์ํ๊ทธ์ ์ข ๋ฃ ํ๊ทธ ๋ ์ข ๋ฅ์ข ๋ฃ ํ๊ทธ๊ฐ ์๋ <br /><h
์๋ฏธ๊ฐ ์๋ ์์๋ฅผ ๋งํ๋ฉฐ ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ์ ๋ชจ๋์๊ฒ ์๋ฏธ๋ฅผ ๋ช ํํ๊ฒ ์ค๋ช ํจSemantic : <form>,<article>, <table> ๋ฑ์ ๋ด์ฉ ๋ช ํํ๊ฒ ์ ์Non-Sementic : <div>, <span> ๋ฑ์ ๋ด์ฉ์ ๋ํด ์๋ฌด๊ฒ๋
<!DOCTYPE html>HTML ๋ฌธ์ ๋งจ ์ฒ์์ ๋ฐ๋์ ๋ช ์ํด ์ด ๋ฌธ์์ ๋ฒ์ ๋ํ๋<html>์ด ๋ฌธ์๊ฐ html๋ก ์์ฑ๋์์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ฆผ๋ฌธ์์ ์์๊ณผ ๋์ ์๋ฆฌ๋ ํ๊ทธlang ์์ฑ์ผ๋ก ๋ฌธ์์ ์ธ์ด ์ค์ ๊ฐ๋ฅ<head>๋ฉํ ๋ฐ์ดํฐ์ ํ์ดํ์ ๋ฃ
<h1>~<h6> ์ด๋ฉฐ ์ฃผ๋ก ์น ํ์ด์ง์ ํ์ํ๋ ค๋ ์ ๋ชฉ์ผ๋ก ์ฌ์ฉ<h1>์ ํ๋์ ํ์ด์ง์์ ์ ์ผ ํฐ ์ฃผ์ ๋ฅผ ์ํด ํ ๋ฒ๋ง ์ฐ๋๊ฒ ์ข์๋จ๋ฝํ๊ทธ <p>๋ ๋ฌธ๋จ์ ์ ์ํ ๋ ์ฌ์ฉ\-<pre> ํ๊ทธ๋ ๋ฏธ๋ฆฌ ์ ์๋ ํ์์ ํ ์ค๋ฅผ ์ ์ํ ๋ ์ฌ์ฉ์์
Cascading Style Sheets์ฌ์ฉ์์๊ฒ ๋ฌธ์๋ฅผ ํ์ํ๋ ๋ฐฉ๋ฒ์ ์ง์ ํ๋ ์ธ์ด์น ์ฌ์ดํธ์์ ํ๋ฉด์ ํ์ํ๋ ์ ๋ณด๋ค์ ๊พธ๋ฉฐ์ฃผ๋ ์ญํ HTML์ ๋ฌธ์ฅ ๊ตฌ์กฐ ๋ง๋ค๊ณ , CSS๋ ๋ฌธ์ฅ์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ด๋ป๊ฒ ๋ณด์ฌ์ค์ง ์ง์ ํ๋ ์ธ์ด ( ๊ตฌ์กฐ : HTML , ๋์์ธ : CSS
CSS๋ก ํน์ ์์๋ฅผ ๋์์ผ๋ก ์ง์ ๊ฐ๋ฅ์์์ ํด๋์ค๋ฅผ ์ถ๊ฐ์ฌ๋ฌ ์์๊ฐ ๋์ผํ ํด๋์ค๋ฅผ ๊ฐ์ง ์ ์์์์๋ ๊ณต๋ฐฑ์ผ๋ก ๊ตฌ๋ถ๋ ํด๋์ค๋ฅผ ์ฌ๋ฌ ๊ฐ ๊ฐ์ง ์ ์์transition : <property> <duration>์คํ์ผ ๋ณ๊ฒฝ์ ๋ถ๋๋ฝ๊ฒ ์ ํ (์ฃผ๋ก ํธ๋ฒ๋ง์
๐ John Ahn - https://inf.run/MzQn
๐ Flexbox ์์๋ฅผ ํจ์จ์ ์ด๊ณ ๋์ ์ผ๋ก ๋ฐฐ์ดํ ์ ์๋ ๋ ์ด์์ ๋ชจ๋ธ ์ด ๋ ์ด์์์ 1์ฐจ์์ด๋ฉฐ ๊ณต๊ฐ์ด ๊ท ๋ฑํ๊ฒ ๋ถ์ฐ๋ ์ปจํ ์ด๋ ๋ด๋ถ์ ์์๋ฅผ ๋ฐฐ์นํ ์ ์์ - Main/Cross Axis Flexbox๋ก ์์ ํ ๋ ์ฃผ์ถ(Main Axis)๊ณผ ๊ต์ฐจ์ถ(Cross
๐ Grid CSS Grid๋ 2์ฐจ์(ํ๊ณผ ์ด)์ ๋ ์ด์์ ์์คํ ์ ์ ๊ณต (ํ๊ณผ ์ด ๋ชจ๋) Flexible Box๋ ๋จ์ํ 1์ฐจ์ฐ๋ ๋ ์ด์์(ํ, ์ด ์ค ํ๋)๋ฅผ ์ ๊ณต - gap - grid-template-columns/rows : ๊ณต๋ฐฑ์ผ๋ก ๊ตฌ๋ถ๋ ๊ฐ ๋ชฉ๋ก์ผ๋ก
CSS ๋ค์๊ณต๋ถํ๋น