SVG Rect
RectSVG를 이용하여 사각형을 그릴 수 있습니다. 속성 이름 값 형태 개요 x <coordinate> 좌표 y 좌표 width <length> 폭 heignt 높이 rx 가로 코너 반경 ry 수직 코너 반경 SVG는 만든 순서대로 쌓입니다. 따라서 가장 먼저 SVG를 생성하였다면 가장
태그: html
SVG Line
LineSVG를 이용하여 선을 그릴 수 있습니다. 속성 이름 개요 x1 x축 시작 좌표 값 y1 y축 시작 좌표 값 x2 x축 끝 좌표 값 y2 y축 끝 좌표 값 stroke(line color)stroke를 사용하여 선의 색상 선의 종류 두께 등 선의 스타일을 지정 할 수 있습니다. stroke를 작성하지 않으면 선이 보이지
SVG
SVG란?Scalable Vector Graphics의 약어로써 직역하면 확장 가능한 벡터 그래픽이란 뜻입니다. SVG를 이용하여 벡터형식의 2차원 그래픽을 표현 할 수 있습니다. SVG는 자동으로 확대, 축소를 대응합니다. HTML5부터 SVG엘리먼트로 구현되었습니다. 향후 데이터 시각화를 통해 데이터의 그래프 표현과 iot, 빅데이터로 인한 필요성 증가
Mixing CSS with HTML
CSS와 HTML의 연결 방법CSS와 HTML의 연결 방법에는 inline방법과 external방법 2가지가 있습니다. inlineinline으로 CSS를 사용하는 방법은 HTML내에서 CSS를 직접 사용하는 방식입니다. 1234567<head> <style> body{ background-color: red; &#
id / class
Attribute Description id 유일한 식별자로써 중복지정이 불가능하다. class 중복지정이 가능하다. # id? id는 element마다 하나의 값만 갖을 수 있다. 주민등록번호 또는 여권번호와 같이 고유한 값만 갖을 수 있습니다. 따라서 주민등록번호와 여권번호가 중복되지 않듯이 id값도 중복선언이 되지 않습니다.
semantic / non-semantic tag
semantic tag?semantic태그는 의미가 있는 태그이다. 예를들어 h1태그는 header 1이란 뜻으로 태그 자체가 의미를 갖고 있습니다. section, article, header와 같이 태그 자체가 무엇을 의미하는지 알 수 있는 태그가 있습니다. non-semantic tag?non-semantic태그는 아무런 의미가 없는 태그이다. 예를들
meta tag
meta tag?meta tag는 extra information입니다. 즉 추가 정보라고 생각하면 됩니다. meta tag는 브라우저를 위한 정보이고 유저를 위한 정보는 아닙니다. 그렇기 때문에 head tag안에 사용합니다. 과거에는 메타태그가 검색결과에 미치는 영향이 컷지만 상업적으로 악용하는 페이지가 많아 구글과 같은 검색엔진 회사에서는 요즘 메타태