๋ฐ˜์‘ํ˜•

Programming/CSS 2

[CSS] ๊ธด ๋‹จ์–ด ์ฒ˜๋ฆฌ ์‹œ ์ค„๋ฐ”๊ฟˆ ๊ธฐ์ค€ ์ •ํ•˜๋Š” ๋ฐฉ๋ฒ• (๋‹จ์–ด ๊ธฐ์ค€ / ํ•œ ๊ธ€์ž ๊ธฐ์ค€)

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” CSS์—์„œ ๊ธด๋‹จ์–ด ์ฒ˜๋ฆฌ ์‹œ ์ค„๋ฐ”๊ฟˆ ๋‹จ์–ด ๊ธฐ์ค€์„ ์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. How to solve the problem ์•„๋ž˜์˜ html์ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ด…์‹œ๋‹ค. {item.desc} ์ฒ˜์Œ์— ์ œ๊ฐ€ ์ ์šฉํ•œ CSS๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋‹จ์–ด ๋’ค์— elispsis ์ฒ˜๋ฆฌ๋Š” ๋˜์—ˆ์ง€๋งŒ, ์ค„๋ฐ”๊ฟˆ ์ฒ˜๋ฆฌ๊ฐ€ ์ œ๋Œ€๋กœ ์•ˆ๋˜๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. > p { margin-bottom: 8rem; font-size: 10rem; line-height: 1.3; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; } ๋”ฐ๋ผ์„œ ์ €๋Š” word-break๋ผ๋Š” ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ break-all ๋กœ ์ง€์ •ํ•ด์คฌ์Šต๋‹ˆ..

Programming/CSS 2023.03.30

[CSS] html li tag ํƒœ๊ทธ ์  ์—†์• ๋Š” ๋ฐฉ๋ฒ•, list-style-type ์ข…๋ฅ˜

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” li ํƒœ๊ทธ์— ์žˆ๋Š” ์ ์„ ์—†์• ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. How to do ์ ์šฉ๋œ ์Šคํƒ€์ผ ์ค‘ list-style-type์„ none์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. list-style-type: none; list-style-type list-style-type์˜ ์ข…๋ฅ˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์œผ๋‹ˆ ์ฐธ๊ณ  ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค. /* Partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: trad-chinese-informal; list-style-type: ..

Programming/CSS 2023.02.22
๋ฐ˜์‘ํ˜•