반응형
|
스타일 시트 CSS px(pixel) -> em 단위 변환 표 |
|
환경: Eclipse Mars, CSS5 |
보통 HTML 구현할 때 쓰는 단위는 px 픽셀입니다. 간혹 % 와 유사한 표현인 em 을 사용하기도 합니다. em 은 %(persent) 를 좀더 간단하게 표현할 수 있도록 만든 단위 입니다. 그러니까 em 값 0 ~ 1 사이의 실수 값이 % 의 0% ~ 100% 사이 값입니다. 0.3125em 이 31.25% 를 뜻합니다. 이런 em 을 px 로 변환할 때 참고할 수 있는 표를 소개합니다.
▼ em 의 1 은 100% 를 뜻합니다. 그럼 1em 은 몇 px 일까요? 보통 브라우저에 표현되는 기본 폰트의 크기는 16px 입니다. 사람들은 기본 글자의 크기를 1em 으로 정했습니다. 1em 이 16px 입니다. 이것을 기준으로 해서 줄이거나 늘이는 것입니다. 만약 설정에서 기본 폰트의 크기를 12px 로 변경한다면 em 값도 전부 바뀌겠죠.
▼ 샘플을 통해서 알아 보겠습니다. <h1> 에서 <h6> 의 태그를 사용해서 화면을 만들었습니다. 왜냐하면 <h1> 이 2em 이기 때문입니다. 그러니까 <hn> 태그도 기본 폰트 크기에 따라서 달라질 수 있다는 의미입니다. 만약 내부적으로 설정되어 있는 <hn> 태그를 CSS 로 풀어 쓴다면 다음과 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> hn 태그 </title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h4 {
display: block;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<h1><h1>제목 레벨 1</h1>
<h2><h2>제목 레벨 2 </h2>
<h3><h3>제목 레벨 3 </h3>
<h4><h4>제목 레벨 4 </h4>
<h5><h5>제목 레벨 5 </h5>
<h6><h6>제목 레벨 6 </h6>
</body>
</html>
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법 (0) | 2018.06.27 |
|---|---|
| 스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기 (1) | 2018.06.15 |
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
| 스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |
| 스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기 (0) | 2018.04.12 |
| 스타일 시트 CSS 글꼴을 적용할 수 있는 font-family 속성 이용하는 방법 (0) | 2018.03.23 |
| 스타일 시트 CSS 태그 요소를 보이게 하거나 숨기는 visibility 속성 알아보기 (0) | 2018.03.03 |
| 스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법 (1) | 2018.01.31 |
