[CSS 개념잡기] CSS의 단위와 값

 

 

3. CSS 단위와 값

 

1) 길이 및 백분율, 퍼센트

프로퍼티마다 허용하는 값의 종류가 다르다.

 

✔ 절대길이 - px

화면에서의 전통적인 하나의 점, 가장 작은 요소(pixel)

• 많은 사용자가 웹 브라우저의 기본 글꼴 크기를 늘려 읽기 쉽도록 설정함
• 절대 길이는 사용자 설정을 따르지 않으므로 접근성 문제를 야기할 수 있음
• font-size를 지정할 때 em, rem 등 상대 길이를 사용해서 해결

 

 

✔ 상대길이 - em, rem

1. em
   • 1em = 부모의 font-size
   • 부모의 크기를 기준으로 함
   • %랑 기능은 같으나 더 직관적임
2. rem
   • 1rem = root의 font-size
   • 최상단의 font-size를 기준으로 사이즈를 정함
   • em보다 rem을 사용하는게 더 직관적임

 

 

✔ 상대길이 - vw, vh

viewport에 대한 백분율 길이

1. vw
   • viewport의 width를 기준으로 함
   • 100vw: viewport 너비 전체를 차지함
2. vh
   • viewport의 height를 기준으로 함
   • 100vh: viewport 높이 전체를 차지함

 

 

✔ 상대길이 - vmin, vmax

• 세로모드와 가로모드일 때 다름
• vw, vh 중 큰 것이 기준

 

 

✔ 퍼센트

부모 객체와 상대적 크기를 표현한다.

 

 

 

✔ 함수 표기법 - calc(), min(), max()

1. calc()
   • 사칙연산을 적용할 수 있음
   • 연산자 좌우에는 반드시 공백이 있어야함 
   • .container { width: calc(100% - 50px); height: 100px; }
2. min()
   • 괄호 안의 두 값 중, 작은 값을 선택하여 보여줌

     .container {
     width: min(100%, 50px);
     }

3. max()
   • 괄호 안의 두 값 중, 큰 값을 선택하여 보여줌