[CSS] 글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이) > 온라인강의

본문 바로가기
 
 
 
오늘 440
어제 2,203
최대 2,526
전체 3,261,755

최근 방문자

994
927
1806
2341
2203
440
25 26 27 28 29 30
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 3가지 만족을 드리는 비즈명함 / 즉석명함 / 급행서비스 / 서울 전지역 수도권일부 3시간배송

select * from g5_menu where me_use = '1' and me_link like '%lecture%'
온라인강좌 홈 > 온라인강좌 > 온라인강좌

HTML | [CSS] 글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)

페이지 정보

작성일2016-08-10 16:38 조회1,819회 댓글0건

본문

css에서는 글꼴 크기를 지정할 때 font-size 속성을 사용합니다.

사용 예
p {
    font-size: 1em;
}

속성값은 다음과 같습니다.

절대값 : 고정된 크기. 장치에 따라 크기를 조절할 수 없음.
px, pt, cm 등의 단위로 지정하거나
xx-small, x-small, small, medium, large, x-large, xx-large 중에서 선택
medium은 기본값으로 12pt=19px=13m=100%
*구 IE 버전의 경우, small이 기본값이라 doctype을 선언해주어야 medium이 기본값으로 나옵니다
DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)


상대값 : 상대적인 크기. 장치에 따라 크기 조절이 가능함.
em, %, smaller, larger
* 웹 문서의 경우 기본 글꼴은 %(예: body 의 글꼴), 그 외 css 작성은 em으로 사용할 것을 권장합니다.
상속 여부 : YES


설명▶
pixel (px) : 고정된 크기 단위. (주로 컴퓨터 화면에서 사용됨)
        1px은 컴퓨터 화면에서 점 1개와 같음.
        크기가 조정이 안 된다는 단점이 있음.

point(pt) : 고정된 크기 단위. (주로 인쇄 매체에서 사용됨)
       크기 조정이 안 됨

em: 웹 문서에서 사용되는 단위로, 컴퓨터 외 모바일 등 다른 장치에서도
크기 조정이 가능함. 1em은 12pt, 16px 100%와 같음.
(em은 대문자 M의 크기를 뜻한다고 함)

percent(%) :  em과 비슷하게 다른 장치에 상대적으로 크기 조절이 가능함

xx-small = 9px = 0.5625em
x-small =  10px = 0.625em
small = 13px = 0.812em
medium = 16px =12pt = 1em
large = 18px = 1.125em
x-large =24px = 1.5em
xx-large = 32px = 2em
 
smaller : 상위 요소에 비해 상대적으로 더 작은 크기
 
larger : 상위 요소에 비해 상대적으로 더 큰 크기.



▶ em 과 %

둘 다 상대적인 값에, 장치에 따라 크기 조절이 가능한데요

일부 브라우저에서 사용자가 텍스트 크기 설정을 바꿀 경우 크기 차이가 생깁니다.

IE 상단에서 보기>텍스트 크기>에서
보다 크게를 설정하면 em은 원래의 크기보다 너무 크게 표시되고
보다 작게를 설정하면 em은 원래의 크기보다 너무 작게 표시됩니다.

그래서 css를 작성할 대 기본 글꼴은 %로 설정하고(예 :  body{ font-size: 100%})
그 외 css는 em으로 작성하는 것이 좋다고 하네요.

(브라우저마다 약간씩 차이가 있으므로, 다른 브라우저가 궁금하신 부분은 아래 링크 참조해 주세요)
http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm



▶  px 픽셀을 em 으로 환산하는 방법 : 1/16 x 픽셀값

예)
16px = 16/1 x 16 = 1em
15px = 16/1 x 15 = 0.9375 em


관련문서
http://aboooks.tistory.com/m/post/142
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


목록

Total 1,945건 1 페이지
온라인강의 목록
번호 제목
1945
Search SEO 최적화 메타 구성하기 (update.2017-03-29)새글  Hit.15
1944
JSP alert 창 띄우기 (write.2017-03-29)  Hit.16
1943
JSP MSSQL 접속설정하기 (write.2017-03-29)  Hit.20
1942
그누보드 [G5] 전체쪽지 보내기 (write.2017-03-29)  Hit.16
1941
1940
Adobe Adobe CS3~CC 프로그램 완전삭제 (write.2017-03-21)  Hit.122
1939
1938
JSP utf-8 한글깨짐 (write.2017-03-20)  Hit.130
1937
1936
1935
1934
1933
그누보드 [G5] 게시물 순서 바꾸기 (write.2017-03-16)  Hit.180
1932
전자결제 [PayPal] PHP 결제연동 (write.2017-03-15)  Hit.181
1931
전자결제 [PayPal] ASP 결제 연동 (write.2017-03-15)  Hit.177
1930
1929
1928
JSP Service Temporary Unavailable! (write.2017-03-13)  Hit.194
1927
그누보드 [G5] [최신글] 한줄소식 (write.2016-02-19)인기글첨부파일  Hit.1711
1926
1925
1924
1923
1922
일반 FireFox 플러그인 (write.2015-02-28)인기글  Hit.2074
1921
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호:119-05-36414 (08394) 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
전화: 070-7600-3500 팩스:02-865-3528 개인정보관리:정창용 mail@happyjung.com 에스크로확인
개인정보취급방침
COPYRIGHT 2001~2017 해피정닷컴. All rights reserved. 부가통신사업신고:서울체신청-1217 통신판매신고:2014-서울구로-0074
 
모바일 버전으로 보기