๊ฐํ๋๋ผ์ดํ/๋ธ๋ก๊ทธ & ์น ์ฌ์ดํธ (39) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์คํจ ๊พธ๋ฏธ๊ธฐ [sectionํ๊ทธ] ํ๊ทธ (1) ์ ์ ๋ฌธ์๋ ์ดํ๋ฆฌ์ผ์ด์ ๋ฑ์ ์ฃผ์ ๋ณ ์ฝํ ์ธ ์น์ ์ ๊ตฌ์ฑํ ๋ ์ฌ์ฉํ๋ ํ๊ทธ์ด๋ค. (2) ์ฌ์ฉ๋ฒ ์ฌ์ฉํ๊ณ ์ ํ๋ ์์น์์ ํ๊ทธ๋ฅผ ์ด์ด ์ค ํ ์์ ์ฝํ ์ธ ๋ค์ ์ฑ์ ์ฃผ๋ฉด ๋๋ค. : ์์, ์คํ ํ๊ทธ : ์ข ๋ฃ, ํด๋ก์ฆ ํ๊ทธ (3) ์ค์ต ATOM ์ผ๋ก ์ด์ฉํ์ฌ sectionํ๊ทธ๋ฅผ ์ค์ต ํด๋ณด์.ํ๊ทธ๋ฅผ ์ด์ด ์์ ์น์ 1์ด๋ผ๋ ์ฝํ ์ธ ์ ๋ชฉ์ ๋ก ์ ์ด์ฃผ๊ณ ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ๋ด์ฉ์ ์ ์ด์คฌ์ต๋๋ค. ์ถ๋ ฅํ๋ ์์ ๊ฐ์ด ๋์ค๋ค์. html๋ง ๊ฐ์ง๊ณ ๋ ํน๋ณํ ๋ญ๊ฐ ๋๋๋ผ์ง๋๊ฒ ์๋ค์. ์ด์ธ์๋์ ๋ก๋ ์ฝํ ์ธ ์ ๋ํ ๊ตฌ์ญ์ ์ ํ ์ ์๋ค๋ค์.๊ฐ๊ฐ ์ฉ๋๊ฐ ์์ํ ๋ฐ ๋ชจ๋ฅด๊ฒ ๋ค์ ใ .ใ ์ค๋์ ์ฌ๊ธฐ๊น์ง... ์ด์ด๋ณด๊ธฐ โ ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์คํจ ๊พธ๋ฏธ๊ธฐ [divํ๊ทธ] ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์คํจ ๊พธ๋ฏธ๊ธฐ [imgํ๊ทธ] ํ๊ทธ(1) ์ ์ image๋ฅผ ์ค์ธ ํ๊ทธ๋ก ๋ง๊ทธ๋๋ก ์ด๋ฏธ์ง๋ฅผ ์นํ์ด์ง์ ์ฝ์ ํ๊ณ ์ ํ ๋ ์ฌ์ฉํ๋ค. (2) ์ฌ์ฉ๋ฒ ํ๊ทธ๋ ์ฝ์ ํ๊ณ ์ํ๋ ์ด๋ฏธ์ง์ ๊ฒฝ๋ก๋ฅผ ์ง์ํด์ผ ํ๋๋ฐ, ์ด๊ฒ ์ ์์ ์ด์ง ์์ผ๋ฉด ์๋ฐ(์์ค๋ฐ์ค)์ด ๋จ๊ฒ ๋๋ค๊ณ ํฉ๋๋ค.๊ณ ๋ก ๊ฒฝ๋ก๋ฅผ ์ง์ ํ๊ธฐ ์ํด "src"๋ผ๋ ์์ฑ์ ์ด์ฉํ๋๋ฐ์,์ด์ธ์๋ ์ด๋ฏธ์ง์ ์ฌ์ด์ฆ๋ฅผ ์ ํด์ฃผ๋ ์์ฑ์ด 2๊ฐ์ง๊ฐ ์์ต๋๋ค. : ์์, ์คํ ํ๊ทธ- : ์ข ๋ฃ, ํด๋ก์ฆ ํ๊ทธ 3๊ฐ์ง "์์ฑ"์ ํจ๊ป ๋ณด์๋ฉดโถ src : ์ด๋ฏธ์ง์ ๊ฒฝ๋ก๋ฅผ ์ง์ โถ width : ์ด๋ฏธ์ง์ ๊ฐ๋ก ์ฌ์ด์ฆ๋ฅผ ์ง์ โถ height : ์ด๋ฏธ์ง์ ์ธ๋ก ์ฌ์ด์ฆ๋ฅผ ์ง์ (3) ์ค์ต ATOM ์ผ๋ก ์ด์ฉํ์ฌ imgํ๊ทธ๋ฅผ ์ค์ต ํด๋ณด์.180x180 ์ฌ์ด์ฆ์ pngํ์ผ์ src ์์ฑ์ผ๋ก ๊ฒฝ๋ก๋ฅผ ์ง์ ํด ์ฃผ๊ณ width ์์ฑ๊ณผ height.. ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์คํจ ๊พธ๋ฏธ๊ธฐ [h1~h6ํ๊ทธ] ํ๊ทธ(1) ์ ์ ๊ธ์ด๋ ๋ฌธ์ฅ์ ์ ๋ชฉ ๋ฑ์ผ๋ก ์ฌ์ฉ๋๋ ์ด ํ๊ทธ๋ Heading์ ์ค์ธ ๋ง์ด๋ผ๊ณ ํ๋ค. (2) ์ฌ์ฉ๋ฒ ์ ๋ธ๋ก๊ทธ์ ํฌ์คํ ์ ๋ชฉ์ ํด๋นํ๋ ํ๊ทธ๋ก ๊ฐ์ฅ ํฐ? ๋จผ์ ์ฌ์ฉ๋๋ ํ๊ทธ์ด๋ค.๋ ํฌ์คํ ์ ๋ชฉ์ ํด๋ฆญํ์ฌ ๊ฐ์ฅ ๋จผ์ ๋ณด์ด๋ ์ฝํ ์ธ ์ ํต์ฌ ํ์ดํ ์ ๋ชฉ์ด๋ค.๋ ์ ํ์ ์ ๋ชฉ์ผ๋ก ๋ด์ฉ์ ์ธ๋ถํ ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ์ ๋ชฉ์ด๋ค.๋ , ๋ฑ์ ๋์ฑ ๋ด์ฉ์ ์ธ๋ถํํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.(์ ๋ h4๊น์ง ๋ง์ด ์ฌ์ฉํ๊ณ ์์ต๋๋ค.) : ์์, ์คํ ํ๊ทธ : ์ข ๋ฃ, ํด๋ก์ฆ ํ๊ทธ (3) ์ค์ต ATOM ์ผ๋ก ์ด์ฉํ์ฌ hํ๊ทธ๋ฅผ ์ค์ต ํด๋ณด์.์์ ๊ฐ์ด ์์ฑํ์ฌ ์ด๋ป๊ฒ ๋์ค๋์ง ๋ณด๋๋ก ํ๊ฒ ๋ค. ๋ณด์๋ ๊ฒ์ฒ๋ผ ์ซ์๊ฐ ํด์๋ก ํฐํธ๊ฐ ํฐ๊ฑธ ๋ณผ ์ ์์ง์.h4 ์์ h5์ h6์ ๋๋ํ ์ ์๋๋ฐ ๋ฐ์ผ๋ก ๋ด๋ ค๊ฐ ์๋๊ฑธ ๋ณผ ์ ์์ต๋๋ค... ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์คํจ ๊พธ๋ฏธ๊ธฐ [spanํ๊ทธ] ํ๊ทธ(1) ์ ์ ๋ ์ด์์์ ์ค์ ํ ๋ ์ฌ์ฉํ๋ ํ๊ทธ๋ก ํ๊ทธ์ ์ ์ฌํ์ง๋ง ์ฌ์ฉ๋ฐฉ๋ฒ์ ๋ค๋ฅด๋ค. ํ๊ทธ์ display์์ฑ์ inline์์์ด๋ฉฐ, ๋ฅผ ์ด์ฉํ ์ค๋ฐ๊ฟ์ด ๋์ง ์๋๋ค. ์๋ํ๋ฉด ์ผ์ง์ ์ผ๋ก ์ฌ์ฉ์์ ์ฐ๋ ํ๊ทธ์ด๊ธฐ ๋๋ฌธ์ด๋ค. ๋ฐ๋ฉด, ํ๊ทธ๋ ์ค๋ฐ๊ฟ์ด ๋๋ block์์๋ผ๊ณ ํ๋ค. (2) ์ฌ์ฉ๋ฒ ํ๊ทธ๋ ํผ์ ์ฌ์ฉํ์ง ์์ผ๋ฉฐ ์ฃผ๋ก CSS์์ฑ๋ค๊ณผ ํจ๊ป ์ฌ์ฉํ๋ค. : ์์, ์คํ ํ๊ทธ : ์ข ๋ฃ, ํด๋ก์ฆ ํ๊ทธ ํ์ฌ ์์ฑ ์ค์ธ ์ด๋ฌํ ๋ฌธ์ฅ๋ค์ ๊พธ๋ฐ๋ ๋ง์ด ์ฌ์ฉ๋์ด ์ง๋ค. ์์) : ์์, ์คํ ํ๊ทธ : ์ข ๋ฃ, ํด๋ก์ฆ ํ๊ทธ (3) ์ค์ต ATOM ์ผ๋ก ์ด์ฉํ์ฌ spanํ๊ทธ๋ฅผ ์ค์ต ํด๋ณด์. ์์ ๊ฐ์ด HTML์ ์ง์ CSS๋ฅผ ์ ์ฉํ ๋ ์ฌ์ฉํ๋ style์์๋ฅผ ํ๊ทธ์ ํจ๊ป ์ฌ์ฉํ์ฌ ๊ธ์จ ๋ค์ ๋ฐฐ๊ฒฝ์.. ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์คํจ ๊พธ๋ฏธ๊ธฐ [brํ๊ทธ] ํ๊ทธ(1) ์ ์ ์ค๋ฐ๊ฟ์ ํ ๋ ์ฌ์ฉํ๋ ํ๊ทธ๋ก line break์ ์ฝ์๋ผ๊ณ ํ๋ค.๊ทธ๋ฆฌ๊ณ ์ข ๋ฃํ๊ทธ๊ฐ ์๋ ๋น ํ๊ทธ์ด๊ธฐ๋ ํ๋ค. (2) ์ฌ์ฉ๋ฒ ์์ฑํ ํ ์คํธ ๋ค์์ ํ๊ทธ๋ฅผ ์ด์ด ์ค๋ฐ๊ฟ์ ์ฌ์ฉํด ์ฃผ๊ธฐ๋ง ํ๋ฉด ๋๋ค. : ์์, ์คํ ํ๊ทธ์์ : ์ข ๋ฃ, ํด๋ก์ฆ ํ๊ทธ ํ๊ทธ์ ํจ๊ป ์ฌ์ฉํ๋ฉด? (3) ์ค์ต ATOM ์ผ๋ก ์ด์ฉํ์ฌ brํ๊ทธ๋ฅผ ์ค์ต ํด๋ณด์์~ ๊ฒฐ๊ณผ๋? ์ ์ฒ๋ผ ์ถ๋ ฅ์ด ๋๋๊ตฐ์. ์ค๋์ ์ฌ๊ธฐ๊น์ง... ์ด์ด๋ณด๊ธฐ โ ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์คํจ ๊พธ๋ฏธ๊ธฐ [spanํ๊ทธ] ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์คํจ ๊พธ๋ฏธ๊ธฐ [aํ๊ทธ] ํ๊ทธ(1) ์ ์ ํ์ดํผ๋งํฌ๋ฅผ ๊ฑธ์ด์ค๋ ์ฌ์ฉํ๋ ํ๊ทธ๋ก anchor(๋ป)์ ์ค์๋ง์ด๋ผ๊ณ ํ๋ค. (2) ์ฌ์ฉ๋ฒ ํ๊ทธ๋ ํ๊ทธ์ฒ๋ผ ํผ์ ์ฌ์ฉํ์ง ์๊ณ "์์ฑ"์ด๋ผ๋ ๊ฒ๊ณผ ํจ๊ป ์ฌ์ฉํด์ผ ํ๋ค.์์ ํ๊ทธ์ธ ์ ์์ "์์ฑ"๊ณผ "์์ฑ๊ฐ"์ ๊ธฐ์ฌ ํ "์ฝํ ์ธ ", ๊ทธ๋ฆฌ๊ณ ๋ง์ง๋ง์ ์ข ๋ฃ ํ๊ทธ๋ฅผ ๋ฌ์ ์ฃผ๋ฉด ๋๋ค. : ์์, ์คํ ํ๊ทธ : ์ข ๋ฃ, ํด๋ก์ฆ ํ๊ทธ ์ฌ๊ธฐ์ "์์ฑ"์ href์ target ๊ทธ๋ฆฌ๊ณ id ์ธ๊ฐ์ง๊ฐ ์๋ค.โถ href : ํด๋ฆญ์ ์ด๋ ํ ๋งํฌโถ target : ๋งํฌ๋ฅผ ์ฌ๋ ๋ฐฉ๋ฒโถ id : ์ฑ ๊ฐํผ ์ญํ (๋ด๋ถ ๋งํฌ)(๊ณผ๊ฑฐ name ์์ฑ์ ์ญํ ์ด HTML5๊ฐ ๋๋ฉด์ ํ์ง๋๋ฉด์ ๋์ฒด๋ก ์ฌ์ฉ๋๋ค๊ณ ํจ.) ์ฌ๊ธฐ์ "์์ฑ๊ฐ"์ _self, _blank, _parent, _top ๋ฑ์ผ๋ก ์กด์ฌํ๋๋ฐ,โถ _self : ํ์ฌ .. ์ด์ 1 2 3 4 5 6 7 ๋ค์