이번 포스팅에서는 CSS에서 SVG 이미지를 배경으로 사용하는 방법을 간단한 실십을 통해 알아보겠습니다. 실습 시작 코드 HTML로 <div> 요소 3개를 만들고, 2번째 <div> 요소와 3번째 <div> 요소의 클래스를 각각 check와 heart로 설정해주겠습니다. CSS로는 글꼴 크기와 배경색과 같은 기본 스타일링을 해주었으며, SVG 이미지가 보일 자리를 확보하기 위해서 좌측 여백을 좀 크게 주었습니다. 이제부터 check와 heart 클래스에 스타일을 추가하여 2번째 <div> 요소와 3번째 <div> 요소 앞에 각각 체
지난 포스팅에서는 HTML 문서에 SVG로 다양한 그림을 그리는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 HTML 문서에 삽입된 SVG 요소를 CSS로 스타일하는 방법에 대해서 알아보겠습니다. SVG 요소 우선 스타일할 SVG 요소가 있어야겠죠? 아래 SVG 요소는 로그인이 필요한 웹사이트에서 흔히 볼 수 있는 사용자 아이콘인데요. 이 요소를 상대로 간단한 실습을 해보려고 합니다. 크기 조정 위의 사용자 아이콘이 너무 작은 것 같은데요. 먼저 크기를 좀 키워볼까요? SVG 요소를 크기를 조정할 때는 viewBox 속성을 고려
웹에서 SVG가 사용되기 시작한지가 꽤 되어 가는 것 같죠? 개발자로서 주로 이미 만들어진 SVG 코드를 복사해서 붙여넣기만 하지 제대로 SVG에 대해서 깊이 알아볼 기회는 많지 않은 것 같습니다. 이번 포스팅에서는 HTML 문서 안에 SVG로 직접 간단한 그림을 그려보면서 그려보면서 전반적으로 SVG를 어떻게 사용하는지 가볍게 알아보겠습니다. SVG 란? SVG(Scalable Vector Graphics)는 HTML 문서에 백터(vector) 기반 그래픽을 그리기 위해서 사용되는 XML 기반 웹 기술입니다. 백터 기반 그래픽은