SVG Rect
RectSVG를 이용하여 사각형을 그릴 수 있습니다. 속성 이름 값 형태 개요 x <coordinate> 좌표 y 좌표 width <length> 폭 heignt 높이 rx 가로 코너 반경 ry 수직 코너 반경 SVG는 만든 순서대로 쌓입니다. 따라서 가장 먼저 SVG를 생성하였다면 가장
태그: web
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, 빅데이터로 인한 필요성 증가
transition
transitionCSS로 효과를 주게되면 변화는 즉시 실행됩니다. 하지만 transition효과를 사용하게 되면 지정한 시간동안 변하도록 효과를 줄 수 있습니다. transition-propertytransition-property는 변화의 대상이 되는 CSS의 프로퍼티를 지정해 줄 때 사용합니다. 지정하지 않는 경우 모든 property가 지정됩니다.
element states
hover?hover란 해당 객체 위에 마우스를 올려두면 스타일이 다르게 변하도록 효과를 줄 수 있습니다. 1234567891011121314<head> <style> .box{ background-color: skyblue; font-size: 40px; } .box:hover&
position
positionposition프로퍼티는 요소의 위치를 지정합니다. position의 종류는 4가지가 있습니다. staticstatic은 position의 기본값으로 기본적인 요소의 배치 순서에 따라 위에서 아래로, 좌에서 우로 배치됩니다. 123456789101112131415161718192021222324<head> <style>
display
displaydisplay는 layout에서 자주 사용하는 property입니다. 이름 설명 inline inline특성을 갖는 요소로 지정합니다. inline-block block의 형태를 유지하는 inline특성을 갖는 요소로 지정합니다. block block특성을 갖는 요소로 지정합니다. inlineinline특성은 content
box model
box modelBox model은 콘텐츠(Contents), 패딩(Padding), 보더(Border), 마진(Margin)으로 구성되어 있습니다. 이름 설명 contents 텍스트나 이미지가 위치합니다. padding 보더(border)안에 위치한 영역으로 기본적으로 투명입니다. border 테두리라고 생각하면 됩니다. margin
Mixing CSS with HTML
CSS와 HTML의 연결 방법CSS와 HTML의 연결 방법에는 inline방법과 external방법 2가지가 있습니다. inlineinline으로 CSS를 사용하는 방법은 HTML내에서 CSS를 직접 사용하는 방식입니다. 1234567<head> <style> body{ background-color: red; &#
property
proportyselector로 HTML의 요소를 선택하고 중괄호({})안에 property와 property-value를 지정 할 수 있습니다. property는 이미 정해져있으므로 표준스펙을 참고하시기 바랍니다. 1property:property-value; 위 CSS에서처럼 property와 property-value는 colon(:)으로 구분되어 있