๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
728x90
๋ฐ˜์‘ํ˜•

HTML + CSS ์‹œ๋ฆฌ์ฆˆ๐Ÿ•ธ28

๋งํฌ !! very important! | HTML & CSS ์‹œ๋ฆฌ์ฆˆ 008 ๋งํฌ! ์ •๋ง ์›นํŽ˜์ด์ง€ ๋งŒ๋“ค๋•Œ ์ค‘์š”ํ•˜๋‹ค! ๋งํฌ ์–ด๋–ป๊ฒŒ ์ƒ์„ฑํ•ด์ฃผ๋Š”๋ฐ?? ์œ„ ์‚ฌ์ง„์ฒ˜๋Ÿผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ž…๋ ฅ ํ•ด์ค„์ˆ˜ ์žˆ๋‹ค. go there ~ ์ฃผ์†Œ์ž…๋ ฅ ๋ž€์—๋Š” ํด๋ฆญ์‹œ ๋“ค์–ด๊ฐ€๊ณ  ์‹ถ์€ ๋งํฌ๋ฅผ ๊ฑธ์–ด๋‘๋ฉด ๋œ๋‹ค. ๋ญ ์˜ˆ๋ฅผ ๋“ค์–ด ๊ตฌ๊ธ€๋กœ ๊ฐ€๊ณ  ์‹ถ๋‹ค! ๊ทธ๋ ‡๋‹ค๋ฉด google ์ด์™€ ๊ฐ™์ด ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ์ƒˆ์ฐฝ์ด ์•„๋‹Œ ์‚ฌ์šฉ์ค‘์ธ ์ฐฝ์—์„œ ๊ตฌ๊ธ€๋กœ ๋ฐ”๋€Œ๊ฒŒ ๋˜๋Š”๋ฐ ์ด๊ฑธ ๋ถˆํŽธํ•ด ํ•˜๋Š” ์‚ฌ์šฉ์ž๋“ค์ด ๊ฝค ์žˆ๋‹ค. (์“ด์ด๋„ ๋ถˆํŽธํ•จ) ๊ทธ๋ ‡๋‹ค๋ฉด ์ƒˆ๋กœ์šด ๋งํฌํด๋ฆญ์‹œ ์ƒˆ๋กœ์šด ์ฐฝ์œผ๋กœ ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋ญ”๋ฐ? google target="_blank" ์ด๊ฑธ ์—ฐ๊ฒฐํ•˜๊ณ  ์‹ถ์€ ์ฃผ์†Œ ๋’ค์— ์ถ”๊ฐ€ ํ•ด์ฃผ๋ฉด๋œ๋‹ค. ์‘์šฉํ•ด๋ณด์ž! ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ”๋‹ค๊ฐ€ ๋Œ์•„์™”๋‹ค๊ฐ€ ํ•˜๋Š” ๋ฐฉ๋ฒ•!!! ๋ญ์•ผ๋ญ์•ผ ๊ทธ๋Ÿฌ๋ฉด ์‘์šฉํ•ด์„œ ์ด์ฒ˜๋Ÿผ ๋ฉ”์ธํŽ˜์ด์ง€์—์„œ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ”๋‹ค๊ฐ€ ๋‹ค์‹œ ๋Œ.. 2021. 7. 22.
์˜ต์…”๋„ ํƒœ๊ทธ ์ด๊ฑด ๋˜ ๋ญ์•ผ? | HTML & CSS ์‹œ๋ฆฌ์ฆˆ 007 ์˜ต์…”๋„ ํƒœ๊ทธ(Optional Tags) .. ์ด๊ฑด ๋˜ ๋ญ์•ผ? ์˜ต์…”๋„ ํƒœ๊ทธ.. ์—๋Š” ํƒœ๊ทธ ๋“ค์„ ๋งํ•œ๋‹ค. ์ด๋Ÿฐ ํƒœ๊ทธ๋“ค์€ ์ง์ ‘ ํ•ด๋ณด๋ฉด ์•Œ๊ฒ ์ง€๋งŒ, ์“ฐ์ง€ ์•Š์•„๋„ ๋ณ„ ๋ฌธ์ œ ์—†์ด ์ž‘๋™๋œ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์˜ต์…”๋„ ํƒœ๊ทธ ๊ผญ ์จ์•ผ ํ•ฉ๋‹ˆ๊นŒ? Optional Tags! ๋‹จ์–ด ๊ทธ๋Œ€๋กœ ์„ ํƒ์  ํƒœ๊ทธ ๋ผ๋Š” ๋œป์„ ์ง€๋‹Œ๋‹ค. ์„ ํƒ์ ?? ๊ทธ๋ ‡๋‹ค๋ฉด ํ•ด๋„ ๋˜๊ณ  ์•ˆํ•ด๋„ ๋˜๋Š” ๊ฑด๊ฐ€? => ๊ฒฐ๋ก ๋ถ€ํ„ฐ ๋งํ•˜์ž๋ฉด ๊ทธ๋ ‡์Šต๋‹ˆ๋‹ค. ์ •๋ง ๊ฐœ์ธ ์ž์œ ์ธ๊ฒƒ ๊ฐ™๋‹ค. ์Œ..๋“ค์—ฌ์“ฐ๊ธฐ ,์ฃผ์„ ๋ฅผ ๊ผญ ์จ์•ผ ๋˜๋ƒ๋Š” ๋ฌป๋Š” ๊ฒƒ๊ณผ ๊ฑฐ์˜..๋น„์Šทํ•˜๋‹ค๊ณ  ๊ฐœ์ธ์ ์œผ๋กœ ๋ณธ๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ ๋‚˜๋Š” ์ •๋ฆฌ ๋ชฉ์ ์œผ๋กœ ์œ„์— ๋งํ–ˆ๋˜ ํƒœ๊ทธ๋“ค์„ ์‚ฌ์šฉํ•˜๋Š” ํ•˜๋Š”๊ฒŒ ์ข‹๋‹ค๊ณ  ๋ณธ๋‹ค. ๋ฅผ ํ†ตํ•ด์„œ ์ฝ”๋“œ์˜ ๊ตฌ์กฐ๊ฐ€ ํ•œ ๋ˆˆ์— ๋“ค์–ด์˜ค๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. +๊ทธ์น˜๋งŒ ๊ตฌ๊ธ€ ๊ฐ€์ด๋“œ (https://google.github.io/styleguide/ht.. 2021. 7. 22.
๋“ค์—ฌ์“ฐ๊ธฐ? ๊ทธ๊ฒŒ ๋ญ”๋ฐ? | HTML&CSS ์‹œ๋ฆฌ์ฆˆ 006 ๋“ค์—ฌ์“ฐ๊ธฐ ? ๊ทธ๊ฒŒ ๋ญ”๋ฐ?? ๋“ค์—ฌ์“ฐ๊ธฐ ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ tab ์„ ๋ˆ„๋ฅด๊ฑฐ๋‚˜ ํ•œ ๋ฒˆ์— ๋“œ๋ž˜๊ทธํ•ด์„œ ๋“ค์—ฌ์“ฐ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ๋Š” ๋“œ๋ž˜๊ทธํ•œ ํ›„ ctrl + }๋ฅผ ๋ˆ„๋ฅด๋ฉด ๋œ๋‹ค. ์œ„ ์‚ฌ์ง„์„ ๋ณด๋ฉด ๋“ค์—ฌ์“ฐ๊ธฐ๊ฐ€ ๋ญ”์ง€ ํ•œ๋ฒˆ๋งŒ์— ์ดํ•ด ํ•  ์ˆ˜ ์žˆ์„๊ฒƒ ๊ฐ™๋‹ค. ๋“ค์—ฌ์“ฐ๊ธฐ ๊ทธ๋Ÿฌ๋ฉด ์™œ ํ•˜๋Š”๋ฐ?? ๊ทธ๋”ด๊ฑฐ.. ์Œ ์ฐพ์•„๋ณธ ๊ฒฐ๊ณผ - ๋ถ€๋ชจ์š”์†Œ์˜ ํƒœ๊ทธ์˜ ์œ„์น˜๋‚˜ ํŒŒ์ผ์˜ ๊ฒฝ๋กœ๋ฅผ ์•Œ์•„๋ณด๊ธฐ ์‰ฝ๊ฒŒ ํ‘œ์‹œํ•˜๋ ค๊ณ  - ์›นํŽ˜์ด์ง€๋ฅผ ์ฝ”๋”ฉํ• ๋•Œ ์†Œ์Šค์ฝ”๋“œ๊ฐ€ ๋ณต์žกํ•˜๊ฒŒ ์žˆ์œผ๋ฉด ์ฐพ๊ธฐ์–ด๋ ค์›Œ์„œ => ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๊น”๋”ํ•˜๊ฒŒ! ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ดค์„๋•Œ ์•Œ์•„ ๋ณด๊ธฐ ์‰ฝ๊ฒŒ! ํ•˜๋ ค๊ณ  ์ด๋‹ค. ์†”์งํžˆ ์ž์‹ ๋งŒ์˜ ์ฝ”๋“œ๋ฅผ ๊ฐœ๋ฐœํ•˜๋ ค๊ณ  ๋“ค์—ฌ์“ฐ๊ธฐ ์•ˆํ•ด๋„ ๋ ๊นŒ? ์ƒ๊ฐ๋„ ํ•ด๋ดค๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ํ˜‘์—ญํ•„์š” ์—†๋Š” ๊ฐœ๋ฐœ์„ ํ• ๋•Œ์—๋„ ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง„๋‹ค๋ฉด ๋ณธ์ธ ๋˜ํ•œ ์ฐพ๋Š”๋ฐ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆด๊บผ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ๊ฒฐ๋ก ์€ ๋ฌด์กฐ๊ฑด ๋“ค์—ฌ์“ฐ๊ธฐ ์Šต๊ด€์„ ๋“ค์ด์ž! .. 2021. 7. 22.
CSS ๋ฌด์—‡์ธ๊ฐ€? | HTML & CSS ์‹œ๋ฆฌ์ฆˆ 005 HTML ์€ ์•Œ๊ฒ ๋Š”๋ฐ CSS ๋Š” ๋ญ์•ผ? ์ด์ฒ˜๋Ÿผ html ์€ ๋‚ด์šฉ์„ css ๋Š” ์Šคํƒ€์ผ์„ ๋‹ด๋‹นํ•œ๋‹ค๊ณ  ๋ณด๋ฉด ๋œ๋‹ค. ๋งˆ์น˜ ํฐํŠธ ํฌ๊ธฐ(Font-size), ํ…์ŠคํŠธ ์ •๋ ฌ(text-align), ํ…์ŠคํŠธ ์ƒ‰(color), ์—ฌ๋ฐฑ(margin) ์ด๋Ÿฐ ๋ชจ๋“  ๊พธ๋ฉฐ์ฃผ๋Š”๊ฒƒ๋“ค์„ ๋‹น๋‹นํ•˜๋Š”๊ฒŒ CSS ์ด๋‹ค. ์œ„์— ์‚ฌ์ง„์„ ๋ณด๋ฉด ๋ฐ‘์œผ๋กœ ๋ถ€ํ„ฐ CSS ๋ผ๊ณ  ๋ณด๋ฉด๋œ๋‹ค. ๋ง ๊ทธ๋Œ€๋กœ ์Šคํƒ€์ผ ๋‹ด๋‹น ํ•˜๋Š” ์ฝ”๋“œ๋“ค์ธ๋ฐ ์ž‘์„ฑ๋ฒ•์€ 1. ์Šคํƒ€์ผ ํ•ด์ฃผ๊ณ  ์‹ถ์€ ํƒœ๊ทธ๋ฅผ ๋จผ์ € ์ ์–ด์ค€๋‹ค. ex) h ๋˜๋Š” p ๋˜๋Š” p ์•ˆ์˜ em์„ ์Šคํƒ€์ผ ํ•ด์ฃผ๊ธฐ์œ„ํ•ด์„œ๋Š” p em { ๋ธ”๋ผ๋ธ”๋ผ; } 2. ์œ„์—์„œ๋Š” h (ํ—ค๋”)๋ฅผ ๊พธ๋ฉฐ์ฃผ๊ธฐ์œ„ํ•ด h ๋ฅผ ๋จผ์ € ์ ๊ณ  { }๋ฅผ ์ ๋Š”๋‹ค. 3. ๊ทธ๋ฆฌ๊ณ  { } ์•ˆ์— ๋‹ค๊ฐ€ ์Šคํƒ€์ผ ์ฝ”๋“œ๋ฅผ ์ ์œผ๋ฉด ๋˜๋Š”๋ฐ ์œ„ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด, ํ…์ŠคํŠธ ์‚ฌ์ด์ฆˆ , ํ…์ŠคํŠธ ์œ„์น˜ ์— ๋Œ€ํ•ด ์„ค.. 2021. 7. 22.
728x90
๋ฐ˜์‘ํ˜•