[CSS 속성][font][font-size]

폰트의 크기와 관련된 CSS 속성 - font-size

-요약설명

font-size: 웹 사이트 내의 폰트의 크기(사이즈)를 변경해줍니다.

-심화설명

· font-size 속성

CSS를 이용하여 웹 사이트 내의 폰트 사이즈를 조절하는 속성입니다. font-size의 크기 단위 값으로는 3가지 속성으로 이루어져 있습니다.

font-size의 경우 직접적으로 length값을 줘서 px, em, rem등으로 조절할 수 있으나 절대값으로도 지정할 수 있습니다.

font-size: xx-small	font-size: x-small	font-size: small	font-size: medium	font-size: large
font-size: x-large	font-size: xx-large	font-size: larger	font-size: smaller	font-size: 70%

해당 표는 font-size의 절대값으로 앞서 살펴본 h1~h6처럼 자동적으로 사이즈가 들어갑니다.

폰트의 크기는 기본 폰트(medium)크기에 따라 정해지며 font size="1"부터 font size="7"와 같이 표기됩니다.

larger나 smaller의 경우, 키워드에 따라 부모 엘리먼트의 폰트 크기에 따라 일정한 비율로 커지거나 작아집니다.

또한 %퍼센트로도 값을 줄수있는데 이 부분은 부모 엘리먼트의 폰크 크기의 비율입니다.

-px 값

고정된 값으로 사용자가 글꼴의 크기를 조정할 수 없습니다. 때문에 사용자가 임의로 브라우저에서 크기를 키워도 폰트의 크기가 고정적이게 됩니다. (접근성의 저하) HTML5로 넘어오면서 px는 가급적 사용하지 않는 것을 권장하고 있습니다.

하지만 브라우저와 상관없이 독립적으로 폰트 크기를 사용하고 싶다면 px을 사용하면 됩니다.

-em 값

부모 태그의 영향을 받는다는 장점(?)이자 단점이 있습니다. 때문에 전체 페이지에서 폰트 크기를 정의하지 않을 시 브라우저 기본크기인 16px로 지정됩니다. 해당 특징의 이름을 "합성"이라고 정의하고 있습니다.

-rem 값

상대적인 값으로 사용가작 글꼴의 크기를 변경할 시 변경됩니다. 기존의 em의 부족한 점을 보완하여 나온 값이기 때문에 "합성"에 대한 문제를 해결하였습니다. rem을 쓰는것을 권장하고 있습니다. rem값은 부모 엘리먼트가 아니라 최상위 html엘리먼트에 상대적입니다. rem 은 부모 크기에 의해 폰트크기가 망가지지 않게 "합성" 문제를 해결 하였습니다.

표기법

font-size: 16px; font-size: 1em; font-size: 1rem;

· font

위 의 font 속성을 모두 포함하여 한번에 써줄 수 있는 약축형으로 사용할 수도 있습니다.

font: italic bold 20px serif;

※특징

em요소 / 이름 : (합성)

1em = 16px, 2em = 32px,이 기본 값(default)이고 body에서 font-size를 20px으로 설정할 경우 1em = 20px, 2em = 40px이 됩니다.

body {
font-size: 20px; // font-size 1em = 20px 의 브라우저 기본 설정

}

p {

font-size: 2em; // 2em = 20px

}

rem요소

html {

font-size: 62.5%; // font-size 1rem = 10px

}

p {

font-size: 1.6rem;

}

또한, px, em, rem은 폰트에서만 사용할 뿐만 아니라, 그리드 시스템이나 ui스타일 레이아웃 등 사이즈 크기 조정을 가능하게 해줍니다.

medium

★추가

vw, vh

저작자표시 비영리 변경금지 (새창열림)