๐Ÿฃ ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ผ์ง€ - ๋„ค์ด๋ฒ„ ์ด์Šคํฌ์ธ  ์นดํ”ผ์บฃ # 3

๐Ÿ“˜ ์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ


๋„ค์ด๋ฒ„ ์ด์Šคํฌ์ธ  ์˜ค๋ฅธ์ชฝ ์˜์—ญ

๊ธฐ์–ตํ•ด์•ผ ํ•  ๊ฒƒ

  • rgba ์ปฌ๋Ÿฌ ์†Œ์ˆซ์  ํ‘œ๊ธฐ

    • 0.04 = .04 ๋กœ ํ‘œ๊ธฐ ๊ฐ€๋Šฅ
  • border-radius: inherit;

    • ๋ถ€๋ชจ์˜ ์š”์†Œ์— ์žˆ๋Š” ๊ฒƒ์„ border๊ฐ’์œผ๋กœ ๋ฐ›๊ฒ ๋‹ค๋Š” ๊ฒƒ
  • ์›ํ•˜๋Š” ์ง€์  ํ…Œ๋‘๋ฆฌ ๋‘ฅ๊ธ€๊ฒŒ ๋งŒ๋“ค๊ธฐ

    • ์˜ค๋ฅธ์ชฝ ํ•˜๋‹จ : border-bottom-right-radius: 4px;
    • ์™ผ์ชฝ ์ƒ๋‹จ
      • ์ด๋ฏธ์ง€ ์ „์ฒด์— border-radius๊ฐ€ ์ด๋ฏธ ์ ์šฉ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์—,overflow: hidden; ์ ์šฉ
  • ๋ง์ค„์ž„ ํ‘œ์‹œ ์ฝ”๋“œ ( ์™ธ์šธ ํ•„์š”X )
    • ๊ตฌ๊ธ€๋ง : CSS๋ง์ค„์ž„ํšจ๊ณผ ๊ฒ€์ƒ‰ํ•˜๊ธฐ
    • ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ฉด ๊ตฌ๊ธ€๋ง ๋งŽ์ดํ•˜๊ฒŒ ๋˜๋‹ˆ, ๊ตฌ๊ธ€๋งํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์€ ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ•˜๊ธฐ !
	display: -webkit-box;
	width: 218px;
	max-height: 38px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;

์—ฐ์Šต ๊ฒฐ๊ณผ

์›นํฐํŠธ ์ ์šฉํ•˜๊ธฐ

๊ธฐ์–ตํ•ด์•ผ ํ•  ๊ฒƒ

  • font-family ์‚ฌ์šฉ

    • ์—ฌ๋Ÿฌ๊ฐœ์˜ ํฐํŠธ๋ฅผ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋‹ค. -> ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ์ง€์›ํ•˜๋Š” ํฐํŠธ๊ฐ€ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ !
    • sans-serif : ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ € ์ ์šฉ ๊ฐ€๋Šฅ
  • ๊ตฌ๊ธ€ ์›นํฐํŠธ

    • ์ฐธ๊ณ ์‚ฌ์ดํŠธ https://fonts.google.com/
      • ๋งํฌ ํƒœ๊ทธ / CSS ํƒœ๊ทธ ์ด์šฉ
    • ์ฃผ์˜ ์‚ฌํ•ญ
      • ํฐํŠธ ์ ์šฉํ•˜๋Š” linkํƒœ๊ทธ ๋จผ์ € ์‚ฌ์šฉ ํ›„ css์—ฐ๊ฒฐ link์‚ฌ์šฉํ•ด์•ผ ํ•จ!

โ” ๊ถ๊ธˆํ–ˆ๋˜ ๊ฒƒ


  • inherit ๋Œ€ํ•ด์„œ ?

๐Ÿ’ก ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•!


๐ŸŒฑ ๊ณต๋ถ€๋ฅผ ๋งˆ๋ฌด๋ฆฌํ•˜๋ฉฐ,


๊ฐ•์˜์—์„œ ๋งŽ์€ ๊ฐœ๋…์„ ํ•œ๊บผ๋ฒˆ์— ๋ฐฐ์šฐ๋ฉด ๋จธ๋ฆฌ์•„ํ”Œ ๊ฒƒ ๊ฐ™๋‹คํ•˜์…จ์ง€๋งŒ,
์ข…์ข… ์ƒˆ๋กœ์šด ๊ฐœ๋…์ด ๋‚˜์™€์ฃผ๋ฉด ํ™˜๊ธฐ์šฉ์œผ๋กœ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ