๐ช Programming
๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด๋ ๋ฆฌ์กํธ Lazy Loading ์ง์ฐ ๋ก๋ฉ
๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด๋ ๋ฆฌ์กํธ Lazy Loading ์ง์ฐ ๋ก๋ฉ
2024.05.04์นํ์ด์ง์์ ์ฑ๋ฅ์ ์ํฅ์ ๊ฐ์ฅ ๋ง์ด ์ฃผ๋ ๋ถ๋ถ์ด ์ด๋ฏธ์ง / ๋น๋์ค ๊ฐ์ ๋ฏธ๋์ด ์์๋ค. ํนํ ์ด๋ฏธ์ง๋ ๋ฐฐ๋, ์ ํ ์ฌ์ง, ๋ก๊ณ ๋ฑ ํ์ด์ง ๊ตฌ์๊ตฌ์์์ ์ฌ์ฉํ๋ค. HTTP Archive Data์ ๋ฐ๋ฅด๋ฉด ์ ์ฒด ์นํ์ด์ง ์ฉ๋์ 45%๋ฅผ ์ด๋ฏธ์ง๊ฐ ์ฐจ์งํ๋ค๊ณ ํ๋ค. ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ง ์๋๊ฑด ๋ถ๊ฐ๋ฅํ์ง๋ง, ํ๋ฉด์ ๋
ธ์ถ๋ ๋๋ง ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ผ๋ก ํ์ด์ง ๋ก๋ฉ ์๊ฐ์ ๋จ์ถ์ํฌ ์ ์๋ค. ์ด๋ฐ ๋ฐฉ์์ Lazy Loading์ด๋ผ๊ณ ํ๋ค. Lazy Loading ๊ตฌํ ๋ฐฉ๋ฒ๐ก Lazy Loading์ด ์ ์ฉ๋ ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ์ ๊ทผ์ ํด์ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ๋ฉด ์ฝํ
์ธ ๊ฐ ๋ฐ๋ ค๋๋ ํ์์ด ๋ฐ์ํ๋ค. ์ด๋ฅผ ๋ฐฉ์งํ๋ ค๋ฉด ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ธ๋ ์ปจํ
์ด๋ ์์์ ๋์ด / ๋๋น๋ฅผ ์ง์ ํ๋ฉด ๋๋ค. Lazy Loading์ ํฌ๊ฒ Chrome Na..
๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด๋ ๋ฆฌ์กํธ ๋ฌดํ ์คํฌ๋กค Infinite Scroll
๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด๋ ๋ฆฌ์กํธ ๋ฌดํ ์คํฌ๋กค Infinite Scroll
2024.05.041) ์คํฌ๋กค ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ ๋ฐฉ๋ฒ๋ฌดํ ์คํฌ๋กค์ ํ์ฌ ํ์ด์ง์์ ์คํฌ๋กค๋ฐ๊ฐ ๋ง์ง๋ง ์ฝํ
์ธ ์ง์ ์ ์์ ๋ ๋ค์ ์ฝํ
์ธ ๋ฅผ ์๋์ผ๋ก ๋ถ๋ฌ์ค๋ ๊ตฌํ ๋ฐฉ์์ ๋งํ๋ค. โ์คํฌ๋กคํด์ ๊ฐ๋ ค์ง ์์ญ์ ๋์ด์ โํ์ฌ ํ๋ฉด(๋ทฐํฌํธ)์ ๋์ด๋ฅผ ๋ํ ๊ฐ์ด โ์ ์ฒด ๋ฌธ์์ ๋์ด์ ๊ฐ๋ค๋ฉด ํ์ฌ ์คํฌ๋กค์ด ๊ฐ์ฅ ํ๋จ ๋์ ๋๋ฌํ๋ค๋ ๊ฑธ ์ ์ ์๋ค. ์์์ผ ํ ๊ธฐํ ํ๋กํผํฐ โถ ์คํฌ๋กคํด์ ๊ฐ๋ ค์ง ์ฝํ
์ธ ์์ญ์ ๋์ด : document.documentElement.scrollTop โท ํ์ฌ ํ๋ฉด(๋ทฐํฌํธ)์ ๋์ดwindow.innerHeight : ์คํฌ๋กค๋ฐ ํฌํจdocument.documentElement.clientHeight : ์คํฌ๋กค๋ฐ ์ ์ธ โธ ์ ์ฒด ๋ฌธ์์ ๋์ด// ๋ฌธ์์ ์ ํํ ์ ์ฒด ๋์ด๋ฅผ ๊ตฌํ๊ธฐ ์ํ ์ฝ๋const scrollHei..
์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ํ๊ฐ ์์์ ๊ฒฐํฉ์ฑ
์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ํ๊ฐ ์์์ ๊ฒฐํฉ์ฑ
2024.05.03ํํ์์ ํ๊ฐ ์์let foo = { n: 1 };let bar = foo; // foo ๊ฐ์ฒด์ ์ฐธ์กฐ ์ฃผ์๊ฐ bar ๋ณ์์ ํ ๋น๋จfoo.x = foo = { n: 2 }; // ๊ฐ์ ๋ฐํํ๋ ํ ๋น ์ฐ์ฐ์console.log(foo.x); // ? ์ ๋ฌธ์ ๋ฅผ ์ผํ๋ณด๋ฉด foo.x์ ๊ฒฐ๊ณผ๋ { n: 2 }์ผ ๊ฒ ๊ฐ์ง๋ง ์๋๋ค. foo.x๋ undefined๋ฅผ ์ถ๋ ฅํ๋ค. ์ ์ฝ๋์ ์ฐ์ฐ ๊ณผ์ ์ ํ๋ํ๋ ํ์ด๋ณด๋ฉด ์๋์ ๊ฐ๋ค. ์ผ์ชฝ ํํ์ ํ๊ฐ์ฐ์ธก ํํ์์ด ํ๊ฐํ ๊ฐ์ด ํ ๋น๋ ๊ณณ์ ๊ฒฐ์ ํ๊ธฐ ์ํด foo.x๊ฐ ํ์ฌ ์ฐธ์กฐํ๋ ๊ฐ์ฒด { n: 1 } ํ์ธ์ค๋ฅธ์ชฝ ํํ์ ํ๊ฐํ ๋น๋ ๊ณณ์ ๊ฒฐ์ ํ๊ธฐ ์ํด foo ๋ณ์๊ฐ ํ์ฌ ์ฐธ์กฐํ๋ ๊ฐ์ฒด { n: 1 } ํ์ธ์๋ก์ด ๊ฐ์ฒด { n: 2 }๊ฐ foo ๋ณ์์ ํ ๋น๋๊ณ ํด๋น ๊ฐ์ฒด ๋ฐํ..
์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ ์ดํฐ Generator ์ด ์ ๋ฆฌ
์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ ์ดํฐ Generator ์ด ์ ๋ฆฌ
2024.05.03์ ๋๋ ์ดํฐ๋ ES6์ ๋์
๋ ํน์ํ ํจ์๋ค. ํจ์ ํธ์ถ์๊ฐ ํจ์ ์คํ์ ์ ์ดํ ์ ์๊ณ , ํจ์ ํธ์ถ์์ ํจ์ ์ํ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์๋ ์๋ค. ์ด๋ฐ ํน์ง ๋๋ฌธ์ ์ ๋๋ ์ดํฐ ํจ์์์ ์ฝ๋ ๋ธ๋ก์ ์คํ์ ์ ์ ๋ฉ์ท๋ค๊ฐ ํ์ํ ์์ ์ ์ฌ๊ฐํ ์ ์๋ค. ์ผ๋ฐ ํจ์๋ 0~1๊ฐ ๊ฐ๋ง ๋ฐํํ ์ ์์ง๋ง, ์ ๋๋ ์ดํฐ ํจ์๋ ์ฌ๋ฌ๊ฐ์ ๊ฐ์ ํ์์ ๋ฐ๋ผ ํ๋์ฉ ๋ฐํํ ์ ์๋ค. ์ ๋๋ ์ดํฐ ํจ์์ ํน์งํจ์ ํธ์ถ์์๊ฒ ํจ์ ์คํ์ ์ ์ด๊ถ์ ์๋(yield)ํ ์ ์๋ค์ผ๋ฐ ํจ์ : ํจ์ ํธ์ถ์(caller)๋ ํจ์๋ฅผ ํธ์ถํ ์ดํ ํจ์ ์คํ์ ์ ์ดํ ์ ์๋ค.์ ๋๋ ์ดํฐ ํจ์ : ํจ์ ํธ์ถ์๊ฐ ํจ์ ์คํ์ ์ ์ดํ ์ ์๋ค(ํจ์ ์คํ ์ผ์ ์ ์ง / ์ฌ๊ฐ)ํจ์ ํธ์ถ์์ ํจ์ ์ํ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์๋ค์ผ๋ฐ ํจ์ : ๋งค๊ฐ๋ณ์๋ฅผ ํตํด ๊ฐ์ ์ ๋ฌ๋ฐ..
์๋ฐ์คํฌ๋ฆฝํธ ์ดํฐ๋ฌ๋ธ Iterable ์ด ์ ๋ฆฌ
์๋ฐ์คํฌ๋ฆฝํธ ์ดํฐ๋ฌ๋ธ Iterable ์ด ์ ๋ฆฌ
2024.05.03TL;DR โญ๏ธSymbol.iterator ๋ฉ์๋๊ฐ ๊ตฌํ๋์ด ์๋ ๊ฐ์ฒด๋ฅผ ์ดํฐ๋ฌ๋ธ(iterable)์ด๋ผ๊ณ ํ๋ค. ๊ฐ๋จํ ๋งํ๋ฉด ์ดํฐ๋ฌ๋ธ์ ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด๋ค. ๋ฐฐ์ด, ๋ฌธ์์ด์ Symbol.iterator ๋ฉ์๋๊ฐ ์ด๋ฏธ ๊ตฌํ๋์ด ์๋ ๋ํ์ ์ธ ๋ด์ฅ ์ดํฐ๋ฌ๋ธ์ด๋ค. ์ดํฐ๋ฌ๋ธ์ ์ฌ์ฉํ๋ฉด ์ด๋ค ๊ฐ์ฒด๋ โfor of ๋ฐ๋ณต๋ฌธ โ์ ๊ฐ ๋ฌธ๋ฒ โ๋ฐฐ์ด ๊ตฌ์กฐ๋ถํด ํ ๋น์ ๋์์ผ๋ก ์ฌ์ฉํ ์๋ ์๋ค. โถ for of ๋ฌธ์ ์ฌ์ฉํ ์ ์๋ ๊ฐ์ฒด๋ฅผ ์ดํฐ๋ฌ๋ธ์ด๋ผ๊ณ ํ๋ค โท ์ดํฐ๋ฌ๋ธ์ Symbol.iterator ๋ฉ์๋(ํน์ ํ๋กํ ํ์
์ฒด์ธ์ ์ํด ์์)๊ฐ ๊ตฌํ๋์ด ์์ด์ผ ํ๋ค.Symbol.iterator๋ for of์ ์ํด ์๋์ผ๋ก ํธ์ถ๋๋ฉฐ, ๋ช
์์ ์ผ๋ก ํธ์ถํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋คSymbol.iterator ๋ฉ์๋๊ฐ ๋ฐํํ๋ ๊ฐ์ฒด๋ “์ด..
๋ฆฌ์กํธ ํ์๊ธฐ(TypeWriter) ํจ๊ณผ ๊ตฌํํ๊ธฐ feat.์ ๋๋ ์ดํฐ
๋ฆฌ์กํธ ํ์๊ธฐ(TypeWriter) ํจ๊ณผ ๊ตฌํํ๊ธฐ feat.์ ๋๋ ์ดํฐ
2024.05.03๊ธฐ๋ณธ ๋ก์งํ์๊ธฐ๋ก ํ ๊ธ์์ฉ ์
๋ ฅํ๋ ํจ๊ณผ(Typewriter Effect)๋ ์ด๋ฏธ ์ ๋ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ง๋ง, setInterval ํ์ด๋จธ API๋ฅผ ์ด์ฉํด์ ์ง์ ๊ตฌํํ ์ ์๋ค. ์๋ ๋ฌธ์ฅ(ํ
์คํธ)์ ํ ๊ธ์์ฉ ์๋ฅธ ํ ๊ฐ์ฅ ์์ ๊ธ์๋ถํฐ ํ๋์ฉ ์ด์ด ๋ถ์ด๋ ๋ฐฉ์์ด๋ค. // JSconst $content = document.querySelector('.content');function typewriter(target, sentence, speed = 200) { const split = sentence.split(''); let text = ''; let i = 0; const timer = setInterval(() => { if (i ๊น๋นก์ด๋ ์ปค์ ํจ๊ณผ๋ | ์ฝํ
์ธ ๋ฅผ ๊ฐ๋ ..
์์ดํฐ ์ฌํ๋ฆฌ 100vh ์ด์ ํด๊ฒฐ
์์ดํฐ ์ฌํ๋ฆฌ 100vh ์ด์ ํด๊ฒฐ
2024.05.03iOS์ ์ฌํ๋ฆฌ์์ 100vh ์์ฑ ๊ฐ์ด ๋ค์ ๋ค๋ฅด๊ฒ ์๋ํ๋ค. ๋ฐ์คํฌํ ํฌ๋กฌ์์ 100vh๋ ํ์ฌ ํ๋ฉด์ ๋ณด์ฌ์ง๋ ๋ทฐํฌํธ๋ฅผ ๊ธฐ์ค์ผ๋ก ํ์ง๋ง, iOS์ ์ฌํ๋ฆฌ์์ ํ๋จ ์ฃผ์์ฐฝ ์์ญ๊น์ง ํฌํจํ๋ค. ๋ทฐํฌํธ๋ฅผ ๊ธฐ์ค์ผ๋ก ์๋ ๋น์จ๋ก ํ๋ฉด์ ๋๋ด๋ค๋ฉด ์์ดํฐ ์ฌํ๋ฆฌ์์ footer ์ผ๋ถ๋ถ์ ํ๋จ ์ฃผ์์ฐฝ ๋๋ฌธ์ ๊ฐ๋ ค์ง๋ค.header : 15%main : 70%footer : 15% ํด๊ฒฐ ๋ฐฉ๋ฒ๋คํํ ์ด ๋ฌธ์ ๋ ์์ CSS๋ง์ผ๋ก ํด๊ฒฐํ ์ ์๋ค. -webkit-fill-available ์์ฑ์ ์ด์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค. ๊ธฐ๋ฅ ์ฟผ๋ฆฌ(@supports) ์ธ์์ ๋ช
์ํ -webkit-touch-callout์ iOS์์๋ง ์ง์ํ๋ ์์ฑ์ด๋ค. ๋ฐ๋ผ์ ์์ดํฐ ์ฌํ๋ฆฌ์์ ์ ์ํ ๋ -webkit-fill-available ์คํ์ผ ๊ฐ์ด ์ ..
HTML ์์ดํฐ ์ฌํ๋ฆฌ ํ
๋ง ์ปฌ๋ฌ ๋ณ๊ฒฝ ๋ฐฉ๋ฒ
HTML ์์ดํฐ ์ฌํ๋ฆฌ ํ ๋ง ์ปฌ๋ฌ ๋ณ๊ฒฝ ๋ฐฉ๋ฒ
2024.05.03์์ดํฐ iOS 15 ๋ถํฐ ์ฌํ๋ฆฌ ๋ธ๋ผ์ฐ์ ํญ ๋ง๋์ ํ
๋ง ์์์ ์ถ๊ฐํ ์ ์๋ค. ํญ ๋ง๋ ์์์ ์ฝํ
์ธ ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์๋ ์ ํ๋์ง๋ง ํ๊ทธ๋ฅผ ์ด์ฉํด์ ์ํ๋ ์์์ผ๋ก ๋ณ๊ฒฝํ ์ ์๋ค. ์ฐธ๊ณ ๋ก content ์์ฑ ๊ฐ์ ์ปฌ๋ฌ์ฝ๋ ๋์ CSS ๋ณ์๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค. e.g. content="var(--bg-black)" ํ
๋ง ์์ ๋ณ๊ฒฝ ์ โผ ํ
๋ง ์์ ๋ณ๊ฒฝ ํ โผ Light/Dark ๋ชจ๋ ์ปฌ๋ฌ๋ผ์ดํธ/๋คํฌ ๋ชจ๋์์ ๊ฐ๊ฐ ๋ค๋ฅธ ์์ ๋ณด์ด๊ณ ์ถ์ผ๋ฉด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. ์๋ ์์์์ ๋ผ์ดํธ ๋ชจ๋์ผ ๋ ํญ ๋ง๋ ์์์ #ffffff(ํ์์), ๋คํฌ ๋ชจ๋์ผ ๋ #28231c ์์ผ๋ก ํ์๋๋ค. ๋ ํผ๋ฐ์คSafari 15 Theme ColorMeta Theme Color and Trickery | CSS-Tr..
์ ์ฉํ HTML ํ๊ทธ ๋ชจ์
์ ์ฉํ HTML ํ๊ทธ ๋ชจ์
2024.05.03— ์งํ ์ํ ๋ง๋ ํ๊ทธ๋ ์์
์ ์๋ฃ ์ ๋๋ฅผ ๋ํ๋ธ๋ค. progress ํ๊ทธ์์ ์ต์๊ฐ์ ํญ์ 0์ด๋ฉฐ, ๋ค๋ฅธ ๊ฐ์ผ๋ก ์ง์ ํ ์ ์๋ค. ๋ฐ๋ผ์ ๊ตณ์ด min ์์ฑ์ ๋ช
์ํ์ง ์์๋ ๋๋ค(๋ฐ๋ฉด meta ํ๊ทธ์์ min์์ฑ์ ์ง์ ํด์ผ ํ๋ค). See the Pen <progress> element by ColorFilter (@colorfilter) on CodePen." data-ke-type="html">HTML ์ฝ์
๋ฏธ๋ฆฌ๋ณด๊ธฐํ ์ ์๋ ์์ค ์์ฑFile progress min ์์ฑ : ์ต์๊ฐ / ๊ธฐ๋ณธ๊ฐ 0 / ์ฌ์ฉ์ ์ง์ ๋ถ๊ฐmax ์์ฑ : ์ต๋๊ฐ(0๋ณด๋ค ์ปค์ผํจ) / ๊ธฐ๋ณธ๊ฐ 1value ์์ฑ : ํ์ฌ๊ฐ / 0 ์ด์ max ์ดํ ์ปค์คํ
์คํ์ผprogress ํ๊ทธ๋ ๊ฐ ๋ธ๋ผ์ฐ์ ๋ง๋ค ๊ธฐ๋ณธ ..
๋ฆฌ์กํธ useRef ํ์ฉ ์ผ์ด์ค ๋ชจ์
๋ฆฌ์กํธ useRef ํ์ฉ ์ผ์ด์ค ๋ชจ์
2024.05.03useRef ํจ์๋ current ์์ฑ์ ๊ฐ์ง ref ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค. ref.current ๊ฐ์ HTMLElement์ ํ ๋นํด์ ํด๋น ์์์ focusํ๊ฑฐ๋, ์๋ฆฌ๋จผํธ ํฌ๊ธฐ ๋ฑ์ ํ์ธํ ์ ์๋ค. ref ๊ฐ์ฒด๋ ์๋ ํน์ง์ ๊ฐ๋๋ค. ์ปดํฌ๋ํธ๊ฐ ๋ค์ ๋ ๋๋ง ๋ผ๋ ref.current ๊ฐ์ ๊ทธ๋๋ก ์ ์งํ๋ค.ref.current ๊ฐ์ด ๋ณ๊ฒฝ๋ผ๋ ์ปดํฌ๋ํธ๋ ๋ค์ ๋ ๋๋งํ์ง ์๋๋คHTMLElement ๋ฟ๋ง ์๋๋ผ ์ซ์ / ๋ฌธ์์ด / ๋ฐฐ์ด ๋ฑ ๊ฐ์ ํ ๋นํ ์ ์๋ค. Case 1 — ๋ฆฌ๋ ๋๋ง์ด ํ์ ์๋ ๊ฐ์ ๊ด๋ฆฌํ ๋ โญ๏ธuseRef๋ .current ํ๋กํผํฐ๋ก ์ ๋ฌ๋ ์ธ์(initialValue)๋ก ์ด๊ธฐํ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ref ๊ฐ์ฒด๋ฅผ ๋ฐํํฉ๋๋ค. ๋ฐํ๋ ๊ฐ์ฒด๋ ์ปดํฌ๋ํธ์ ์ ์์ ์ฃผ๊ธฐ๋ฅผ ํตํด ์ ์ง๋ ๊ฒ์
๋๋ค. — ..
CSS ์ธ์ ํ๋ ์๋ฆฌ๋จผํธ๋ค์ border ๊ฒน์นจ ๋ฌธ์ ํด๊ฒฐ
CSS ์ธ์ ํ๋ ์๋ฆฌ๋จผํธ๋ค์ border ๊ฒน์นจ ๋ฌธ์ ํด๊ฒฐ
2024.05.03์ UI์์ ์๋จ/ํ๋จ ๋ฐ์ค์ ํ ๊ธ์ด ํ์ฑํ ๋๋ฉด border ์์์ด ํ๋์์ผ๋ก ๋ณ๊ฒฝ๋๋ค. ํ์ง๋ง โ์๋จ ๋ฐ์ค ์๋ border์ โํ๋จ ๋ฐ์ค ์์ชฝ border๊ฐ ๊ฒน์ณ์ 1px border๊ฐ 2px ์ฒ๋ผ ๋ณด์ด๊ฒ ๋๋ค(์ฃผํฉ์ ํ์ดํ ๋ถ๋ถ). ํ ๊ธ์ด ํ์ฑํ๋ ์ํ์์ ์๋จ ๋ฐ์ค์ margin-bottom ํ๋จ ์ฌ๋ฐฑ ๊ฐ์ -1px ์ฃผ๋ ๋ฐฉ์์ผ๋ก ํด๊ฒฐํ ์ ์์ง๋ง, ๋ค๋ฅธ ๋ฐ์ค์ ๋ชจ๋ ํ ๊ธ ์ํฉ์ ์ผ์ผ์ด ์ ์ฉํ๋๊ฑด ๋ฒ๊ฑฐ๋กญ๋ค. ๊ฒ๋ค๊ฐ ํ ๊ธ์ด 3๊ฐ ํน์ 4๊ฐ๊ฐ ํ์ฑํ ๋๋ ์ํฉ๋ ๊ณ ๋ คํด์ผ๋๋ฏ๋ก ๋ณต์กํ๋ค. ์ด๋ display: table;์ ํ์ฉํด์ ํด๊ฒฐํ ์ ์๋ค. ํ
์ด๋ธ ๊ตฌ์กฐ ๋ณ๊ฒฝ ์์
๊ตฌ์กฐ ๋ณ๊ฒฝ๐ก border-collapse: collapse ์์ฑ์ table ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ ๋๋ง ์ ํจํ๋ค. ํ
์ด๋ธ ํ๊ทธ์ ๊ดํ ..
HTML ์ด๋ฉ์ผ ํ
ํ๋ฆฟ ์์ฑ๋ฒ (feat. ํ
์ด๋ธ ์ฝ๋ฉ)
HTML ์ด๋ฉ์ผ ํ ํ๋ฆฟ ์์ฑ๋ฒ (feat. ํ ์ด๋ธ ์ฝ๋ฉ)
2024.05.03์ด๋ฉ์ผ ํฌ๋งท์ ํ์ค์ด ์๋ค. ๋ค์ํ ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ์์ ์ ์์ ์ผ๋ก ๋ณด์ด๊ธฐ ์ํด์ ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ , , ๋ง ์ด์ฉํด์ ์์ฑํ๋๊ฒ ์ข๋ค. ์ผ๋ช
ํ
์ด๋ธ ์ฝ๋ฉ์ด๋ผ๊ณ ๋ถ๋ฆฐ๋ค. ์ฌ๋ฐฑ์ ์ง์ ํ ๋ ๋ณดํต margin์ ์ฌ์ฉํ๋๋ฐ, ์ด ๋ํ padding ๋ฑ์ผ๋ก ๋์ฒดํ๋ค. ์คํ์ผ์ ์ธ๋ผ์ธ ๋ฐฉ์์ ์ฌ์ฉํ๋ค. DOCTYPE์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ์๊ฒ HTML ์ ํ์ ์๋ ค์ค๋ค. XHTML 1.0 Transitional doctype ์ ์ฌ์ฉํ๋ฉด ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ๊ฐ ์ ํจ์ฑ์ ๊ฒ์ฌํ๊ณ ์ด๋ฉ์ผ์ ๋ ๋๋งํ๋๋ฐ ๋์์ด ๋๋ค. Headํ
์คํธ์ ํน์ ๋ฌธ์๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ํ์ํ ์ ์๋๋ก ๋ฌธ์ ์ธ์ฝ๋ฉ ๋ฐฉ์์ UTF-8๋ก ์ค์ ํ๋ค. DOCTYPE์ XHTML๋ก ์ค์ ํ๊ธฐ ๋๋ฌธ์ Content-Type ์ ์ธ๋ ํฌํจํด์ผ ํ๋ค. Style ..