profile
Backend Developer ๐ŸŒฑ
post-thumbnail

[TIL] CSS_position

position ์€ static, relative, absolute, fixed ๋“ฑ์ด ์žˆ๋‹ค. ์ด๋ฒˆ์—๋Š” ์ด 4๊ฐ€์ง€ ๊ฐ’๋งŒ ์‚ดํŽด๋ณด๋ ค๊ณ  ํ•œ๋‹ค! 1. Position? HTML์˜ tag์˜ ์œ„์น˜๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค. 1) static : ๋””ํดํŠธ! ๊ธฐ๋ณธ ๊ฐ’์ด๋‹ค! (tag๋Š” ์ฐจ๋ก€๋Œ€๋กœ

2020๋…„ 9์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[TIL] CSS_ block, inline, inline-block

1. Block > ๋ธ”๋ก์€ ์œ„์•„๋ž˜๋กœ ์Œ“๋Š”๋‹ค. ๊ทธ๋ž˜์„œ ๋ธ”๋ก ์†์„ฑ์ธ ํƒœ๊ทธ๋“ค์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ˜ํ…์ธ  ํฌ๊ธฐ์— ์ƒ๊ด€์—†์ด ํ•œ ์นธ , ํ•œ ์นธ์”ฉ์„ ๋ชฝ๋•… ์ฐจ์ง€ํ•œ๋‹ค. - block ์š”์†Œ์ธ tag๋“ค - width ๊ฐ’๊ณผ height ๊ฐ’์„ ์ž…๋ ฅํ•ด์„œ ํฌ๊ธฐ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค. - widht์—

2020๋…„ 9์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[TIL] CSS_์ด๋ฏธ์ง€ , <div>ํฌ๊ธฐ

์ด๋ฏธ์ง€ ๋„ฃ๋Š” ๋ฐฉ๋ฒ•์€ html์—์„œ img ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ฟ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ css๋กœ๋„ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฑธ ์•Œ์•˜๋‹ค!!html์—์„œ ์„ธ์…˜์„ ๋‚˜๋ˆ„์–ด์ฃผ๋Š” div ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๊ณ , css์—์„œ background-image ์†์„ฑ์„ ์ถ”๊ฐ€ํ•ด์„œ ์†์„ฑ๊ฐ’์— u

2020๋…„ 9์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[TIL] CSS_selectorํ‘œํ˜„, ์šฐ์„ ์ˆœ์œ„

์ €๋ฒˆ TIL์—์„œ ์ผ๋˜ css ๊ธฐ๋ณธ๊ตฌ์กฐ๋‹ค. h3์€ selector์ด๊ณ  ์ด seletor๋Š” ๊ฒฐํ•ฉํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. selector(์„ ํƒ์ž)์— class๋‚˜ id๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ํƒœ๊ทธ์™€ ๊ฒฐํ•ฉํ•  ์ˆ˜ ์žˆ๋‹ค. โœ๏ธ ์ด๋Ÿฐ html ๊ตฌ์กฐ๊ฐ€ ์žˆ์œผ๋ฉด, โœ๏ธ p ํƒœ๊ทธ์ด๋ฉด์„œ p-tag ํด๋ž˜

2020๋…„ 9์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[TIL] CSS_์ƒ์†, ๊ทธ๋ฃน

css๊ฐ€ ๊ฐ€์ง„ ํŠน์„ฑ์ด๋ผ๊ณ  ํ•œ๋‹ค. ์Šคํƒ€์ผ์ด ์ƒ์†๋˜์–ด ๋ถ€๋ชจ๊ฐ€ ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉด ์ž์‹์—๊ฒŒ๋„ ๊ฐ™์€ ์Šคํƒ€์ผ์ด ์ ์šฉ๋˜๊ณ , ๋ถ€๋ชจ์˜ ์†์„ฑ์ด ์žˆ์–ด๋„ ์ž์‹ ๋ณธ์ธ์ด ํ•ด๋‹น ์†์„ฑ์„ ๋”ฐ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋ฉด ๋ณธ์ธ์˜ ์Šคํƒ€์ผ์ด ์ ์šฉ๋œ๋‹ค. ์ฒ˜์Œ ์ž๊ธฐ์†Œ๊ฐœ ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๋•Œ๋Š” ๋ถ€๋ชจ์™€ ์ž์‹์ด๋ผ๋Š” ๋‹จ์–ด๋„ ์ด

2020๋…„ 9์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[TIL] CSS_ box-sizing

width ์™€ height๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์š”์†Œ์˜ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ width์™€ height๋Š” margin์ด๋‚˜ border, padding ๊ฐ’์„ ๋‹ค ๋บ€! ์˜ˆ์‹œ๋ฅผ ๋“ค์ž๋ฉด, โœ๏ธ ์ฝ”๋“œ ์ž‘์„ฑ ๐Ÿ–ฅ ์‹คํ–‰ ํ™”๋ฉดwecode๋ผ๊ณ  ์“ฐ์—ฌ์ง„ ์š”์†Œ์˜ ๊ฐ’์€ ๋‚ด๊ฐ€ ์ง€์ •ํ•œ width

2020๋…„ 9์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[TIL] CSS_margin,padding,border

๋ชจ๋“  ์š”์†Œ๋“ค์€ margin, padding, border๋ฅผ ๊ฐ€์ง„๋‹ค. margin๊ณผ padding์€ ์—ฌ๋ฐฑ์„, border๋Š” ํ…Œ๋‘๋ฆฌ๋ฅผ ๋””์ž์ธํ•  ์ˆ˜ ์žˆ๋‹ค. 1. margin ํ…Œ๋‘๋ฆฌ(border)์˜ ๋ฐ”๊นฅ์— ์žˆ๋Š” ์ฃผํ™ฉ์ƒ‰ ๋ถ€๋ถ„์ด margin์ด๋‹ค. โœ๏ธ html ์ฝ”๋“œ โœ

2020๋…„ 9์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[TIL] CSS_font style

๋ธŒ๋ผ์šฐ์ €์— ๋‚˜์˜ค๋Š” ํ…์ŠคํŠธ๋“ค์„ ํฐํŠธ ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•ด์„œ ๋‹ค์–‘ํ•˜๊ฒŒ ๋””์ž์ธํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค. font-family์— ๋Œ€ํ•ด ๊ฐ„๋žตํžˆ .. ์™œ๋ƒํ•˜๋ฉด ๋‚œ ๋ชฐ๋ž์œผ๋‹ˆ๊นŒ... ์–ด๋–ค ์ด์œ ๋กœ ๊ทธ๋ ‡๊ฒŒ ํฐํŠธ๋“ค์„ ๋‚˜์—ดํ–ˆ๋Š”์ง€...!

2020๋…„ 9์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[TIL] CSS ์ ์šฉ๊ณผ ์ž‘์„ฑ

HTML๋กœ ๊ธฐ๋ณธ ๋ผˆ๋Œ€๋ฅผ ์žก์•˜์œผ๋ฉด CSS๋กœ๋Š” ๋””์ž์ธ์„ ์žก์„ ์ˆ˜ ์žˆ๋‹ค. ์ด CSS๋ฅผ HTML์— ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์ด 3๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค!

2020๋…„ 9์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[TIL] HTML Attributes

ํƒœ๊ทธ์—๋Š” ์†์„ฑ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•œ ํƒœ๊ทธ์— ์—ฌ๋Ÿฌ ์†์„ฑ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.a๋Š” ํƒœ๊ทธ๊ณ , href๋Š” ์†์„ฑ์ด๋‹ค.ํƒœ๊ทธ์— ์ด๋ฆ„์„ ๋ถ€์—ฌํ•˜๋Š” ์†์„ฑ์ด๋‹ค. ๋‹ค๋ฅธ id์˜ ์ด๋ฆ„๊ณผ ์ค‘๋ณต๋˜์–ด์„œ๋Š” ์•ˆ๋œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉดbase๋ผ๋Š” ์ด๋ฆ„์„ ๊ฐ€์ง„ id๋Š” ํ•œ๋ฒˆ๋งŒ ์“ธ ์ˆ˜ ์žˆ๋‹ค! ์œ ์ผํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„

2020๋…„ 9์›” 14์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[TIL] HTML Tag

repl.it๋ฅผ ํ†ตํ•ด์„œ ๋ฐฐ์šด ๋‚ด์šฉ๋“ค์ด๋‹ค. ์œ„์ฝ”๋“œ ์ „์— ์ƒํ™œ์ฝ”๋”ฉ์ด๋‚˜ ์‚ฌ์ „์Šคํ„ฐ๋””๋กœ ์›นํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ๋ฅผ ํ•˜๋ฉด์„œ ๋ถ„๋ช…ํžˆ ์•Œ๊ณ  ๋„˜์–ด๊ฐ”๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ ๋ง‰์ƒ TIL์ด๋‚˜ ๊ธ€๋กœ ์งˆ๋ฌธํ•  ๋•Œ ์–ด๋–ป๊ฒŒ ์ง€์นญํ•ด์•ผํ•˜๋Š”์ง€ ๋ชฐ๋ผ์„œ ๋‚œ๊ฐํ–ˆ์„ ๋•Œ๊ฐ€ ์žˆ์—ˆ๋‹ค. ์—ญ์‹œ... ๊ฒฐ๊ตญ์—” ๋ชฐ๋ž๋‹ค๋Š” ๊ฑฐ๋‹ค. ์ด๋ฒˆ์— rep

2020๋…„ 9์›” 14์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€