[CSS] 반응형에서 중요한 CSS의 상대 단위

랜드마크 캐러셀 height의 단위를 vh로 지정했더니, next 버튼의 top: 50%가 뷰포트 중간으로 오는 현상 발생

 

firebase으로 배포 이후, 뽑아져나온 url로 모바일과 PC(크롬/엣지)에서 디버깅을 위한 테스트를 해보았다. 메인에서만 16건의 이슈를 발견했고 5시간 동안 8건을 디버깅했다. :(

 

 

메인 이슈는 T/C로 관리

 

기업의 홈페이지를 리버스 엔지니어링해보며 무엇보다도 CSS에 관해 배운점이 참 많았다. 가장 유용하리라 생각하는 지식은 반응형에 최적화된 CSS의 단위이다. 반응형의 CSS 단위는 50px, 500px, 1000px 이렇게 정해진 값이 아니라 다른 개체와의 상대적인 퍼센트 값으로 사용해야하는데, 이것을 고려한다하더라도 모든 케이스에 대응하는 것이 쉽지 않다. 또 한번 배움이 있었고 현업에 계신 분들에게 존경심이 들었다. 자주 등장하거나 유용하게 썼던 단위는 아래의 4가지이다.

 

 

• 1) vh & vw

뷰포트 기준으로 정할 수 있는 높이와 너비의 단위이다. 1vh는 뷰포트 높이값의 1/100 (ex. 브라우저의 높이가 1080이라면 1vh는 10.8px) 1vw는 뷰포트 너비값의 1/100이다. (ex 브라우저의 너비가 1920이라면 1vh는 19.2px)

 

• 2) em

부모 엘리먼트의 폰트 사이즈가 곧 자식 엘리먼트의 1em이 된다. 부모 엘리먼트에서 폰트 사이즈를 14px로 지정하고, 자식 엘리먼트에서 폰트 사이즈를 2em으로 지정한다면 자식 엘리먼트의 폰트 사이즈는 28px

 

• 3) rem

최상위 엘리먼트의 폰트 사이즈를 기준으로 한 단위이다. html 혹은 body에서 지정한 폰트사이즈가 자식 엘리먼트들의 1rem이다.

 

• 4) calc 함수

매개 변수로 계산식을 받는 함수이다. 화면을 가로지르면서 좌우 간격이 40픽셀인 배너는 width: calc(100% -80px)로 표현할 수 있다. 클론했던 서비스에서는 GNB 클릭 시 내려오는 슬라이드 메뉴 나눌 때 calc 함수를 사용하였다. width와 height뿐 아니라 위치를 나타내는 프로퍼티에도 사용한다.

   width: calc((100% - 48px) / 6);
   // 양옆으로 24px씩 여백을 주고 여백을 제외한 나머지 부분을 일정하게 6개로 나눈 값

.app-header .gnb > li:nth-child(6) .sub-gnb {
    left: calc(((100% - 48px) / 6 * 5) + 24px);
} // 전체를 양옆으로 24px씩 나눈 나머지 부분을 6등분하고 5를 곱한 것에 24를 더함