34

[CSS] em / ex / px / pt / % 의 차이

CSS의 표준권고안에 따르면 크기 단위는 절대단위와 상대단위로 구분됩니다.

• 절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적
• 상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리

• em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.
• ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.
• px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐.
• % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐.
• pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위

대부분의 브라우저는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 입니다. 예를 들어, 본문 전체가 12pt으로 설정되어 있는 상태에서 본문내의 테이블에서는 좀더 작은 9pt를 사용하고자 한다면, em단위로 본문의 폰트사이즈는 1em이 되고 테이블내 폰트사이즈는 0.75em이 되는 것입니다.

[참고] http://eara.tistory.com/149

px = pt / 0.75

pt = px * 0.75

em = pt / 12

% = pt * 100 / 12

위의 공식으로 이해해보자.

span태그와 p태그의 차이

span 태그는 div 태그와 비교하는게 좀 더 의미가 있을 것 같아용

span 태그는 기본이 inline level 로, div 태그 처럼 그 자체로는 아무 역할을 하지 않고

content 의 영역을 설정하는데 쓰입니다.

div 태그는 block level 로 위와 같은 역할을 하게 되는 것이구용

p 태그는 문단을 설정하는데 쓰이게 됩니다.