Original article: HTML Font Size – How to Change Text Size Using Inline CSS Style
HTML의 폰트는 웹 페이지의 모양과 전체적인 분위기에 있어서 중요한 역할을 합니다.
여러분은 폰트의 색상, 굵기, 크기 등을 고를 수 있습니다.
그리고 이 기능들은 여러분의 웹사이트와 앱을 더 나아 보이게 하고 유저에게 더 잘 받아들여지게 할 것입니다.
CSS에서 font-size 속성을 사용하여 웹 페이지에서 글자 크기를 크게 또는 작게 변경할 수 있습니다. 또한 외부 스타일, 내부 스타일, 또는 인라인 스타일 등 어떤 종류의 CSS에서도 font-size 속성을 사용할 수 있습니다.
인라인 CSS란 무엇일까요?
인라인 CSS는 HTML 요소를 스타일링하는 데 사용할 수 있는 세 가지 방법 중 하나입니다.
class나 id를 속성값으로 가진 요소를 선택하거나, 요소 자체를 선택자로 정의해서 스타일링을 적용하는 대신에, 모든 CSS 스타일들을 열린 태그에 넣는 것을 말합니다.
더불어 모든 스타일링 속성 값들은 style 속성 안에 들어가야 합니다. style 속성은 모든 HTML 태그에서 허용하는 수많은 속성 중 하나입니다.
아래 예제에서 저는 인라인 CSS를 사용하여 글자의 배경 색을 진홍색으로, 글자 색을 #f1f1f1 (연회색)으로, 그리고 글자 굵기는 bold로 변경했습니다.
<p style="background-color: crimson; color: #f1f1f1; font-weight: bold">
Hello Campers...
</p>
그나저나, 모든 것이 크게 보이는 이유는 제 브라우저가 400% 확대되어 있기 때문입니다. 저는 어떠한 추가 스타일링도 하지 않았습니다 :)
인라인 CSS를 사용하여 폰트 사이즈를 변경하는 방법
인라인 CSS에서 폰트 사이즈를 변경하기 위해서는, style 속성 값을 사용해야 합니다. font-size속성을 입력한 다음, 값을 지정합니다.
내장 값들로는 large, larger, medium, small, x-large 등이 있습니다.
아래의 코드에서, 저는 “Hello Campers…” 글자 크기를 font-size속성의 내장 값 중 하나인 x-large로 변경했습니다.
<p style="font-size: x-large">Hello Campers...</p>
또한 픽셀(px), rem 혹은 em과 같은 단위와 숫자를 함께 사용하여 font-size 속성의 값을 설정할 수도 있습니다.
숫자 값을 사용하면 원하는 폰트 크기를 자유롭게 선택할 수 있으므로 숫자 값을 사용하는 것이 좋습니다.
아래의 코드에서, 저는 인라인 CSS를 사용하여 글자 크기를 30px로 변경했습니다.
<p style="font-size: 30px">Hello Campers...</p>
결론
이 글에서 인라인 CSS를 사용하여 폰트 크기를 변경하는 방법과 font-size의 속성에 대해서 배웠습니다.
하지만 참고로 말하자면, 인라인 CSS는 스타일링에는 좋지만 여러분이 팀으로 일하고 있는 경우라면 HTML 코드를 읽기 어렵게 만들 수도 있습니다. 그래서 인라인 CSS 스타일링에 너무 의지해서는 안 됩니다. 여러분이 쓴 코드를 이해할 수 있는 사람이 오직 여러분 혼자이기를 원하지는 않을 테니까요.
또한 인라인 스타일은 내부 스타일과 외부 스타일보다 우선시 되어 코드를 덮어쓴다는 것에 주의하세요. 가독성을 위해서 HTML과 CSS 코드가 분리되는 외부 스타일이나 내부 스타일을 대신 사용해야 합니다.
font-size속성에 값을 할당할 때에는 px 대신 rem 단위를 사용하는 것이 좋습니다. rem을 사용하면 사용자가 화면을 확대하거나 축소할 때 브라우저가 글자 크기를 조정할 수 있는 데에 반해, px을 사용하면 그럴 수 없기 때문입니다.
읽어주셔서 감사합니다. 계속해서 코딩하세요.