SVG 2

HTML/css 반응형을 위한 단위 vw, vh (svg text 반응형 처리 예시)

모바일 환경이 중요해지면서, 프런트 앤드 개발자들은 모두 반응형을 고려해서 작업을 한다. PC환경과 모바일 환경 모두 가독성을 잡기 위해서는 각 스크린 사이즈마다, 적당한 사이즈를 찾아서 적용하는 것이 중요하다. 📐CSS 반응형 단위 vw, vh 반응형으로 개발한 다 고하면, 대부분의 개발자들이 익숙한 단위는 %를 생각한다. 해당 %를 지정할 경우 스크린 넓이에 해당 % 맞춰서 자동 조절된다. 이와 비슷한 개념으로 이용되는 것이 vw, vh이다. vw : 뷰포트 너비의 1%, 뷰포트 가로 사이즈가 기준 vh : 뷰포트 높이의 1% , 뷰포트 세로 사이즈가 기준 CSS에서 사용하는 vw와 vh는 상대적 길이 단위로 비교대상과 비교해서 상대적인 크기를 측정하는 단위이다. 예를 들어보자, 현재 브라우저 화면이..

FrontEnd/css 2021.04.23

[css/svg]css animation과 svg를 활용해 글자가 그려지는 효과 만들기

🙄 SVG란? SVG는 Scalable Vector Graphics의 약자로 html에서 사용할 수 있는 Vector 이미지를 지칭한다. SVG라는 개념은 HTML과 CSS에서만 사용하는 개념은 아니고 백터 이미지를 표현하기 위한 포맷으로 w3c에서 만든 이미지 표준 값이다. SVG는 벡터 기반의 그래픽을 XML 형식으로 정의해서 사용할 수 있다 SVG를 사용하는 이유는? png, jpg와 같은 픽셀 이미지와 다르게 SVG를 사용하는 이유는 무엇일까? - SVG 이미지는 확대 축소 시에도 고품질의 이미지를 제공하며 - 파일 형태로 했을 때 용량이 적어 로딩 시간이 줄어들며 - css를 통해 다양한 효과를 줄 수 있음 단점의 경우 SVG의 경우 IE 하위 버전에서 지원이 되지 않으며, 단순한 내용이 아닌 ..

FrontEnd/css 2021.01.01
1