확장 가능한 텍스트 크기의 경우 글꼴 크기는 em으로 표시됩니다. 기본적으로 하나의 em은 16px 또는 12pt와 같습니다. 그 값은 상위 요소의 글꼴 크기에 상대적입니다.
구문
CSS font-size 속성의 구문은 다음과 같습니다 -
Selector { font-size: /*value*/ }
예시
다음 예는 CSS font-size 속성을 ems −
에서 설정하는 방법을 보여줍니다.<!DOCTYPE html> <html> <head> <style> div { width: 40%; border: 2px solid yellow; padding: 20px; font-size: 1em; } span { font-size: 2em; background-color: chartreuse; } </style> </head> <body> <div> <p>This is a demo paragraph<span> displaying font sizes</span> set with em in CSS.</p> </div> </body> </html>
출력
이것은 다음 출력을 제공합니다 -
예시
<!DOCTYPE html> <html> <head> <style> table { width: 40%; border: 2px ridge red; font-size: 0.8em; } span { font-size: 1.5em; background-color: silver; } </style> </head> <body> <h2>Class Info</h2> <table> <tr> <th>Number of Students</th> </tr> <tr> <td>Class A</td> <td><span>50 Students</span></td> </tr> <tr> <td>Class B</td> <td><span>40 Students</span></td> </tr> </table> </body> </html>
출력
이것은 다음 출력을 제공합니다 -