반응형 사이트의 그래픽을 사용하면 속도가 느려질 수 있지만 벡터 그래픽과 균형을 맞추면 대역폭을 최소화하는 데 도움이 됩니다. 이를 통해 놀라운 그래픽이 모바일 사이트에서도 훌륭하게 작동합니다. 일반적으로 캔버스와 SVG를 사용합니다.
HTML5 SVG(Scalable Vector Graphics)를 사용하여 완벽하게 처리하므로 여러 화면 크기에 맞는 디자인을 만드십시오. SVG로 생성된 그래픽은 해상도에 독립적이기 때문에 벡터 기반 라인 드로잉을 쉽게 표시하고 장치의 픽셀에 대해 걱정할 필요가 없습니다. 결과를 확장하고 브라우저에서 멋지게 보입니다.
여기에서는 반응형 사이트에서 벡터 배경으로 작업하는 방법을 살펴보겠습니다. 바로 지금, 우리는 데모 SVG를 가지고 있습니다. 벡터 파일을 사용하는 방법을 살펴보겠습니다. 먼저 너비가 100%인 CSS 고정 위치 지정을 수행합니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
</head>
<body>
<img src="/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley">
</body>
</html> 여기에서 출력을 볼 수 있습니다. SVG 파일은 보기에 좋고 브라우저가 재배치된 경우에도 왜곡 없이 잘 작동합니다. 여전히 흐릿하게 보이지 않고 완벽합니다.
배경에 추가하기 위해 위와 같이 변경했습니다. 그러나 배경 이미지는 일반적으로 투명하기 때문에 불투명도도 추가해야 합니다. 추가하자
예시
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -1;
opacity: 0.1;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley ">
</body>
</html> 여기에서 출력을 볼 수 있습니다. SVG 파일이 멋지게 보이고 불투명도가 배경 이미지로 추가된 것을 볼 수 있습니다 -
