user-img
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก  31
thumbnail
[CSS] ๋ฐ•์Šค๋ชจ๋ธ 1
1. inline์ด ์•„๋‹Œ ์š”์†Œ (block, in-line block)์˜ ํฌ๊ธฐ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ (1) ๋„ˆ๋น„, ๋†’์ด ใ„ฑ. ์ ˆ๋Œ€์ ์ธ ์ˆ˜์น˜ ์ด์šฉ (px) ใ„ด. ๋ถ€๋ชจ ์š”์†Œ์˜ ํฌ๊ธฐ์— ๋Œ€ํ•œ ์ƒ๋Œ€์ ์ธ ์š”์†Œ ์ด์šฉ(em, %) ใ„ท. ์œˆ๋„์šฐ ์ฐฝ ์ „์ฒด ํฌ๊ธฐ์— ๋Œ€ํ•œ ์ƒ๋Œ€์ ์ธ ์š”์†Œ(์ด๋ฅผ ๋ทฐํฌํŠธ๋ผ๊ณ  ํ•จ) ์ด์šฉ (Xvw- ์œˆ๋„์šฐ ์ฐฝ ๋„ˆ๋น„์˜ X%, Xvh - ์œˆ๋„์šฐ ์ฐฝ ๋†’์ด์— ๋Œ€ํ•œ X%) ใ„น. ์œˆ๋„์šฐ ์ฐฝ ๋„ˆ๋น„์™€ ๋†’์ด ์ค‘ ํฐ ๊ฒƒ/ ์ž‘์€ ๊ฒƒ์—๋Œ€ํ•œ ์ƒ๋Œ€์ ์ธ ์š”์†Œ (Xvmax - ๋‘˜ ์ค‘ ํฐ ๊ฒƒ์˜ X%, Xvmin - ๋‘˜ ์ค‘ ์ž‘์€ ๊ฒƒ์— ๋Œ€ํ•œ X%) ใ…. max-width, min-width / max-height, min-height ์„ค์ •ํ•ด๋‘๋ฉด block์ด๋‚˜ inline-block์ด ํ•ด๋‹น ๋„ˆ๋น„๋‚˜ ๋†’์ด ์ด์ƒ์œผ๋กœ ์ปค์ง€๊ฑฐ๋‚˜ ์ž‘์•„์ง€์ง€ ์•Š์Œ. ..
2023.02.23
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
thumbnail
[HTML] Block ์š”์†Œ์™€ In-line ์š”์†Œ
1. in-line, block, inline-block ์š”์†Œ ํŠน์ง• (1) in-line๊ณผ block์˜ ์ฐจ์ด Block์€ ๋”ฑ๋”ฑํ•œ ์ƒ์ž์™€ ๊ฐ™๋‹ค. ์ƒ์ž์ฒ˜๋Ÿผ ๊ณต๊ฐ„์„ ๋…์ฐจ์ง€ํ•˜๊ณ  ๋†’์ด,๋„ˆ๋น„, ์•ˆํŒค์˜ ์—ฌ๋ฐฑ์˜ ํšจ๊ณผ ๋‹ค ์ ์šฉ๋จ. in-line์€ ๋žฉ์œผ๋กœ ๋ฌผ๊ฑด์„ ์”Œ์šด ๊ฒƒ๊ณผ ๊ฐ™๋‹ค. ๊ป๋ฐ๊ธฐ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ์ปจํ…์ธ ๋“ค๊ณผ ์–ด์šฐ๋Ÿฌ์ง„๋‹ค. (2) block๊ณผ in-line block ์˜ ์ฐจ์ด in-line block์€ ์ปจํ…์ธ  ํฌ๊ธฐ ๋งŒํผ์˜ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•๋œ ๋ฐ•์Šค์ด๋‹ค. block์ด ํ•˜๋‚˜์˜ ๊ฐ€๋กœ ๊ณต๊ฐ„ ์ „์ฒด๋ฅผ ๋…์ฐจ์ง€ ํ•˜๋Š” ๊ฒƒ๊ณผ ๋‹ฌ๋ฆฌ, in-line block์€ ํƒ๋ฐฐํšŒ์‚ฌ ๊ณต์žฅ ๋ผ์ธ์— ๋ฐ•์Šค๋ฅผ ๋‚˜๋ž€ํžˆ ๋Š˜์—ฌ๋œจ๋ ค ๋†“๋“ฏ์ด ๊ฐ€๋กœ ๊ณต๊ฐ„์„ ๊ณต์œ  ํ•ด์„œ ์“ธ ์ˆ˜ ์žˆ๋‹ค. (3) ํ‘œ in-line block inline-block ๊ธฐ๋ณธ ๋„ˆ๋น„ ์ปจํ…์ธ  ํฌ๊ธฐ์— ๋งž์ถค ๋ถ€๋ชจ์˜..
2023.02.18
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
[CSS] ์ƒ‰ ํ‘œํ˜„ํ•˜๊ธฐ
1.์ƒ‰ ํ‘œํ˜„์˜ ์›๋ฆฌ (1) ์ƒ‰ ์ด๋ฆ„์œผ๋กœ ํ‘œํ˜„ p { /* ๊ธ€์ž์ƒ‰ */ color: yellow; /* ๋ฐฐ๊ฒฝ์ƒ‰ */ background-color: black; } (2) RGB(A)๋กœ ํ‘œํ˜„ *ํ˜•ํƒœ rgb(๋นจ๊ฐ•,์ดˆ๋ก,ํŒŒ๋ž‘) rgba(๋นจ๊ฐ•,์ดˆ๋ก,ํŒŒ๋ž‘,๋ถˆํˆฌ๋ช…๋„) * ๊ฐ๊ฐ 0~255์ด๊ณ , ์ „๋ถ€ 255 ํ•˜๋ฉด ํฐ์ƒ‰, ์ „๋ถ€ 0ํ•˜๋ฉด ๊ฒ€์ •์ƒ‰ (%๋กœ ์“ธ ์ˆ˜๋„ ์žˆ๋‹ค.) ๋ถˆํˆฌ๋ช…๋„๋Š” ๊ฐ’์ด ๋‚ฎ์„์ˆ˜๋ก ํˆฌ๋ช…, ๋†’์„์ˆ˜๋ก ๋ถˆํˆฌ๋ช…. *rgb()๋งŒ ํ•˜๊ณ  ์ธํ’‹ 4๊ฐœ ๋„ฃ์–ด์„œ ๋ถˆํˆฌ๋ช…๋„ ํ‘œํ˜„๋„ ๊ฐ€๋Šฅํ•˜๋‹ค. p { /* ๊ธ€์ž์ƒ‰ */ color: rgba(100,50,20%,50%); /* ๋ฐฐ๊ฒฝ์ƒ‰ */ background-color: rgb(200, 150, 300); } (3)HEX๋กœ ํ‘œํ˜„ RGB๋ž‘ ๋˜‘๊ฐ™์€๋ฐ, ์œ„์˜ 10์ง„์ˆ˜๋ฅผ 16์ง„์ˆ˜๋กœ ํ‘œํ˜„ํ•œ ๊ฒƒ #..
2023.02.17
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
[CSS] ๋ฌธ๋‹จ๊ณผ ๋ชฉ๋ก ์Šคํƒ€์ผ ๋งŒ๋“ค๊ธฐ
1. ์ •๋ ฌ๊ณผ ๊ฐ„๊ฒฉ(์ž๊ฐ„, ์ŠคํŽ˜์ด์Šค ํฌ๊ธฐ, ์ค„ ๋†’์ด) p { /* left, center, right, justify */ text-align: left; letter-spacing: 0; word-spacing: 0; line-height: 1.5em; /* justify๋Š” ์ฑ„์›Œ ์“ฐ๊ธฐ (๊ธ€์˜ ์–‘์ชฝ ๋์„ ๋งž์ถ˜๋‹ค.) ์ŠคํŽ˜์ด์Šค๋ฐ” ๊ฐ„๊ฒฉ์€ em์ด๋‚˜ %๋“ฑ ์ƒ๋Œ€์ ์ธ ๊ฑธ๋กœ ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค ์™œ๋ƒํ•˜๋ฉด, ๊ฐ„๊ฒฉ์„ ์ƒ๋Œ€์  ํฌ๊ธฐ๋กœ ํ•ด์•ผ ํฐํŠธ๋‚˜ ๊ธ€์ž ํฌ๊ธฐ์— ๋งž๊ฒŒ ๊ฐ„๊ฒฉ์ด ๋„์›Œ์ง€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋“ค์—ฌ์“ฐ๊ธฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€ */ } 2. ๋“ค์—ฌ์“ฐ๊ธฐ p { text-indent: 0.8em; } /* ๋“ค์—ฌ์“ฐ๊ธฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์–ผ๋งˆ๋‚˜ ๋“ค์—ฌ์“ฐ๋Š” ์ง€๋ฅผ ๊ธ€์ž ํฐํŠธ ์ž์ฒด์˜ ๋„์–ด์“ฐ๊ธฐ ๋น„์œจ์— ๋งž์ถ”๋Š” ๊ฒƒ์ด ์ข‹๊ธฐ ๋•Œ๋ฌธ์—, em์ด๋‚˜ %๊ฐ™์€ ์ƒ๋Œ€์  ๋น„์œจ๋กœ ์“ฐ๋Š ๊ฒƒ์ด ์ข‹๋‹ค...
2023.02.16
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
thumbnail
[HTML] ๊ธ€์ž ํ…์ŠคํŠธ์™€ ์Šคํƒ€์ผ
1. CSS ๊ธฐ๋ณธ ๋ฌธ๋ฒ• ์„ ํƒ์ž { ์†์„ฑ1: ๊ฐ’; ์†์„ฑ2: ๊ฐ’; /* ... */ } 2. ํฐํŠธ ์Šคํƒ€์ผ(๊ธฐ์šธ์ด๊ธฐ) + ํฐํŠธ ๊ตต๊ธฐ p { /* normal, italic, oblique */ font-style: normal; /* normal, bold, 100~900 */ font-weight: normal; } /*p ํƒœ๊ทธ์— ๋Œ€ํ•ด์„œ ํ•ด๋‹น ํฐํŠธ ๊ธฐ์šธ๊ธฐ, ๊ตต๊ธฐ๊ฐ€ ์ ์šฉ๋œ๋‹ค.*/ 3. ์š”์†Œ๋งˆ๋‹ค ๊ธ€์ž ํฌ๊ธฐ ํ‚ค์šฐ๊ธฐ (์ผ๊ด„ ํ‚ค์šฐ๊ธฐ, ์ƒ๋Œ€ ๋น„์œจ๋กœ ํ‚ค์šฐ๊ธฐ(๋ณต๋ฆฌ o,x)) (1) ์ผ๊ด„ ์ปค์ง (px : ํ”ฝ์…€) ์„ ํƒ์ž { font-size: ~~px; } /*ํ•ด๋‹น ์„ ํƒ์ž ์˜์—ญ ๋‚ด์˜ ๋ชจ๋“  ๊ธ€์ž๋Š” ~~px๋งŒํผ ํฌ๊ธฐ๊ฐ€ ์ปค์ง.*/ (2) ๊ฐˆ์ˆ˜๋ก ๋น„์œจ ๋งŒํผ ์ปค์ง (100%, 1em) ์„ ํƒ์ž { font-size: ##; } ์„ ํƒ์ž ..
2023.02.16
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
thumbnail
[HTML] CSS ์ ์šฉ ๋ฐฉ๋ฒ•๊ณผ ์„ ํƒ์ž๋“ค
1.CSS ์ ์šฉ๋ฐฉ๋ฒ• (1)์ธ๋ผ์ธ ์Šคํƒ€์ผ (inline style) ํƒœ๊ทธ ์•ˆ์— css ๊ตฌ๋ฌธ์„ ์ ์–ด๋„ฃ๋Š” ์Šคํƒ€์ผ > ์žฌ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€ํ•˜๊ณ , HTML๊ณผ CSS๊ฐ€ ๋ถ„๋ฆฌ๋˜์ง€ ์•Š๊ธฐ์— ๋น„์ถ” (2) ๋‚ด๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ (internal style sheet) HTML ํŽ˜์ด์ง€ ๋‚ด๋ถ€ Head ํƒœ๊ทธ ์•ˆ์— style ํƒœ๊ทธ๋ฅผ ๋‘๊ณ  ๊ทธ ์•ˆ์— CSS ์ฝ”๋“œ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹ > ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‚˜, CSS ์ฝ”๋“œ๊ฐ€ ๋งŽ์•„์งˆ์ˆ˜๋ก, HTML ์ž‘์„ฑํ•˜๊ธฐ๊ฐ€ ๋ณต์žกํ•ด์ง. (3) ๋งํ‚น ์Šคํƒ€์ผ ์‹œํŠธ (linking style sheet) ์™ธ๋ถ€ CSS ํŒŒ์ผ๊ณผ HTML ๋ฌธ์„œ๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ๊ฒƒ CSS์™€ HTML์ด ๋ถ„๋ฆฌ ๋˜์–ด์„œ ๊ฐ€๋…์„ฑ ์ข‹๊ณ , ํ•˜๋‚˜์˜ CSS ํŒŒ์ผ์„ ์—ฌ๋Ÿฌ HTML ๋ฌธ์„œ์—์„œ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ํŽธํ•จ. 2. ์„ ํƒ์ž๋“ค (0). ํŠน์ง• * ๋˜‘๊ฐ™์€ ์„ ํƒ์ž์— ๊ด€ํ•œ ๊ฒƒ์ผ ๊ฒฝ์šฐ..
2023.02.15
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
thumbnail
[HTML] ๊ธฐํƒ€ ํ™œ์šฉ๋˜๋Š” ํƒœ๊ทธ
1. pre ํƒœ๊ทธ (1) ์ฝ”๋“œ pre ํƒœ๊ทธ pre ํƒœ๊ทธ์— ํ…์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ์ŠคํŽ˜์ด์Šค, ํƒญ, ์—”ํ„ฐ ๋“ฑ ๋ชจ๋“  ๊ณต๋ฐฑ ์š”์†Œ๋“ค์ด ์ด์™€ ๊ฐ™์ด ํ™”๋ฉด์— ๊ทธ๋Œ€๋กœ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋•Œ๋ฌธ์— pre ํƒœ๊ทธ๋Š” ์•„๋ž˜์˜ ์•„์Šคํ‚ค ์•„ํŠธ(Ascii art)๋“ค์ฒ˜๋Ÿผ ๊ณต๋ฐฑ์š”์†Œ๋“ค์„ ์ ๊ทน ํ™œ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ,d888a ,d88888888888ba. ,88"I) d a88']8i a88".8"8) `"8888:88 " _a8' .d8P' PP .d8P'.8 d) "8:88:baad8P' ,d8P' ,ama, .aa, .ama.g ,mmm d8P' 8 .8' 88):888P' ,d88' d8[ "8..a8"88 ,8I"88[ I88' d88 ]IaI" d8[ a88' dP "bm8mP8'(8'.8I 8[ d88' `" .8..
2023.02.10
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก 
[HTML] ์‚ฌ์šฉ์ž๋กœ๋ถ€ํ„ฐ ์ž…๋ ฅ ๋ฐ›๊ธฐ 3
1. textarea ํƒœ๊ทธ textarea ํƒœ๊ทธ ๋ฉ”์‹œ์ง€๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”. 2. ์˜ต์…˜์„ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ (1) select,option ํƒœ๊ทธ ์˜ต์…˜๋“ค์„ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ select, option ํƒœ๊ทธ ์–ธ์–ด -- ์–ธ์–ด ์„ ํƒ -- HTML CSS ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ (2) optgroup ํƒœ๊ทธ optgroup ํƒœ๊ทธ ์‡ผํ•‘ ๋ชฉ๋ก ์‚ฌ๊ณผ ํฌ๋„ ์˜ค๋ Œ์ง€ ๋‹น๊ทผ ํ† ๋งˆํ†  ๊ฐ€์ง€ ์†Œ๊ณ ๊ธฐ ๋ผ์ง€๊ณ ๊ธฐ ๋‹ญ๊ณ ๊ธฐ (3) datalist ํƒœ๊ทธ datalist ํƒœ๊ทธ ํ˜„์žฌ ์ง์—… 3. ์ •๋„๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ํƒœ๊ทธ (1) progress ํƒœ๊ทธ ์ •๋„๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ํƒœ๊ทธ progress ํƒœ๊ทธ 0% (2) meter ํƒœ๊ทธ meter ํƒœ๊ทธ 20๋‹ฌ๋Ÿฌ 4. ์Šค์Šค๋กœ ํ•ด๋ณด๊ธฐ
2023.02.10
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ/HTML, CSS - ์ด๋ก