๐ป Programming/HTML, CSS
1. ๋ณํ Transformations ์์์ ๋ชจ์์ ์ด๋ํ๊ฑฐ๋ ๋ณ๊ฒฝํ๋ ๊ฒ (ex. hover) ๋ณํ์ transform ์์ฑ์ ์ฌ์ฉํ๋๋ฐ ์ด ์์ฑ์ ๋ณํํ๋ ค๋ ์์์ ์ถ๊ฐํ๋ ๊ฒ์ด ์๋๋ผ, ๋ณํ์ ๋ฐ์์ํค๋ ์์์ ์ถ๊ฐํ๋ค. ์๋ ์์๋ฅผ ํตํด ๋ค์ ์ดํด๋ณด์. .card-container { background-color: rgb(255, 255, 255); width: 350px; margin: 50px auto; box-shadow: 3px 3px 10px rgb(201, 200, 200); } .card-container:hover { transform: scale(1.05); } ๋ณํํ๋ ค๋ ์์๋ .card-container์ด์ง๋ง ์ฌ๊ธฐ์ transform ์์ฑ์ ์ถ๊ฐํ๋ ๊ฒ์ด ์๋๊ณ , .card..
๐ป Programming/HTML, CSS
1. html ํ๋ css ๊ท์น์ html์ ์ ์ฉ๋๊ณ html ์์ ํฌํจ๋ ์์๋ค์๋ ์์๋๋ค. ์๋์ css ๋ณ์ ์์ ์์ ์ฌ์ฉํ๋ ๋
ผ๋ฆฌ html { --color-grey-100: rgb(236, 236, 236); --color-grey-400: rgb(134, 134, 134); --color-grey-600: rgb(58, 58, 58); --color-grey-900: rgb(41, 41, 41); --color-primary-300: rgb(167, 226, 255); --color-primary-700: rgb(0, 170, 255); --size-1: 18px; --size-5: 50px; background-color: var(--color-grey-100); } 2. :root ๊ฐ์ ..
๐ป Programming/HTML, CSS
1. ํฐํธ ํฌ๊ธฐ์์์ em, rem, % 1) px ์ฅ์ : Easy to understand & translateable ๋จ์ : Limited user focus & not scalable 2) em vs. rem (1) em (element) Size is relative to font-size ๋ค๋ฅธ ์์์ ํฐํธ ํฌ๊ธฐ์ ์ฐ๊ด๋ ํฌ๊ธฐ - ํฐํธ ํฌ๊ธฐ๋ ๋ถ๋ชจ ์์์ ํฌ๊ธฐ์ ๋ฌ๋ ค์๋ค. ๋จ์ %์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ถ๋ชจ ์์์์ ์์๋ฐ๋ ํฌ๊ธฐ์ ๋ฐ๋ผ ์ฌ์ด์ฆ๊ฐ ๋ฌ๋ผ์ง๊ธฐ ๋๋ฌธ์ ๊ด๋ฆฌ๊ฐ ์ด๋ ต๋ค. (2) rem (root em) Size is relative to root element’s font size ํ์ฌ ์์์ ํฐํธ ํฌ๊ธฐ์ ์ต์์ ์์์ ํฐํธ ํฌ๊ธฐ์ ์ฐ๊ฒฐ๋์ด ์๋ค. HTML์์ ์ต์์ ์์: ์ต์์ ์์์ ํฐํธ ํฌ๊ธฐ..
๐ป Programming/HTML, CSS
๋ฉ๋ด 1 ๋ฉ๋ด 2 ๋ฉ๋ด 3 h1๋ ๊ฐ์ฅ ์ค์ํ ์ ๋ชฉ์ผ๋ก ํ์ด์ง์ 1๊ฐ๋ง ์ฌ์ฉํ ๊ฒ ์ค๊ฐ์ ๋นผ๋จน์ง ์๊ณ ์์ฐจ์ ์ผ๋ก ์ฌ์ฉํ ๊ฒ ๊ธ์จ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋ ์ฉ๋๋ก ์ฌ์ฉํ์ง ์๋๋ค ๋ถ์ฐจ์ , ๋ณด์์ ์์ญ ์นํ์ด์ง์ ํ๋จ
๐ป Programming/HTML, CSS
https://naradesign.github.io/bem-by-example.html ์์ ๋ก ์ดํดํ๋ BEM. HTML, CSS(flex/grid), UI/UX, Accessibility, ์ ์ฐฌ๋ช
naradesign.github.io
๐ป Programming/HTML, CSS
๐ CSS๋? Cascading Style Sheets์ ์ฝ์๋ก, ์นํ์ด์ง๋ฅผ ๋ณด๊ธฐ ์ข๊ฒ ๊พธ๋ฏธ๊ธฐ ์ํด ์์ฑํ๋ ์ฝ๋ HTML์ด ์น๋ฌธ์์ ๋ผ๋๋ฅผ ์ด๋ฃฌ๋ค๋ฉด, CSS๋ ๊ทผ์ก์ด๋ผ๊ณ ๋ณผ ์ ์์ (๋์ค์ ๋ฐฐ์ฐ๊ฒ ๋ JS๋ ๋์ ์ธ ์น์ฌ์ดํธ ๊ตฌํํ๋ ๋์ ์ญํ ) /* ์ ํ์ { ์์ฑ1: ์์ฑ๊ฐ, ์์ฑ2: ์์ฑ๊ฐ2} */ p { text-align: center; color: red; } ๐ ์คํ์ผ ์ํธ ์คํ์ผ ์ํธ๋ ํฌ๊ฒ '๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ์คํ์ผ'๊ณผ '์ฌ์ฉ์ ์คํ์ผ'๋ก ๋๋๊ณ , ์ฌ๊ธฐ์ ์ฌ์ฉ์ ์คํ์ผ์ ๋ค์ '์ธ๋ผ์ธ ์คํ์ผ', '๋ด๋ถ ์คํ์ผ ์ํธ', '์ธ๋ถ ์คํ์ผ ์ํธ' ์ธ ๊ฐ์ง๋ก ๋๋๋๋ฐ ์ด ์ค์์ ๋ด๋ถ ์คํ์ผ ์ํธ์ ์ธ๋ถ ์คํ์ผ ์ํธ์ ๋ํด ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค. 1. ๋ด๋ถ ์คํ์ผ ์ํธ : ๊ฐ์ HTML ์น๋ฌธ์ ์์ ์์ฑ..
๐ป Programming/HTML, CSS
๐ Tag์ Attribute Tag๋ HTML์ ์์ฑํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ๋ช
๋ น์ด์ ์งํฉ์ ๋งํ๋ค. HTML ๋ฌธ์์ ๋ผ๋๋ฅผ ๊ตฌ์ฑํ๋ค. Attribute๋ HTML ๋ฌธ์์์ elements์ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ๋ฃ์ ๋ ์ฌ์ฉ๋๋ ๋ถ๊ฐ์ ์ธ ์์๋ฅผ ๋งํ๋ค. · a: anchor, ์น ํ์ด์ง๋ ์ฌ์ดํธ๋ก ์ด๋ · href(HTTP or hypertext reference): anchor ํ๊ทธ์ attribute · target: ๊ธฐ๋ณธ๊ฐ์ "_self"(ํ์ฌ ํญ์์ ๋งํฌ ์ด๋ฆผ), "_blank"(์ ํญ์์ ๋งํฌ ์ด๋ฆผ) · img: ๋ค๋ฅธ ํ๊ทธ์ ๋ค๋ฅด๊ฒ ๋ก ๋ซ์ง ์์. ์์ฒด ๋ซ๊ธฐ ํ๊ทธ self-closing tag · src: source, img ํ๊ทธ์ ์ด๋ฏธ์ง ์ฃผ์๋ฅผ ์ง์ · id: body์์ ์ด๋ค ํ๊ทธ์๋ ๋ฃ์ ์ ์..