๋ ์ด์์5 [SITE] ์น์ฌ์ดํธ - ์ด๋ฏธ์ง ํ ์คํธ ์ ํ01 ImageTextType01 ์นํ์ด์ง ์ค์ต์ ์ํ ์ด๋ฏธ์ง/ํ ์คํธ ์ ํ์ ์ค์ตํด๋ณด๊ฒ ์ต๋๋ค! ์ด๋ฒ ์ด๋ฏธ์ง/ํ ์คํธ ์ ํ์ ์ด๋ฏธ์ง์ ํ ์คํธ ์์ญ์ด ํจ๊ป ๋ค์ด์๋ ํ์ ์ ๋๋ค. ๊ทธ๋ผ ์๋์ ์ฝ๋๋ฅผ ๋ณด๋ฉฐ ํจ๊ป ์ค์ต ํด๋ณด๊ฒ ์ต๋๋ค~๐ ์ด๋ฒ ์ ํ์ ์ด๋ฏธ์ง/ํ ์คํธ ํ์ ์ผ๋ก ๊ฐ ์ฃผ์ ์ ์์ญ์ ๋ง๊ฒ ๋ ์ด์์๊ณผ ๋์์ธ์ ์ค์ ํ์๋ฉด ๋ฉ๋๋ค. ์๋์ ํผ๊ทธ๋ง๋ฅผ ์ฐธ๊ณ ํ์ฌ HTML, CSS๋ฅผ ์ค์ ํด๋ด ์๋ค. ๐ ๋์์ธํ ์น ํ์ด์ง ์์์ ๋ณด๋ฉฐ ํ์ด์ง ๊ตฌ์กฐ๋ฅผ ํ์ ํ ํ ์น ํ์ค์ฑ๊ณผ ์ ๊ทผ์ฑ์ ๋ง๋์๋ฉํฑํ ๋งํฌ์ ์ ํด์ค๋๋ค. TIP ! • ์น์ , ์ํฐํด๊ณผ ๊ฐ์ ์๋ฉํฑ ํ๊ทธ์๋ ๊ผญ ํค๋ฉ ํ๊ทธ๋ฅผ ํจ๊ป ์ฌ์ฉํด์ฃผ์ด์ผ ์นํ์ค์ ์ค์ํ๊ฒ ๋ฉ๋๋ค. • ์น์ ์์ญ์ ์นํ์ค ์ค์.. 2022. 9. 2. [SITE] ์น์ฌ์ดํธ - ํ ์คํธ์ ํ03 TextType03 ์นํ์ด์ง ์ค์ต์ ์ํ ํ ์คํธ ์ ํ์ ์ค์ตํด๋ณด๊ฒ ์ต๋๋ค! ์ด๋ฒ ์ ํ์ ์ง๋ ์ ํ๋ค์ ๋นํด ์กฐ๊ธ ๋ ์ฌํ ๋ฒ์ ์ ๋๋ค...! ๊ทธ๋ผ ์๋์ ์ฝ๋๋ฅผ ๋ณด๋ฉฐ ํจ๊ป ์ค์ต ํด๋ณด๊ฒ ์ต๋๋ค ๐ซ ๐ซ ๋ ์ด์์ ๊ทธ๋ฆฌ๋ ๋ฐ ์๋ด์ ์ ์ด์ฉํ์ฌ ๋ ์ด์์ ๋์์ธ์ ์์ฑํฉ๋๋ค! ์ด์ ์ต์ํด์ง ์ด๋ฏธ์ง์คํ๋ผ์ดํธ ๊ธฐ๋ฅ์ ์ํด ํ๋ ์์ ์ถ๊ฐํ์ฌ ํ๋กํ ์์ด์ฝ์ 60px / ๋ณ์ ์์ด์ฝ 102px ์ฉ ๋ฐฐ์น์์ผฐ์ต๋๋ค. ๊ผญ ๊ฐ๊ฒฉ์ ์ ๋ง์ถฐ์ฃผ์ธ์~! ๐ ! TIP ! • ๊ตฌ์กฐ๋ฅผ ๋จผ์ ๊ผผ๊ผผํ๊ฒ ํ์ ํ์ฌ ํฐ ๋ฉ์ด๋ฆฌ๋ถํฐ ๋งํฌ์ ์ ํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ค์ํฉ๋๋ค.(์นํ์ค ์ค์ ํ์!) • ์นํ์ค๊ณผ ์น ์ ๊ทผ์ฑ, ํธํ์ฑ์ ๋์น์ง ์๋๋ก ํฉ๋๋ค. • ๊ณตํต ์ ํ์์ ๊ฐ๊ฐ์ .. 2022. 9. 1. [SITE] ์น์ฌ์ดํธ - ํ ์คํธ์ ํ02 TextType02 ์นํ์ด์ง ์ค์ต์ ์ํ ํ ์คํธ ์ ํ์ ์ค์ตํด๋ณด๊ฒ ์ต๋๋ค! ์ด๋ฒ ์ ํ์ ๋ณดํต ํ ์คํธ๋ก๋ง ์ ๋ณด๋ฅผ ์ ๊ณตํ๊ณ ์ ํ ๋ ์ฌ์ฉํฉ๋๋ค. ๊ทธ๋ผ ์๋์ ์ฝ๋๋ฅผ ๋ณด๋ฉฐ ํจ๊ป ์ค์ต ํด๋ณด๊ฒ ์ต๋๋ค ๐ ์ด๋ฒ ์ ํ์ ์ด๋ฏธ์ง๊ฐ ๋ค์ด๊ฐ์ง ์๊ณ ๋์ ์์ด์ฝ์ด ๋ค์ด๊ฐ๊ฒ ๋ฉ๋๋ค. ํ ์ค๋ฅด๋ก๋ง ์ด๋ฃจ์ด์ง ๋งํผ ๋ ์ ๊ฒฝ์จ์ ์์ ํด์ค๋๋ค! ์ง๋ ํ ์คํธ ์ ํ01๊ณผ ๋๊ฐ์ด ์ด๋ฏธ์ง์คํ๋ผ์ดํธ ๊ธฐ๋ฅ์ ์ํ์ฌ ํ๋ ์์ ํ๋ ๋ ๋ง๋ค์ด ์์ด์ฝ์ 60px์ฉ ๋ฐฐ์น์์ผฐ์ต๋๋ค ๐ ๋์์ธํ ์น ํ์ด์ง ์์์ ๋ณด๋ฉฐ ํ์ด์ง ๊ตฌ์กฐ๋ฅผ ํ์ ํ ํ ์น ํ์ค์ฑ๊ณผ ์ ๊ทผ์ฑ์ ๋ง๋์๋ฉํฑํ ๋งํฌ์ ์ ํด์ค๋๋ค. ! TIP ! • ๊ตฌ์กฐ๋ฅผ ๋จผ์ ๊ผผ๊ผผํ๊ฒ ํ์ ํ์ฌ ํฐ ๋ฉ์ด๋ฆฌ๋ถํฐ ๋งํฌ์ ์ ํ๋ ๊ฒ์ด ๊ฐ.. 2022. 9. 1. [SITE] ์น์ฌ์ดํธ - ํ ์คํธ ์ ํ01 TextType01 ์นํ์ด์ง ์ค์ต์ ์ํ ํ ์คํธ ์ ํ์ ์ค์ตํด๋ณด๊ฒ ์ต๋๋ค! ์ด๋ฒ ์ ํ์ ๋ณดํต ํ ์คํธ๋ก๋ง ์ ๋ณด๋ฅผ ์ ๊ณตํ๊ณ ์ ํ ๋ ์ฌ์ฉํฉ๋๋ค. ๊ทธ๋ผ ์๋์ ์ฝ๋๋ฅผ ๋ณด๋ฉฐ ํจ๊ป ์ค์ต ํด๋ณด๊ฒ ์ต๋๋ค๐ ์ด๋ฒ ์ ํ์ ์ด๋ฏธ์ง๊ฐ ๋ค์ด๊ฐ์ง ์๊ณ ๋์ ์์ด์ฝ์ด ๋ค์ด๊ฐ๊ฒ ๋ฉ๋๋ค. ํ ์ค๋ฅด๋ก๋ง ์ด๋ฃจ์ด์ง ๋งํผ ๋ ์ ๊ฒฝ์จ์ ์์ ํด์ค๋๋ค! ์๋์ ํผ๊ทธ๋ง๋ ํ๋์ ์น์ ์ ๋ง๋ค์ด์ componentํ์ฌ ๋ฐฐ์นํ์ต๋๋ค! ๋ํ ์ด๋ฏธ์ง์คํ๋ผ์ดํธ ๊ธฐ๋ฅ์ ์ํ์ฌ ํ๋ ์์ ํ๋ ๋ ๋ง๋ค์ด ์์ด์ฝ์ 60px์ฉ ๋ฐฐ์น์์ผฐ์ต๋๋ค ๐ ๋์์ธํ ์น ํ์ด์ง ์์์ ๋ณด๋ฉฐ ํ์ด์ง ๊ตฌ์กฐ๋ฅผ ํ์ ํ ํ ์น ํ์ค์ฑ๊ณผ ์ ๊ทผ์ฑ์ ๋ง๋์๋ฉํฑํ ๋งํฌ์ ์ ํด์ค๋๋ค. TIP ! • ๊ตฌ์กฐ๋ฅผ ๋จผ์ ๊ผผ๊ผผํ๊ฒ .. 2022. 8. 31. [SITE] ์น์ฌ์ดํธ - ์นด๋ ์ ํ03 CardType03 ์นํ์ด์ง ์ค์ต์ ์ํ ์นด๋ ์ ํ ํ์ด์ง ์ฌํver ์ ์ํด๋ณด๊ธฐ! ์นด๋ ์์ ์ด๋ฏธ์ง, ํค์๋๋, ํ ์คํธ ๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์ ํ๋กํ๊น์ง ๋ฃ์ด์ ์ ์ํด๋ณด์! ์ด๋ฒ ์ ํ์์๋ ์ฌํ ๋ฒ์ ์ธ ๋งํผ ๊ทธ๋ฆฌ๋ ํ ์์๊ฐ ๋ง์ต๋๋ค.๐ ์ฐจ๊ทผ์ฐจ๊ทผ ๊ทธ๋ฆฌ๋๋ฅผ ๋ง๋ค์ด ์นด๋ํ ํ์ด์ง๋ฅผ ๋์์ธ ํด๋ด ์๋ค! ์ด๋ฒ ์นด๋ํ ๋์์ธ์ ์นด๋ ์ฌ์ด์ ์ฌ๋ฐฑ์ด ์๊ธฐ ๋๋ฌธ์ ๋ผ์ธ์ ๋ฃ์ด ์นด๋ ์์ญ์ ๊ตฌ๋ถ ํด์ค๋๋ค. TIP ! ์นด๋ ์น์ ์ ๋์์ธ์ด ๋์ผํ ๊ฒฝ์ฐ comtonent๋ฅผ ์ด์ฉํ๋ฉด ํจ์จ์ ์ธ ์์ ์ด ๊ฐ๋ฅํ๋ค. comtonent๋ฅผ ์ฒ์ ์ ์ฉ์ํจ ์นด๋๊ฐ ์๋ณธ๊ฐ ๋๋ฉฐ ์๋ณธ comtonent๋ฅผ ์์ ํ๋ฉด ๋ณต์ comtonent๋ค๋ ํจ๊ป ์์ ๋์ด ์์ ์ด ํจ์ฌ ์์ํด์ง๋ค! < HTML ์์ค : ๋ ์์์ ๊ตฌ์กฐ ํ์ ํ.. 2022. 8. 11. ์ด์ 1 ๋ค์ 728x90 ๋ฐ์ํ