profile
Frontend Engineer ๐ŸŒฑ
post-thumbnail

[TIL] React - Styled Components

์Šคํƒ€์ผ์„ ์ œ๊ณตํ•˜๋Š” CSS-in-JS ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•œ ํ”„๋ ˆ์ž„์›Œํฌstyled-components ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ณ , CSS๊ตฌ์„ฑ ์š”์†Œ์˜ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.css-in-js๋Š” 2018๋…„ ์ดํ›„ ํญ๋ฐœ์ ์œผ๋กœ ์„ฑ์žฅํ•ด์™”๊ณ , ๊ทธ ์ค‘ S

2021๋…„ 12์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

CSS display ์†์„ฑ - inline, block, inline-block

CSS์—์„œ display ์†์„ฑ์€ ์›นํŽ˜์ด์ง€ ์ƒ์—์„œ ์š”์†Œ๋“ค์ด ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ง€๊ณ  ๋‹ค๋ฅธ ์š”์†Œ๋“ค๊ณผ ์–ด๋–ป๊ฒŒ ์ƒํ˜ธ๋ฐฐ์น˜ ๋˜๋Š”์ง€๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค. inline block inline-block ์„ ์†์„ฑ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.์ฝ˜ํ…์ธ ์˜ ํ๋ฆ„์„ ๋Š์ง€ ์•Š๊ณ , ์ „ํ›„ ์ค„ ๋ฐ”๊ฟˆ ์—†์ด ํ•œ ์ค„์— ๋‹ค๋ฅธ

2021๋…„ 11์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

CSS Layout : position ์†์„ฑ

position ์†์„ฑ์€ ๋ฌธ์„œ ์•ˆ ํ…์ŠคํŠธ๋‚˜ ์ด๋ฏธ์ง€์™€ ๊ฐ™์€ ์š”์†Œ๋“ค์„ ์›ํ•˜๋Š” ์œ„์น˜๋กœ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๊ณ  ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ๋†“์„ ์ง€๋ฅผ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ๊ฐ’. ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์— ๋”ฐ๋ผ ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค. top right bottom left z-index ์†์„ฑ์ด ์ถ”๊ฐ€๋˜์–ด๋„

2021๋…„ 11์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Semantic Web - <img>, {background-image}

Semantic Web ๋ฐ์ดํ„ฐ๋ฅผ ์ปดํ“จํ„ฐ๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์˜๋ฏธ์— ๋งž๊ฒŒ ๊ตฌ์„ฑ๋œ ์›น์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ์›น์„ ๊ตฌ์„ฑํ• ๋•Œ ์ ์ ˆํ•œ ์œ„์น˜์— ์ ํ•ฉํ•œ ์š”์†Œ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง„ ํ•˜๋‚˜์˜ ๊ตฌ์กฐ๋กœ ๋งŒ๋“ค์–ด์•ผ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ •ํ™•ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Semantic Tag ์˜๋ฏธ๋ก ์ ์ธ ํƒœ๊ทธ

2021๋…„ 11์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

์ž๊ธฐ์†Œ๊ฐœ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ2 - CSS

transform ์š”์†Œ์— ํšŒ์ „, ํฌ๊ธฐ ์กฐ์ ˆ, ๊ธฐ์šธ์ด๊ธฐ, ์ด๋™ ํšจ๊ณผ๋ฅผ ๋ถ€์—ฌํ•  ์ˆ˜ ์žˆ๋‹ค. Property Values scale ์ง€์ •ํ•œ ํฌ๊ธฐ๋งŒํผ ์š”์†Œ๋ฅผ ํ™•๋Œ€/์ถ•์†Œ rotate ์ง€์ •๋œ ๊ฐ๋„(deg)๋งŒํผ ์š”์†Œ๋ฅผ ํšŒ์ „ translate ์ง€์ •๋œ ์ขŒํ‘œ(X,Y)๋กœ ์š”์†Œ๋ฅผ ์ด๋™

2021๋…„ 10์›” 8์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

์ž๊ธฐ์†Œ๊ฐœ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ1

์œ„์ฝ”๋“œ ์‚ฌ์ „์Šคํ„ฐ๋”” ์ฒซ ํ”„๋กœ์ ํŠธ๋กœ ์ž๊ธฐ์†Œ๊ฐœ ํŽ˜์ด์ง€๋ฅผ ์ œ์ž‘ํ–ˆ๋‹ค. ์›น์‚ฌ์ดํŠธ๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ์ œ์ž‘ํ•ด๋ณด๋‹ˆ ๋ง‰ํžˆ๋Š” ๋ถ€๋ถ„๋“ค์ด ๊ฝค ์žˆ์—ˆ๋‹ค. ๐Ÿค” ์ด๋ฒˆ์— ์ƒˆ๋กœ ์•Œ๊ฒŒ ๋œ ๊ฒƒ๋“ค์„ ์ •๋ฆฌํ•ด ๋ณด๋ ค ํ•œ๋‹ค!

2021๋…„ 10์›” 5์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

CSS

CSS Basics

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