ํ๊ฐ(Line Height)์ด๋?
ํ๊ฐ์ ํ ์คํธ ์ค๊ณผ ์ค ์ฌ์ด์ ์์ง ๊ฐ๊ฒฉ์ ๋ปํ๋ฉฐ, CSS์ line-height ์์ฑ์ผ๋ก ์กฐ์ ํฉ๋๋ค. ํ๊ฐ์ด ๋๋ฌด ์ข์ผ๋ฉด ์ค์ด ๊ฒน์ณ ๋ณด์ด๊ฑฐ๋ ๋ต๋ตํ ๋๋์ ์ฃผ๊ณ , ๋๋ฌด ๋์ผ๋ฉด ๋ฌธ๋จ์ด ํฉ์ด์ ธ ๋ณด์ฌ ์์ ์ด ์ด์ด์ง์ง ์์ต๋๋ค. ์ ์ ํ ํ๊ฐ์ ๊ฐ๋ ์ฑ๋ฟ ์๋๋ผ ๋์์ธ์ ์์ฑ๋์๋ ํฐ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
์ผ๋ฐ์ ์ผ๋ก ๋ผํด ๋ฌธ์(์์ด ๋ฑ)๋ ํฐํธ ํฌ๊ธฐ์ 1.5๋ฐฐ, ํ๊ธ์ 1.6๋ฐฐ, ์ผ๋ณธ์ดยท์ค๊ตญ์ด ๋ฑ ํ์๊ฐ ํฌํจ๋ ๋ฌธ์๋ 1.7๋ฐฐ ์ ๋๊ฐ ๋ณธ๋ฌธ ๊ธฐ์ค์ผ๋ก ์ ๋นํฉ๋๋ค. ํ๊ธ๊ณผ ํ์๋ ์ด์ฑยท์ค์ฑยท์ข ์ฑ ๋๋ ๋ถ์๊ฐ ์กฐํฉ๋ ์ฌ๊ฐํ ํํ๋ผ์ ๋ผํด ์ํ๋ฒณ๋ณด๋ค ์๊ฐ์ ๋ฐ๋๊ฐ ๋์ ๋ ๋์ ํ๊ฐ์ด ํ์ํฉ๋๋ค. ์ ๋ชฉ์ฒ๋ผ ํฐ ๊ธ์๋ ์๋์ ์ผ๋ก ์ข์ ํ๊ฐ(1.2~1.35๋ฐฐ)์ด ์์ ์ ์ผ๋ก ๋ณด์ ๋๋ค.
์ด ๊ณ์ฐ๊ธฐ๋ ํฐํธ ํฌ๊ธฐ, ์ธ์ด, ์ฉ๋(๋ณธ๋ฌธ/์ ๋ชฉ)๋ฅผ ์ ํํ๋ฉด ๊ถ์ฅ ํ๊ฐ ๊ฐ์ px๊ณผ CSS unitless ๊ฐ ๋ ๊ฐ์ง๋ก ๋ณด์ฌ์ค๋๋ค. ๊ณ์ฐ๋ line-height ๊ฐ์ ๊ทธ๋๋ก ๋ณต์ฌํด CSS์ ๋ฐ๋ก ์ ์ฉํ ์ ์์ต๋๋ค.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ
๋๋ฌด ์ข์ผ๋ฉด ์ฝ๊ธฐ ์ด๋ ต๊ณ ๋๋ฌด ๋์ผ๋ฉด ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๋๋ค. ์ ์ ํ ํ๊ฐ์ ํฐํธ ํฌ๊ธฐ์ 1.4~1.8๋ฐฐ์ ๋๋ค.
์ฌ๊ฐํ ์กฐํฉ ๊ธ์๋ผ ์๊ฐ์ ๋ฐ๋๊ฐ ๋์ ๋ผํด ๋ฌธ์๋ณด๋ค 10~15% ๋ ๋์ ํ๊ฐ์ด ํ์ํฉ๋๋ค.
๋ค, ์ ๋ชฉ์ 1.2~1.3๋ฐฐ, ๋ณธ๋ฌธ์ 1.5~1.8๋ฐฐ๊ฐ ์ผ๋ฐ์ ์ผ๋ก ์ ํฉํฉ๋๋ค.