CSS - 단위와 값

 

 

숫자, 길이, 백분율

   - normal과 같은 기본 단위가 존재합니다.

   - 절대길이와 상대길이가 존재합니다.

      > 절대길이는 모니터에서 보이는 고정값을 길이로 가지는 반면,

         상대길이는 기준에 따라 정해지며, 기준이 바뀌면 길이도 바뀌게 됩니다.

 

   1. 절대길이 - px

      - 픽셀(px)은 화면에서 보여주는 하나의 장치 픽셀(점)을 의미했지만,

         현재는 1/96 in(인치) 을 맞출 수 있도록 하는 장치 픽셀을 의미합니다.

 

      - 절대길이는 사용자 설정을 따르지 않게 되므로 접근성 문제를 유발할 수 있습니다.

 

 

   2. 상대길이 - em, rem

      -  em은 상대적인 단위로, 부모요소의 폰트 사이즈에 비례하여 결정됩니다.

      -  rem은 root + em으로 Root의 폰트 사이즈에 의해 결정되는 방식입니다.

      - 기본적으로 16px을 기준으로 상대적으로 변합니다.

      - 사용자 설정에 따라 크기가 변하므로 절대 길이에 의한 접근성 문제를 해결할 수 있습니다.

 

 

   3. 상대길이 - vw, vh

      - vw와 vh 는 viewport + width / height 로, 실행중인 스크린 크기에 따라 결정됩니다.

      - 백분율로 표시되며, 100vw = 현재 스크린의 100% 길이 로 볼 수 있습니다.

      - 열려있는 화면 전체의 상대길이를 나타내기 때문에, 스크롤바를 포함한 길이를 반환합니다.

      - width에 vh를, height에 vw를 사용할 수도 있습니다.

 

 

   4. 상대길이 - vmin, vmax

      - 현재 스크린, 즉 viewport의 길이를 비교하여 더 길거나 짧은쪽을 선택합니다.

      - 더 긴쪽을 기준으로 하려면 vmax, 더 짧은쪽을 기준으로 하려면 vmin을 사용합니다.

 

 

   5. 퍼센트

      - %는 부모요소의 길이를 100%로 잡고 나타낸 상대적인 길이입니다.

      - vh / vw 와는 달리, 스크롤바를 포함하지 않으며, 부모요소의 길이를 지정해주어야 합니다.

 

 

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

      - 가변적인 길이와 고정길이의 계산이 필요할 때 사용합니다.

      - width : calc( 100% - 400px ); 와 같이 calc( 수식 ) 의 형식으로 작성합니다.

      - min()과 max() 는 내부의 값 중 작은값 / 큰 값을 반환합니다.