SVG Rect
RectSVG를 이용하여 사각형을 그릴 수 있습니다. 속성 이름 값 형태 개요 x <coordinate> 좌표 y 좌표 width <length> 폭 heignt 높이 rx 가로 코너 반경 ry 수직 코너 반경 SVG는 만든 순서대로 쌓입니다. 따라서 가장 먼저 SVG를 생성하였다면 가장
아카이브: 2017
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, 빅데이터로 인한 필요성 증가
hexo theme color
헥소 테마 색상 변경헥소를 이용하여 github blog를 사용하다보면 기본 테마의 색을 변경하고 싶을 때가 있습니다. hueman의 테마 색상을 변경하도록 하겠습니다. sidebar color빨간 위치의 색상을 변경해보도록 하겠습니다.위 사진과 같은 경로의 sidebar.styl파일을 찾아 열겠습니다.13번째 줄의 background 색상을 원하는 색상
gh-pages
gh-pages?gh-pages는 git repositories의 한 공간을 사용하여 페이지를 배포 할 수 있는 기능입니다. 사용방법repositories에서 새로운 repositories를 생성합니다.repositories명을 작성하고 생성합니다.생성한 repositories에 index.html이 있는 파일을 업로드 합니다.Branch버튼을 누르고 gh
hexo jsfiddle
jsfiddle?웹의 프론트 기술인 html, css, javascript를 이용하여 코드를 작성하고 바로 테스트 할 수 있는 코드 공유 서비스입니다. 사용방법jsfiddle사이트로 이동하여 코드를 작성합니다.작성 후 Run버튼을 누르면 result에 실행 결과값이 나오게 됩니다.result부분에 결과 값이 잘 실행되었습니다.원하는 결과 값이 나오면 Sa
WARNING: UNPROTECTED PRIVATE KEY FILE!
WARNING: UNPROTECTED PRIVATE KEY FILE!위 경고는 pem 파일의 권한이 너무 많이 열려있어 에러가 발생하는 것입니다. 터미널에서 아래와 같이 경고가 발생 할 것입니다. 해결방법1chmod 600 (pemkey 파일 이름).pem pemkey 파일 이름 부분에 해당하는 파일의 이름을 넣고 터미널에서 실행하면 권한이 바뀌게 되고 위
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>