๋ชฉ๋ก2022/02 (81)

whatisthis?

CSS - Typography

Typography ์„ค์ • ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ - ํ™œ์ž์˜ ์„œ์ฒด๋‚˜ ๊ธ€์ž ๋ฐฐ์น˜ ๋“ฑ์˜ ๊ตฌ์„ฑ ๋ฐ ํ‘œํ˜„. = ํ…์ŠคํŠธ๋ฅผ ์˜ˆ์˜๊ฒŒ ๋””์ž์ธ. ์ •๋ณด(information)์˜ ๊ฐ€๋…์„ฑ์„ ์œ„ํ•ด์„œ. ๐Ÿ“Œ font-size = ๊ธ€์ž ํฌ๊ธฐ px ์ ˆ๋Œ€ ๋‹จ์œ„ em ์ƒ๋Œ€ ๋‹จ์œ„ ์‹ค์ œ๋กœ ์ ์šฉ๋œ ํฐํŠธ ์‚ฌ์ด์ฆˆ (๋ถ€๋ชจ์˜ font-size) ์˜ N๋ฐฐ rem html ํƒœ๊ทธ ๊ธฐ์ค€ N๋ฐฐ ๋ณดํ†ต์€ px์„ ๋งŽ์ด ์‚ฌ์šฉํ•จ. ๐Ÿ“Œ line-height = ์ค„ ๊ฐ„๊ฒฉ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ px, em, rem ๋‹จ์œ„ ์‚ฌ์šฉ. ์—ฌ๊ธฐ์„œ๋Š” em์„ ๋งŽ์ด ์‚ฌ์šฉํ•จ. (ํ•ด๋‹น ํฐํŠธ์‚ฌ์ด์ฆˆ์˜ N๋ฐฐ๋งŒํผ) (๊ทธ๋ƒฅ 1.5๋ผ๊ณ  ์ ๋Š”๊ฒƒ์ด ๊ด€๋ก€. 1.5em ์ด๋ผ๊ณ  ์“ฐ์ง€ X) line-height๊ฐ€ ์–ผ๋งˆ๊ฐ€ ๋˜๋“ ๊ฐ„์— font-size์— ํ•ด๋‹นํ•˜๋Š” ๋ถ€๋ถ„์€ ์ • ์ค‘์•™์— ์œ„์น˜ํ•˜๊ฒŒ ๋œ๋‹ค! ๐Ÿ“Œ letter-spacing = ์ž๊ฐ„ ๊ฐ„๊ฒฉ p..

WEB STUDY/HTML,CSS 2022. 2. 26. 14:18