๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ“บ Front End/-- HTML & CSS16

4. HTML ํ…Œ์ด๋ธ” ํ…Œ์ด๋ธ” ์ •๋ณด๋ฅผ ์ด์ฐจ์›์ ์œผ๋กœ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉํ•˜๋ฉฐ ์›น ๋ฌธ์„œ์—์„œ ํ…Œ์ด๋ธ”์„ ์ด์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ…Œ์ด๋ธ” ์ž‘์„ฑ : ํ…Œ์ด๋ธ” ์ƒ์„ฑ์„ ์œ„ํ•œ ํƒœ๊ทธ : table row์œผ๋กœ์จ ํ…Œ์ด๋ธ”์— ํ•˜๋‚˜์˜ ํ–‰ ์ƒ์„ฑ : table data์œผ๋กœ์จ ํ…Œ์ด๋ธ”์— ํ•˜๋‚˜์˜ ์…€ ์ƒ์„ฑ : table header์œผ๋กœ์จ ํ…Œ์ด๋ธ”์˜ ์ œ๋ชฉ์œผ๋กœ ํ‘œ์‹œ๋˜๋Š” ์…€ ์ƒ์„ฑ : ํ…Œ์ด๋ธ”์˜ ์ œ๋ชฉ ํ…Œ์ด๋ธ” ์„ ์–ธ ํƒœ๊ทธ ~ ์œผ๋กœ ํ…Œ์ด๋ธ”์„ ์„ ์–ธํ•ด์ฃผ๊ณ  ํƒœ๊ทธ ์•ˆ์—์„œ , , ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. first data second data ํ…Œ์ด๋ธ” ์ œ๋ชฉ ํƒœ๊ทธ ์™€ ๊ณผ ๊ฐ™์€ ์—ญํ• (์ œ๋ชฉ)์„ ์ˆ˜ํ–‰ํ•˜์ง€๋งŒ ์ฐจ์ด์ ์ด ์žˆ๋Š”๋ฐ ํƒœ๊ทธ๋Š” ์ œ๋ชฉ์œผ๋กœ ํ‘œ์‹œ๋˜๋Š” ์…€์ด๋‹ค. ํ…Œ์ด๋ธ”์˜ ์ œ๋ชฉ Real Title hello first data second data world third data fourth .. 2019. 11. 29.
3. HTML ์ด๋ฏธ์ง€ ์‚ฝ์ž… ์ด๋ฏธ์ง€ ํƒœ๊ทธ HTML์—์„œ ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์ด ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ์ƒ๋Œ€ URL์˜ ๊ฒฝ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค src : ํ•„์ˆ˜ ์†์„ฑ์œผ๋กœ ์ด๋ฏธ์ง€ ํŒŒ์ผ์„ ์—ฐ๊ฒฐ alt : ์ด๋ฏธ์ง€ ํŒŒ์ผ์ด ์—†์œผ๋ฉด, ํŒŒ์ผ์— ๋Œ€ํ•œ ์„ค๋ช…์ด ๋‚˜ํƒ€๋‚œ๋‹ค. title : ๋งˆ์šฐ์Šค๋ฅผ ๊ฐ€์ ธ๋‹ค๋Œ€๋ฉด ํŒŒ์ผ์— ๋Œ€ํ•œ ์„ค๋ช…์ด ๋‚˜์˜ด ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ ์กฐ์ ˆ width : ์ด๋ฏธ์ง€ ๊ฐ€๋กœ ํฌ๊ธฐ height : ์ด๋ฏธ์ง€ ์„ธ๋กœ ํฌ๊ธฐ ์ด๋ฏธ์ง€์™€ ๋ฌธ์ž์˜ ์ •๋ ฌ ์‚ฝ์ž…ํ•œ ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ๋Š” vspace ๋‚˜ hspace ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ์กฐ์ ˆํ•œ๋‹ค. ์ด ๋•Œ ํ˜•์‹์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. vspace : ์ด๋ฏธ์ง€ ์ƒํ•˜์˜ ์—ฌ๋ฐฑ hspace : ์ด๋ฏธ์ง€ ์ขŒ์šฐ์˜ ์—ฌ๋ฐฑ ์ด๋ฏธ์ง€๋กœ ๋ฌธ์„œ ์—ฐ๊ฒฐ 2019. 11. 28.
2. HTML ๊ธฐ๋ณธ ํƒœ๊ทธ ์ˆœ์„œ HTML ๊ธฐ๋ณธ ํƒœ๊ทธ ๋ฌธ์ž ์„œ์‹ ํƒœ๊ทธ ๋‹จ๋ฝ ์„œ์‹ ํƒœ๊ทธ ๋ชฉ๋ก ํƒœ๊ทธ ์—ฐ๊ฒฐ ํƒœ๊ทธ ๊ธฐ๋ณธ ํƒœ๊ทธ ๋ฌธ์„œ ๊ตฌ์กฐ ํƒœ๊ทธ Html ํƒœ๊ทธ์ค‘ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ํƒœ๊ทธ๋กœ์จ ๋ฌธ์„œ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•˜๋Š” , , , , ๊ฐ€ ์žˆ์œผ๋ฉฐ ์ด๋Ÿฌํ•œ ํƒœ๊ทธ๋“ค๋กœ HTML ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค. ํƒœ๊ทธ๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ , , , , ํƒœ๊ทธ๋Š” ํ•„์ˆ˜ ํƒœ๊ทธ๋กœ ํ‘œ์‹œ๋œ ํƒœ๊ทธ๋“ค์€ ๋ฌธ์„œ์— ๋ฐ˜๋“œ์‹œ ์‚ฌ์šฉ๋˜์–ด์•ผ ํ•œ๋‹ค. ํƒœ๊ทธ html ํƒœ๊ทธ๋Š” ์š”์†Œ๋ฅผ ์ •์˜ํ•˜๋ฉฐ, ๋ฌธ์„œ ํŠธ๋ฆฌ์—์„œ ๋ฃจํŠธ ๋…ธ๋“œ์— ํ•ด๋‹น๋˜๋Š” ๋ฃจํŠธ ์š”์†Œ๋กœ ๋ฌธ์„œ์˜ ๋ชจ๋“  html ์š”์†Œ๋ฅผ ํฌํ•จํ•œ๋‹ค lang : ์š”์†Œ ๋‚ด์šฉ์˜ ์ž์—ฐ ์–ธ์–ด dir : ์š”์†Œ ๋‚ด์šฉ์˜ ์ž‘์„ฑ ๋ฐฉํ–ฅ ํƒœ๊ทธ ์š”์†Œ์—๋Š” ์š”์†Œ์™€ ์š”์†Œ๋ฅผ ํฌํ•จํ•˜๋ฉฐ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํƒœ๊ทธ๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์žˆ๋‹ค. : ๋ฌธ์„œ์˜ ์ œ๋ชฉ : ๋ฌธ์„œ์˜ ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ : ๋งํฌ ์—ฐ๊ฒฐ : ์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ : ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ง€์›๋˜์ง€ ์•Š๋Š” ๋ธŒ๋ผ.. 2019. 11. 27.
1. Html ๊ธฐ์ดˆ HTML HyperTextMarkupLanguage ์€ ์›น์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํ•˜์ดํผํ…์ŠคํŠธ ๋ฌธ์„œ ๋˜๋Š” ํŽ˜์ด์ง€๋ฅผ ํƒœ๊ทธ(Tag) ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ž‘์„ฑํ•˜๋Š” ๋งˆํฌ์—… ์–ธ์–ด์ด๋‹ค. HTML ์ข…๋ฅ˜ ๋ฐ ๋ฐœ์ „ ๊ณผ์ • HTML 2.0 HTML 2.0 ์€ ์ด์ „๊นŒ์ง€ ์‚ฌ์šฉ๋˜๋˜ HTML์„ ํ‘œ์ค€ํ™” ์‹œ์ผฐ๊ณ  ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌธ์„œ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•˜๋„๋ก ํ•˜๋ฉฐ ์ œ๋ชฉ, ๋ฌธ๋‹จ, ๋ชฉ๋ก, form์„ ์ด์šฉํ•˜์—ฌ ์ž‘์„ฑ, ์ด๋ฏธ์ง€ ์‚ฝ์ž…, ํ•˜์ดํผ ๋งํฌ ๋“ฑ์˜ ๊ธฐ๋Šฅ์„ ํฌํ•จํ•œ๋‹ค HTML 3.2 HTML 2.0์— ๋ช…์‹œ๋œ ๊ธฐ๋Šฅ ์™ธ์—ฉ ํ…Œ์ด๋ธ”, ํ”„๋ ˆ์ž„, ์ฒจ์ž ํ‘œํ˜„ ๋“ฑ์„ ์ถ”๊ฐ€ํ•˜์˜€์œผ๋ฉฐ ๋‚˜์•„๊ฐ€ ์ž๋ฐ” ์• ํ”Œ๋ฆฟ ์„ ์›น ๋ฌธ์„œ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜์˜€๋‹ค. HTML 4.01 ์ตœ์ดˆ๋กœ CSS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํฐํŠธ, ๋ ˆ์ด์•„์›ƒ๋“ฑ์˜ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์—ˆ๊ณ  ํ…Œ์ด๋ธ” ๋ฐ ํ”„๋ ˆ์ž„์˜ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•˜์˜€๋‹ค. ๋ฟ๋งŒ ์•„๋‹ˆ.. 2019. 11. 27.