테스트 사이트 - 개발 중인 베타 버전입니다

Em로 글꼴 크기 설정 Set Font Size With Em

Em로 글꼴 크기 설정 Set Font Size With Em

 

사용자가 브라우저 메뉴에서 텍스트 크기를 조정할 수 있도록 많은 개발자가 픽셀 대신에 엠을 사용합니다.

 

em 크기 단위는 W3C에서 권장합니다.

 

1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16 픽셀입니다. 따라서 1em의 기본 크기는 16px입니다.

 

크기는 다음 수식을 사용하여 픽셀에서 em까지 계산할 수 있습니다. pixels / 16 = em

 

h1 {

    font-size: 2.5em; /* 40px/16=2.5em */

}

 

h2 {

    font-size: 1.875em; /* 30px/16=1.875em */

}

 

p {

    font-size: 0.875em; /* 14px/16=0.875em */

}

 

 

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

    font-size: 2.5em; /* 40px/16=2.5em */

}

 

h2 {

    font-size: 1.875em; /* 30px/16=1.875em */

 }

 

p {

    font-size: 0.875em; /* 14px/16=0.875em */

}

</style>

</head>

<body>

 

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is a paragraph.</p>

<p>Specifying the font-size in em allows all major browsers to resize the text.

Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

 

</body>

</html>



댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3168
3167
3166
3165
3164
3163
3162
3161
3160
3159
3158
3157
3156
3155
3154
3153
3152
3151
3150
3149
3148
3147
3146
3145
3144
3143
3142
3136
3135
3134