[CSS] em, ex, small, smaller 기준

1. em과 ex의 사이즈 계산 기준

• em:
  • em은 요소의 폰트 사이즈를 기준으로 상대적인 크기를 나타냅니다. 예를 들어, 부모 요소의 폰트 사이즈가 16px일 때, 자식 요소에서 1em은 16px, 2em은 32px이 됩니다.
  • em은 상속됩니다. 즉, 부모 요소의 폰트 사이즈를 기준으로 자식 요소에서 em의 크기가 결정됩니다.
• ex:
  • ex는 소문자 x의 높이를 기준으로 한 상대적인 크기입니다. 폰트의 x-height는 폰트에 따라 다르며, 일반적으로 폰트의 크기의 약 절반 정도가 됩니다. 하지만 폰트에 따라 다를 수 있기 때문에 폰트마다 ex의 실제 크기가 다를 수 있습니다.

2. em 또는 ex의 기준이 되는 사이즈 변경 방법

• CSS를 사용한 변경:
  • em과 ex의 기준은 폰트 사이즈에 따라 달라지므로, 폰트 사이즈를 변경하면 em과 ex의 기준도 변경됩니다.
  • 예시:

body {
    font-size: 16px; /* 기준 폰트 사이즈 설정 */
}
h1 {
    font-size: 2em; /* 부모 요소의 폰트 사이즈의 두 배 */
}
p {
    font-size: 1.5em; /* 부모 요소의 폰트 사이즈의 1.5배 */
}

3. small, smaller, large, larger의 사이즈

• small: 부모 요소의 폰트 사이즈보다 작습니다. 일반적으로 약 75% 크기입니다.
• smaller: 부모 요소의 폰트 사이즈보다 더 작습니다. 일반적으로 한 단계 작은 폰트 사이즈로 설정됩니다.
• large: 부모 요소의 폰트 사이즈보다 큽니다. 일반적으로 약 125% 크기입니다.
• larger: 부모 요소의 폰트 사이즈보다 더 큽니다. 일반적으로 한 단계 큰 폰트 사이즈로 설정됩니다.

4. PC와 모바일 디바이스 간의 em, ex, small 등 사이즈 차이

• em과 ex:
  • em과 ex는 상대적인 단위이기 때문에 PC와 모바일 디바이스에서 동일한 폰트 사이즈 설정을 기준으로 동일한 상대 크기로 표시됩니다.
  • 다만, 기본 폰트 사이즈 설정이 다를 수 있습니다. 예를 들어, 모바일 디바이스에서는 가독성을 위해 기본 폰트 사이즈가 조금 더 크게 설정될 수 있습니다.
• small, smaller, large, larger:
  • 이들 역시 상대적인 단위이므로, 부모 요소의 폰트 사이즈를 기준으로 크기가 결정됩니다.
  • 디바이스 별로 CSS 미디어 쿼리를 사용하여 폰트 사이즈를 조정할 수 있습니다. 예를 들어, 모바일 디바이스에서는 기본 폰트 사이즈를 더 크게 설정하여 가독성을 높일 수 있습니다.

예제: 미디어 쿼리를 사용한 디바이스별 폰트 사이즈 조정

body {
    font-size: 16px; /* 기본 폰트 사이즈 */
}

h1 {
    font-size: 2em; /* 부모 요소의 폰트 사이즈의 두 배 */
}

p {
    font-size: 1em; /* 부모 요소의 폰트 사이즈와 동일 */
}

/* 모바일 디바이스에서 폰트 사이즈 조정 */
@media (max-width: 600px) {
    body {
        font-size: 18px; /* 모바일 디바이스에서 기본 폰트 사이즈를 더 크게 설정 */
    }
    
    h1 {
        font-size: 2em; /* 모바일 디바이스에서 부모 요소의 폰트 사이즈의 두 배 */
    }
    
    p {
        font-size: 1em; /* 모바일 디바이스에서 부모 요소의 폰트 사이즈와 동일 */
    }
}

 

위 예제에서는 기본 폰트 사이즈를 16px로 설정하고, 모바일 디바이스에서는 기본 폰트 사이즈를 18px로 설정하여 가독성을 높였습니다. em 단위는 부모 요소의 폰트 사이즈에 상대적으로 설정되므로, 모바일 디바이스에서도 비율이 유지됩니다.

 

by ChatGPT @ 2024.07.23