프로그래밍 공부 노트

  Safari 브라우저에서 svg의  width와 height에 rem을 사용할때 발생되는 Error 이다. 다른 브라우저에서는 Error가 안보이지만 Safari 브라우저에서만 해당 Error가 보인다. Error가 발생해도 동작은 잘 되지만 그래도 Error니까 해결해보자. 원인은 rem 사용 때문이다. 이전에는 크롬에서도 rem 사용시 문제가 되었던것같은데 이제는 문제가 없고 Safari 브라우저에서만 해당 오류가 발생하는것같았다. Safari 브라우저에서 해당 Error를 없애기 위해서는 svg width와 height에는 number, px ,percentage 만 사용하라고 한다. 그러면 rem을 사용한 반응형으로 어떻게 만들지? 라는 생각부터 든다. 해결법은 간단하다. const ArrowBackIcon = ({ width = 24 , height = 24 , color }: IconProps ) => { return ( < SVGContainer width = { width } height = { height } > < ArrowBack width = { '100%' } height = { '100%' } fill = { color } /> </ SVGContainer > ); }; export default ArrowBackIcon ; ArrowBack은 svg 아이콘이고 svg 파일에 width와 height는 current가 작성되어있는 상태이다. SVGContainer는 div 태그이며 svg width와 height 크기를 rem으로 해당 태그에 할당한다. 이렇게 할당하면 원하는 사이즈대로 반응형으로 svg를 표현할 수 있다. Safari 브라우저 콘솔에서도 Error가 사라진것을 확인할 수 있다.

[CSS] 반응형 작업을 위한 폰트 단위 em / rem  CSS에서 사용하는 단위는 여러가지가 있다.  많이들 사용하는 px에서부터 % / em / rem / vh / vw / vmin / vmax / ex / ch / 등이 있다. 호환성 문제도있고 요즘엔 쓰이지 않는 단위도 있으므로 대표적으로 많이 사용되는 3가지에대해 알아보자. px 절대값으로 사용 되는 단위이다. 많이 사용되지만 고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않다. em 부모 태그의 영향을 받는 상대적인 길이다. 부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어렵다. 반응형 웹사이트에 사용된다. 하지만 권장되지 않는다. rem rem(root em)은 최상위 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이다. 즉 html 요소에 font-size를 고정값으로 지정해 두면 그 비율에 따라 크기가 계산된다. 반응형 웹사이트에 가장 바람직한 단위이다. rem은 IE9 버전까지 지원이 된다. 반응형 홈페이지를 만들때 px로 작업을 하면 브레이크 포인트 마다 일일이 찾아서 px값을 수정해야 하는 엄청난 수고를 하게 된다. px은 절대값으로 사용 되는 단위이기 때문에 반응형 홈페이지를 작업할때는 불편하고 문제가 되기 때문에 em / rem 을 사용 하는 것이 좋다. 이 중에서 rem을 많이 사용하는데 rem은 html에서 font-size를 정의 해 놓으면 그 사이즈를 기준으로 계산이 되기 때문에 이해 하기 쉽고 사용하기 편리하다. html에서 사이즈를 지정하지 않으면 기본적으로 시스템 사이즈가 적용 된다. html의 기본 시스템 사이즈는 font-size: 16px; 이다. html { font-size:16px; } 에서 16px은 1rem 이다. 17px은 1.063rem이다. 이렇게 되면 계산하기 어렵기 때문에 rem을 계산해주는 사이트를 이용하거나 더 쉬운 방법은 html { font-size:62.5%; }, 또는