๊ฐ๋ฐ/HTML, CSS, JS34 CSS ์ ์ธ ๋ฐฉ์ CSS ๋ฌธ๋ฒ์ ์ ์ฉํ๊ธฐ ์ํด์๋ CSS๋ฅผ ์ ์ธํ๋ ๊ฒ์ด ํ์ํ๋ฐ, ์ ์ธํ๋ ๋ฐฉ์์๋ 4๊ฐ์ง๊ฐ ์๋ค. 1. ๋ด์ฅ ๋ฐฉ์ ๋ด์ฅ ๋ฐฉ์์ HTML์ head ๋ถ๋ถ์ style ์์๋ฅผ ์ด์ฉํด์ ์์์ ๋ด์ฉ์ผ๋ก ์คํ์ผ์ ์์ฑํ๋ ๋ฐฉ์์ด๋ค. ๋ฐ๋ก CSS ํ์ผ์ ๋ง๋ค์ง ์์๋ ๋๋ค๋ ์ฅ์ ์ด ์์ง๋ง, ์ ์ฉํ ์คํ์ผ์ด ๋ง์์ง๋ฉด HTML ๋ฌธ์ ๋ด์์ ํ ๋ฒ์ ๋ค ์ฒ๋ฆฌํ๊ธฐ๊ฐ ์ฝ์ง ์์ ๋ฟ๋๋ฌ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์ HTML, CSS, JS ํ์ผ์ ๋ณ๋๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ด์ ์ด ๋ง๊ธฐ ๋๋ฌธ์ ๊ถ์ฅํ์ง๋ ์๋ ๋ฐฉ๋ฒ์ด๋ค. 2. ์ธ๋ผ์ธ ๋ฐฉ์ ์ญ์ ๋ณ๋์ CSS ํ์ผ์ ๋ง๋ค์ง ์๊ณ ์์์ style ์์ฑ์ ์ด์ฉํด์ ์ง์ ์คํ์ผ์ ์ ์ฉํ๋ ๋ฐฉ์์ผ๋ก ์ด๋ฏธ ์ ์ฉํ ์์๋ฅผ ์ ํด๋์ ์ ์ด๊ธฐ ๋๋ฌธ์ ์์๋ฅผ ์ ํํ ์ ํ์๊ฐ ์๋ค๋ ๊ฒ์ด ํน์ง์ด๋ค. ํธ๋ฆฌํด .. 2023. 1. 4. ์ ์ญ ์์ฑ ์์ ํ๊ทธ์ ํน์ ํ ๊ธฐ๋ฅ์ ๋ํด์ฃผ๊ธฐ ์ํด์ ์์ฑ(attribute)์ ๊ฐ์ ๋ช ์ํ๋ค๊ณ ํ๋ค. ๊ทธ๋ ๋ค๋ฉด aํ๊ทธ์์ ์ฐ๊ฒฐํ ์ฃผ์ ๊ฒฝ๋ก๋ฅผ ๋ช ์ํ๋ href ์์ฑ์ img ํ๊ทธ์์ ์ด๋ฏธ์ง์ ๊ฒฝ๋ก๋ฅผ ๋ํ๋ด๋ src ์์ฑ์ ๋์ ํ์ฌ ์ฌ์ฉํ ์ ์์๊น?? ๋น์ฐํ ์๋๋ค. ํ์ง๋ง ์ ์ญ ์์ฑ์ ์ด๋ฌํ ์์ฑ๋ค๊ณผ ๋ฌ๋ฆฌ body์์ ์ฌ์ฉ๋๋ ๋ชจ๋ ํ๊ทธ์ ๋์ผํ๊ฒ ์ ์ฉ๋ ์ ์๋ ์์ฑ์ด๋ค. ๋ํ์ ์ธ ์ ์ญ ์์ฑ ๋ช ๊ฐ์ง๋ฅผ ์ดํด๋ณด์ 1. title ์์ฑ => title ์์ฑ์ ์์์ ์ ๋ณด๋ ์ค๋ช ์ ์ง์ ํ๋ค. => ํด๋นํ๋ ์์์ ์ปค์๋ฅผ ๊ฐ๋ค๋๋ฉด ์ค๋ช ์ด ๋์ค๋๋ก ํ ์ ์๋ค. 2. stype ์์ฑ => ์์์ ์ ์ฉํ ์คํ์ผ(CSS)์ ์ง์ ํ๋ค. => link ํ๊ทธ๋ฅผ ์ด์ฉํด์ ์ธ๋ถ์ CSSํ์ผ์ ๊ฐ์ ธ์์ ์ฐ๊ฒฐํ๋ ๋ฐฉ์๋ ์๊ณ => s.. 2023. 1. 2. ์ฃผ์ ์ฒ๋ฆฌ ์ฝ๋์์ ๋๋ง ์์๋ณด๊ธฐ ์ํด์ ์ฃผ์์ ์์ฑํด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค. ํ์ง๋ง ๊ทธ๋ฅ ์์ฑํ๋ฉด ๊ทธ ๋ด์ฉ์ด ์น ํ์ด์ง์ ์ถ๋ ฅ๋๊ฒ ๋๋๋ฐ ์ฃผ์ ๊ธฐ๋ฅ์ ์ด์ฉํ๋ฉด ์ด๋ฅผ ํด๊ฒฐํ ์ ์๋ค. html์์๋ ๋ค์๊ณผ ๊ฐ์ด ์ฃผ์์ ์ฒ๋ฆฌํ๋ฉฐ /* ๋ด์ฉ */ css์์๋ ๋ค์๊ณผ ๊ฐ์ด ์ฃผ์์ ์ฒ๋ฆฌํ๋ค. ๊ทธ๋ ๋ค๋ฉด ์๋ํฐ๋ง๋ค ์ฃผ์์ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ธ์ฐ๊ณ ์ฌ์ฉํด์ผ ํ ๊น?? ์๋๋ค. ๋จ์ถํค๋ฅผ ์ด์ฉํ๋ฉด ์์ฝ๊ฒ ์ฌ์ฉํ ์ ์๋ค. Ctrl + / ํค๋ฅผ ๋๋ฅด๋ฉด ์ฃผ์์ ์์ฑํ ์ ์๋ค. 2023. 1. 2. HTML ํต์ฌ ์์ ์ ๋ฆฌ ํ๊ทธ : Division์ ์๋ฏธํ๋ฉฐ ํน๋ณํ ์๋ฏธ๊ฐ ์๋ ๊ตฌ๋ถ์ ์ํ ์์๋ก ๋ธ๋ก(์์) ์์์ด๋ค. ํ๊ทธ : Heading์ ์๋ฏธํ๋ฉฐ ์ ๋ชฉ์ ์๋ฏธํ๋ ์์๋ก ๋ธ๋ก(์์) ์์์ด๋ค. h1 ~ h6๊น์ง 6๊ฐ์ ์์๊ฐ ์กด์ฌํ๊ณ ์ซ์๊ฐ ์์์๋ก ๋ ์ค์ํ ์ ๋ชฉ์ ์ ์ํ๋ค. ํ๊ทธ : Paragraph๋ฅผ ์๋ฏธํ๋ฉฐ ๋ฌธ์ฅ์ ์๋ฏธํ๋ ์์๋ก ๋ธ๋ก(์์) ์์์ด๋ค. div๋ฅผ ์ฌ์ฉํด๋ ๋์ง๋ง pํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ทธ ๋ด์ฉ์ ํ์ธํ์ง ์์๋ pํ๊ทธ๋ก ๋ฌถ์ฌ์๋ ๋ด์ฉ์ ์ด๋ค ๋ฌธ์ฅ์ด๊ตฌ๋๋ฅผ ์ ์ ์๋ค. ํ๊ทธ : ์ด๋ฏธ์ง๋ฅผ ์ฝ์ ํ๋ ์์๋ก ์ธ๋ผ์ธ(๊ธ์) ์์์ด๋ค. ์ฝ์ ํ ์ด๋ฏธ์ง์ ๊ฒฝ๋ก์ ์ฝ์ ํ ์ด๋ฏธ์ง์ ์ด๋ฆ์ ๋ช ์ํด์ผ ํ๋ค. => ์ด์ฒ๋ผ ๋ฐ๋์ ๋ช ์ํด์ผ ํ ์์ฑ์ ํ์ ์์ฑ ์ด๋ผ๊ณ ํ๋ค. ์ด๋ฏธ์ง์ ์ด๋ฆ์ ๋ช ์ํ๋ ์ด์ ๋ ์ด๋ฏธ์ง๊ฐ ์ถ๋ ฅ๋์ง .. 2023. 1. 2. ๊ธ์์ ์์ ์ฐ๋ฆฌ๊ฐ ๋ณด๊ณ ์๋ ์น์ฌ์ดํธ๋ ์ด๋ฏธ์ง๋ฅผ ์ ์ธํ๊ณ ๋ ๊ธ์์ ์์๋ก ์ด๋ฃจ์ด์ ธ ์๋ค๊ณ ๋ณผ ์ ์๋ค. ๊ธ์๋ฅผ ๋ง๋๋ ์์๋ค์ ์ธ๋ผ์ธ(inline)์์๋ผ๊ณ ํ๊ณ , ์์๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์์๋ค์ ๋ธ๋ก(Block)์์๋ผ๊ณ ํ๋ค. ๊ธ์๋ฅผ ์ทจ๊ธํ๋ ์ธ๋ผ์ธ ์์, ๋ ์ด์์์ ์ทจ๊ธํ๋ ๋ธ๋ก ์์ ๋ผ๊ณ ๊ธฐ์ตํ๋ฉด ๋ ๋ฏ ํ๋ค. 1. ์ธ๋ผ์ธ ์์ ์ธ๋ผ์ธ ์์์ ๋ํ์ ์ธ ์๋ก๋ ํ๊ทธ๊ฐ ์๋ค. ์ธ๋ผ์ธ ์์๋ ์์ ์์ฒด๊ฐ ํ๋์ ๊ธ์๋ก ์ธ์์ด ๋๋ฉฐ ์ค๋ฐ๊ฟ์ ๋์์ฐ๊ธฐ๋ก ์ธ์์ด ๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ค๋ฐ๊ฟ์ ํ์ง ์๊ณ HelloWorld์ด๋ผ๊ณ ์์ฑํ๊ฒ ๋๋ฉด ๋ ๊ฐ๋ฅผ ํ๋์ ๊ธ์๋ก ์ธ์ํด์ ๋์์ฐ๊ธฐ ์์ด HelloWorld ๋ผ๊ณ ์ถ๋ ฅํ๋ค. ๊ธ์ ์์ ์ฆ, ์ธ๋ผ์ธ ์์๋ ์ฝํ ์ธ ์ ํฌ๊ธฐ๋งํผ ์๋์ผ๋ก ์ค์ด๋๋ ํน์ฑ์ ๊ฐ์ง๊ณ ์๋ค. ์ด๋ฌํ ํน์ฑ์ผ๋ก ์ธ.. 2023. 1. 2. ๋น ํ๊ทธ(Empty tag) ์ฐ๋ฆฌ๊ฐ ์ง๊ธ๊ป ์ดํด๋ณธ ํ๊ทธ๋ค์ ์ด๋ฆฌ๋ ํ๊ทธ์ ๋ซํ๋ ํ๊ทธ๊ฐ ์ธํธ๋ก ์กด์ฌ๋ฅผ ํ๊ณ , ๊ทธ ์ธํธ๋ฅผ ํ๋์ ์์๋ผ๊ณ ํ๋ค๊ณ ์ดํด๋ดค๋ค. ํ์ง๋ง meta ํ๊ทธ๋ img ํ๊ทธ๋ฅผ ๋ณด๋ฉด ์ด๋ฆฌ๋ ํ๊ทธ๋ง ์กด์ฌํ๊ณ ๋ซํ๋ ํ๊ทธ๋ ์กด์ฌํ์ง ์๋๋ฐ, ๋ด์ฉ(Content)์ด ์๋ค๊ณ ํด์ ๋น(Empty) ํ๊ทธ๋ผ๊ณ ๋ถ๋ฅธ๋ค. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Document Colored by Color Scripter cs ์๋ฅผ ๋ค๋ฉด ์์ ๊ฐ์ html ์ฝ๋์์ ํ๊ทธ๋ ํ๊ทธ๋ฅผ ๋ณด๋ฉด ํ๊ทธ์ ๋ค๋ฅด๊ฒ ํ๊ทธ๊ฐ ํ๋๋ง ์กด์ฌํ๋ค. ๋น ํ๊ทธ๋ฅผ ์์ฑํ๋ ๋ฐฉ์์ ํฌ๊ฒ ๋๊ฐ์ง๋ก ๋๋๋๋ฐ, ํ๋๋ ์ด๋ฆฌ๋ ํ๊ทธ๋ง ์์ฑํ๋ ๋ฐฉ๋ฒ์ด๊ณ ๋ค๋ฅธ ํ๋๋ ์ด๋ฆฌ๋ ํ๊ทธ ๋งจ ๋ค์ ์ฌ๋์ ๊ธฐํธ ( / ) ๋ฅผ ๋ถ์ด๋ ๋ฐฉ๋ฒ์ด๋ค. ๋ ๋ฒ์งธ ๋ฐฉ๋ฒ์ ๋ซํ ํ.. 2023. 1. 2. ๋ถ๋ชจ์์์ ์์์์ ์ฝ๋๋ฅผ ์์ฑํ๋ค ๋ณด๋ฉด ํ๊ทธ ์์ ๋ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ์ค์ฒฉ์ ์ผ๋ก ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ฐ์ํ๋ค. ์ด๋ฌํ ๊ฒฝ์ฐ์ ๊ฐ๊ฐ์ ์์๋ค์ ์ด๋ป๊ฒ ์ง์นญํ๋์ง ์์๋ณด์. ๊ธฐ๋ณธ์ ์ผ๋ก ํ๊ทธ ์์ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ๋ฃ๊ฒ ๋๋ฉด ๋ค์ฌ์ฐ๊ธฐ๋ฅผ ํตํด ์์๋ค์ ๊ตฌ๋ถํด์ค๋ค. ์ผ๋ ฌ๋ก ์์ฑํด๋ ํ๋ก๊ทธ๋จ ๋์์๋ ๋ฌธ์ ๊ฐ ์์ง๋ง, ์ฝ๋๋ฅผ ์ด์๊ฒ ์์ฑํ๋ ์ด์ ๋ ์ฝ๋๋ฅผ ์ปดํจํฐ๊ฐ ์์๋ณผ ์ ์๋ค๊ณ ๊ฑฐ๊ธฐ์ ๋์ด ์๋๋ผ ๋์ ํ์ ํ๋ ์ฌ๋๋ค๋ ๋์ ์ฝ๋๋ฅผ ์ฝ๊ธฐ๋๋ฌธ์ ์ฝ๋๋ฅผ ์ฝ๊ธฐ์ข๊ฒ ์์ฑํ๋ ์ต๊ด์ ๋ค์ฌ์ผํ๋ค. 1. ๋ถ๋ชจ์์ ๋๋ฅผ ๊ธฐ์ค์ผ๋กํด์ ๋๋ฅผ ๊ฐ์ธ๊ณ ์๋ ๋ฐ๋ก ์๋จ๊ณ์ ์์๋ฅผ '๋ถ๋ชจ ์์' ๋ผ๊ณ ๋ถ๋ฅธ๋ค. 2. ์์(์กฐ์) ์์ ๋ถ๋ชจ ์์๋ฅผ ํฌํจํ์ฌ ๋๋ฅผ ๊ฐ์ธ๊ณ ์๋ ๋ชจ๋ ์์๋ฅผ ํตํ์ด์ '์์ ์์' ๋๋ '์กฐ์ ์์' ๋ผ๊ณ ๋ถ๋ฅธ๋ค. 3. ์์ ์์ ๋๋ฅผ ๊ธฐ์ค์ผ.. 2023. 1. 2. ์ด์ 1 2 3 4 ๋ค์