Jeden Tag, aufrichtig und lustig.

css 15. 길이 단위 본문

CSS

css 15. 길이 단위

a-nanas 2022. 10. 8. 00:42

길이 단위는 CSS 작업을 할 때 중요한 요소 중 하나이다.

유지보수와 연관되어 있기 때문이다.

 

CSS에서 사용할 수 있는 단위는

절대 길이와 상대 길이로 분류 될 수 있다.

  • 절대 길이 단위 : cm, mm, px 등
  • 상대 길이 단위 : em, rem, vw, vh, % 등

 

절대 길이 단위 ( px 등 )

-> 절대적인 길이 그대로를 화면에 구현하고,

    변동되는 값에 부여하는 경우 유지보수가 어렵다.

 

참고) 대부분 폰트 크기를 지정안했을 때 폰트크기의 기본 값은 16px이다

 

상대 길이 단위 ( em, rem, vw, vh, % 등 )

-> 가변적인 길이 단위이며 상대적으로 유지보수가 쉽다.

 

1. em

부모 요소의 폰트 크기가 기준이 된다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div { font-size: 40px;  }
        span  { font-size: 0.5em; }
        p    { font-size: 1.4em; }
    </style>
</head>
<body>
 <div>
     <!-- 부모 div 폰트 크기 (40px) * 0.5 -->
    <span> hello1 : 20px
        <!-- 부모 span의 폰트 크기 (20px) * 0.5 -->
        <span> hello2 : 10px </span>
    </span>
    <!-- 부모 div 폰트 크기 (40px) * 1.4 -->
    <p> hello3 : 56px </p>
 </div>
</body>
</html>

구현 화면

웹 접근성 측면

em단위는 웹접근성을 높이는 단위다.

왜냐하면, em단위로 설정 한 내용은 chrome 브라우저의 경우

설정을 통해 글자 크기가 확대되었을 때 글자가 커지는 반면

절대단위로 조절하면 글자 크기를 확대하여도 확대가 되지 않기 때문이다.

 

2. rem (root em)

최상위 요소인 <html>의 글자 크기를 기준으로 하는 단위이다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        html { font-size: 10px; }
        div { font-size: 1rem; }
        span  { font-size: 1.6rem; }
        p { font-size: 2em; }
    </style>
</head>
<body>
 <div>
     <!-- html 폰트 크기 (10px) * 1.6 -->
    <span> hello1 : 16px
        <!-- html 폰트 크기 (10px) * 1.6 -->
        <span> hello2 : 16px </span>
    </span>
    <!-- html 폰트 크기 (10px) * 2.0 -->
    <p> hello3 : 20px </p>
 </div>
</body>
</html>

구현 화면

3. vw(viewport-width)

화면 넓이(viewport 너비)를 기준으로 하는 백분율 단위이다.

 

4. vh(viewport-height)

화면 높이(viewport 높이)를 기준으로 하는 백분율 단위이다.

 

 

-> CSS 작업 후 폰트 크기를 수정해야 하는일이 있을때

전체 요소들을 수정하지 않고도 html요소나 부모요소만 수정하여 

쉽게 유지보수 할 수 있도록 상대길이 단위를 사용하는 것이 좋다.

 

출처

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units

 

CSS 값 과 단위 - Web 개발 학습하기 | MDN

CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위

developer.mozilla.org

 

저작자표시

'CSS' 카테고리의 다른 글

css 14. IR 기술  (2) 2022.10.03
css 13. position / display  (0) 2022.07.20
css 12. position  (0) 2022.07.19
css 11. margin  (0) 2022.07.19
css 10. layout  (0) 2022.07.02
'CSS' Related Articles more