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

컴프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2155 2155

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

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>

댓글 작성

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

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
1277	기타	이미지 최적화 (WebP/AVIF & Lazy Loading)	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2개월 전	148
1276	CSS	고급 레이아웃(Grid + Flex 혼합 활용)	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2개월 전	270
1275	CSS	CSS 애니메이션 고급 활용	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2개월 전	269
1274	CSS	픽셀 단위 고정 대신 유연한 단위를 쓰자 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3개월 전	461
1273	기타	트러블슈팅 & 품질 관리 중심	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	400
1272	CSS	SVG를 마치 CSS처럼 활용하기	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	530
1271	CSS	웹폰트 로딩 최적화 [3]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	577
1270	CSS	다크 모드(Dark Mode) 지원을 위한 CSS 전략 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	457
1269	CSS	CSS revert 키워드로 손쉽게 스타일 초기화하기 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	538
1268	CSS	알러트 모양( 삼각 판넬 안에 느낌표 ) css와 dom으로 만들기	예뜨락 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	427
1267		이미지 갤러리 (직)제작 소스	잠실삼촌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	707
1266	HTML	bootstrap4 grid-item 책갈피 표시	하얀감자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	837
1265	CSS	clamp를 사용하는 경우에 대해서 여쭈어 봅니다. [2]	7reemoon 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	767
1264		파일 입력필드 숨기고 아이콘(폰트어썸)으로 대체	Tak2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1258
1263	HTML	textContent는 MOZ의 MDN에서 XSS해킹이 않된다 그러나 다중은 않되요 그러나 해결과 해결할 일	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	790
1262	CSS	Div 를 프레임으로 잡기 tested by w3schools.com	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	994
1261	CSS	기본적인 CSS 사용 태그 [ Site on Base Default - Custom Free ]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1007
1260	HTML	마우스 클릭시 효과음 나오고 마우스에 서클 퍼지는 효과 재미 있네요..	설국열차 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1489
1259	기타	나리야빌더 사용중 페이징중에 바로 이전이나 다음 페이지가 동작이 안되는증상 해결	정후이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	828
1258	CSS	스와이퍼 페이징 커스텀 방법 어떻게 하나요...?? [3]	김성래yo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1585
1257	HTML	input의 팁	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1371
1256	CSS	css 애니메이션 눈 떨어지는 레이아웃(스킨인데 못올리게 해서 여기에다...)	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1272
1255		상업이용 가능한 디자인소스(html, css) 완성 코딩 소스입니다. [16]	샤이닝 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	3611
1254		<div>을 iframe처럼 만들기 [5]	천사의눈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	4794
1253		radio 버튼 클릭하면 input text 값 넘겨주기 [6]	취뉴비 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1552
1252	레이아웃	아무데서나 쓸수 있는 팝업창 기능 만들어보았습니다. [7]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1784
1251	웹접근성	미니 웹 음악 플레이어 LP player Music (LPM) [12]	두리삼촌v 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2058
1250	레이아웃	이전자료 DLplayer Audio 버전입니다. [19]	두리삼촌v 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1692
1249	레이아웃	웹음악플레이어 (html5 및 자바스크립트 기반) [30]	두리삼촌v 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	3215
1248	기타	(html,js,css) javascript alert메서드 자체를 변경하여, 팝업 alert 만들어보기	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1147