CSS 텍스트, 폰트 관련 속성 정리

폰트 사이즈를 결정하는 font-size 속성

font-size의 단위는 rem, px, em 세 가지가 있습니다.

이 중 em 은 사용하지 않는 것이 좋습니다. 왜냐하면 em단위는 부모 태그의 영향을 받는 상대적인 크기를 나타내기 때문에 font-size 속성 값으로 적용된 숫자만 가지고 실제 크기를 파악하기가 어렵기 때문입니다.

rem은 html태그에 적용된 폰트사이즈에게 영향을 받습니다. html태그의 폰트 크기에 따라서 상대적으로 크기가 결정됩니다.

px은 모니터 상의 화소 하나의 크기에 대응하는 단위입니다. 가장 고정된 값이기 때문에 예측이 가장 쉽습니다. 다만 사용자가 글꼴의 크기를 조정할 수 없습니다.

* 예시코드

<span style="font-size: 0.8rem">0.8rem</span><br>
<span style="font-size: 1rem">1rem</span><br>
<span style="font-size: 1.2rem">1.2rem</span><br>
<span style="font-size: 10px">10px</span><br>
<span style="font-size: 15px">15px</span><br>
<span style="font-size: 20px">20px</span><br>

* 결과

폰트의 굵기를 결정하는 font-weight 속성

font-weight 속성은 폰트의 굵기를 결정합니다. 속성 값으로는 숫자 형태로는 100, 200, 300, 400, 500, 600, 700, 800, 900를 사용할 수 있고 텍스트 형태로는 bold, normal, lighter 등을 사용할 수 있습니다. 숫자 형태의 속성 값은 숫자가 커질수록 굵은 폰트 사이즈를 의미합니다. bold는 굵게, normal은 보통, lighter는 가늘게를 의미합니다.

어떤 폰트는 숫자가 커질수록 점진적으로 굵어지고 어떤 폰트는 특정 숫자가 되어서야 급격히 굵어집니다.

이유는 해당 폰트가 지원하는 굵기 사이즈 개수가 다 제각각이기 때문입니다.

* 예시 코드

<span style="font-weight: 100">100</span><br>
<span style="font-weight: 200">200</span><br>
<span style="font-weight: 300">300</span><br>
<span style="font-weight: 400">400</span><br>
<span style="font-weight: 500">500</span><br>
<span style="font-weight: 600">600</span><br>
<span style="font-weight: 700">700</span><br>
<span style="font-weight: 800">800</span><br>
<span style="font-weight: 900">900</span><br>
<span style="font-weight: bold">bold</span><br>
<span style="font-weight: normal">normal</span><br>
<span style="font-weight: lighter">lighter</span><br>

* 결과

줄 간격을 결정하는 line-height의 단위

글자 크기에 상관없이 line-height의 px값이 줄 간격이 됩니다.

단위 없음(number)

그냥 숫자만 적습니다.

이 숫자는 글자 크기의 배수가 되어 줄 간격에 적용됩니다.

(줄 간격) = (line-height값) x (font size)

글자 크기의 몇 % 인지로 줄 간격을 정합니다.

참고로 line-height의 default 값은 단위 없이 1.2입니다.

line-height의 상속

이 속성은 자손 태그들에게 상속이 됩니다.

line-height값이 number이면 자손태그들에게 상속될 때, 자손 태그들의 폰트 사이즈가 제각각이기 때문에 간격이 각자의 font-size값에 따라 다르게 적용됩니다.

하지만 line-height값이 px단위나 % 단위인 경우 자손 태그들에게 상속될 때, 부모 태그의 줄 간격과 동일하게 고정 간격으로 적용됩니다.

예를 들어 부모 요소의 글자크기가 30px, 자식요소의 글자크기가 20px일 때,

부모요소의 line-height값이 1.5이면

부모요소의 줄 간격은 45px, 자식요소의 줄간격은 30px입니다.

부모 요소의 line-height값이 150%이면

부모 요소와 자식 요소 모두 줄 간격이 45px입니다.

부모 요소의 line-height값이 45px이면

부모 요소와 자식 요소 모두 줄 간격이 45px입니다.

* 예시 코드

<p style="line-height: 1.5; font-size: 30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, itaque!<br>
	<span style="font-size:20px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum corporis veritatis dignissimos alias ab nesciunt.</span>
</p>
<p style="line-height: 150%; font-size:30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, itaque!<br>
	<span style="font-size:20px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum corporis veritatis dignissimos alias ab nesciunt.</span>
</p>
<p style="line-height: 45px; font-size:30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, itaque!<br>
	<span style="font-size:20px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum corporis veritatis dignissimos alias ab nesciunt.</span>
</p>

* 결과

좌우 정렬을 결정하는 text-align 속성 정리

텍스트 좌우 정렬을 결정하기 위해서는 text-align 속성을 사용합니다.

속성 값으로 각각 왼쪽 정렬은 left, 오른쪽 정렬은 right, 가운데 정렬은 center를 쓰면 됩니다.

문단 내에서 각 줄마다 왼쪽 여백과 오른쪽 여백이 모두 없고 속성값으로 justify를 사용하면 됩니다.

* 예시 코드

<h2>text-align</h2>

<p style="text-align:left">text-align:left</p>
<p style="text-align:right">text-align:right</p>
<p style="text-align:center">text-align:center</p>

<h3>text-align:justify</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea qui eveniet laborum minima soluta reprehenderit, cumque sequi illum eaque, praesentium modi optio delectus maxime, ad! Minima quas, magnam quam, rem delectus repellendus aspernatur maiores esse impedit suscipit, officia commodi nihil quae eius optio fugiat architecto iste incidunt accusantium possimus dolorem.</p>
<p style="text-align:justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea qui eveniet laborum minima soluta reprehenderit, cumque sequi illum eaque, praesentium modi optio delectus maxime, ad! Minima quas, magnam quam, rem delectus repellendus aspernatur maiores esse impedit suscipit, officia commodi nihil quae eius optio fugiat architecto iste incidunt accusantium possimus dolorem.</p>

* 결과