아싸지만 1일1글 하고싶어

목차 어제 하루 종일 지도만 그렸다.. 후.. 그럴필요 없었는데 퀄리티 높이고 싶어서... svg path svg는 저번 포스트에서 다룬 적 있다. html 그리기 Svg / Canvas SVG 데이터 전달용을 목표로 한 XML를 기반으로 한 언어로써 벡터를 기반으로 한 그래픽을 표현하는 언어이다. 벡터 : 기준좌표로부터 방향과 크기를 가진 물리량 즉 선을 그으면 A(x,y)위치 / 각도 sirong.tistory.com path는 안다뤘.. 는데, path는 선으로 만든 오브젝트이다. 요런 느낌 코드는 이런 식인데 자주 쓰는 방식으로 예를 들면, 검은색(#000)으로 채우기, M(절대좌표 이동) x/y { (100, 100) -> (100, 0) -> (0, 100) }으로 선 그리기이다. 일러스트로 ..

목차 SVG SVG는 백터로 이미지를 표현하는 태그이다. 이런 식으로 html 그리기 Svg / Canvas SVG 데이터 전달용을 목표로 한 XML를 기반으로 한 언어로써 벡터를 기반으로 한 그래픽을 표현하는 언어이다. 벡터 : 기준좌표로부터 방향과 크기를 가진 물리량 즉 선을 그으면 A(x,y)위치 / 각도 sirong.tistory.com 정렬순서 변경 그런데 문제는, svg 요소들의 정렬순서를 바꾸고 싶을 때이다. svg는 정렬순서를 마크업 순서 (코드 순)에 따라 정해지기에, 이를 변경하기 위해선 코드를 재배열하는 수밖에 없다. 재배열하는 방법에는 크게 두 가지가 있는데 Use태그 쓰기 Use태그는 Svg 자식 요소를 복사하는 태그이다. 복사하고자 하는 태그를 class / id로 명시하고 Us..

SVG 데이터 전달용을 목표로 한 XML를 기반으로 한 언어로써 벡터를 기반으로 한 그래픽을 표현하는 언어이다. 벡터 : 기준좌표로부터 방향과 크기를 가진 물리량 즉 선을 그으면 A(x,y)위치 / 각도 / 이동량 3개로 표현 할 수 있는 것이다. 이렇게 표시함으로써 기존의 이미지 표시와는 다르게 다양한 해상도에서 고해상도 이미지를 구현 할 수 있다. (다시 그리면 되니깐!!) 다만 이것도 데이터이기에 표시해야하는 데이터 수가 많아질수록 시간이 증가한다. 해상도가 자주 변하지만 데이터는 잘 안변하는 네비게이션 어플이 대표적인 예이며, 해상도는 변하지 않지만 복잡한 이미지가 많은 프로그램에서는(게임 어플이라던가) 부적절하다. 최소비랑 최대비는 간단한데 좌측 최상단이 0,0이고 우측 최하단이 120,120이..