개발자의 끄적끄적

[html/css] html 이미지 다운로드 버튼 버튼 클릭시 이미지 다운로드 시키는 방법입니다! 다운 위를 보시면 아시겠지만, 태그에 href 속성에 이미지 경로를 입력하고 download 를 선언해주고 버튼을 실행시키면, 다운로드가 됩니다! 참고하세요!

[html/css] css 마우스 오버시 회전 방법 및 예제 css 를 이용하여 특정 태그 혹은 특정 class 에 마우스 오버시 회전시키고 싶을때 사용할 수 있는 소스입니다. img:hover { -ms-transform: rotate(60deg); // explorer -webkit-transform: rotate(60deg); // chrome, safari, opera transform: rotate(60deg); } 위 에서 img 로 되어있는 부분을 원하는 타겟으로 변경하여 사용하시면 될껍니다!! rotate 안에 있는 60deg 는 각도라서 원하시는 각도로 적용하시면 되구요! 참고들 하세요!!

[html/css] 특정영역안에 div 띄우기 javascript 를 작업하던 중 특정 태그안에 임의의 영역을 div로 생성하여 그부분을 클릭했을때만 함수가 동작하게 하고 싶었습니다.. 보여지는 영역은 아니지민 전체가 아닌 특정영역만 동작하게 하고 싶은거죠.. 그래서 막 찾아보다가 해결한 div 태그를 공유하고자 올려봅니다! 위 내용을 보시면 아시겠지만 특정영역 왼쪽 위에 넓이 33% / 높이 100% 인 임의의 영역을 생성하여 onclick 함수를 걸어놓은부분입니다! 참고들하세요!

[html/css] CSS로 이미지 세로 중앙 정렬(Vertical align)하기 [펌] HTML에서 를 CSS만으로 비율을 유지한 채로 특정 영역의 중앙에 출력하는 방법은 다음과 같다. position 을 이용한 방법 line-height 를 이용한 방법 :before / content 를 이용한 방법 flex 를 이용한 방법 출처 : blog.asamaru.net/2017/04/04/css-image-vertical-center/

[html/css] svg에서 text(글자) 가운데 정렬하기(수직, 수평 중앙정렬) [펌] svg에서 글자를 가운데로 정렬하는 방법을 검색해 봤는데 한국에서는 잘 안나오는거 같다. 아직 svg를 쓰는데 익숙하지는 않은것 같다. 그래서 대부분 svg예제에서보면 x,y로 위치를 줘서 배치를 하는 것을 볼 수 있다. 그런데 위치를 상대적으로 배치하는것 역시 중요하다. 그래서 수직 수평 중앙정렬을 한번 해보도록 하자. 위의 예제는 수직 중앙 정렬을 html의 svg의 text를 중앙 정렬한 예제이다. 이를 코드로 구현한 것은 아래와 같다. Lorem 위와 같은 코드를 사용하면 수직 수평 중앙 정렬을 구현할 수 있다. 왜 그런지 한번 알아보도록 하자. 일단 svg의 크기가 중요하다. 이 크기의 절반을 사용할 것..

[html/css] svg path text 사용법 Quick brown fox jumps over the lazy dog. 위 샘플 소스에서 처럼 텍스트를 띄우고 싶은 svg path 의 아이디값을 Quick brown fox jumps over the lazy dog. 파란색 블럭 친 textPath href 자리에 넣어주면 됩니다. 참고들하세요! 출처 : developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath

[html/css] 파일첨부시 특정 파일확장자만 선택하게 하기 [펌] 태그에 accept 속성으로 사용자가 첨부하려는 파일을 특정할 수 있다. 실제 동작하는 모습을 보여주기 위하여 예제를 준비 했다. 하단의 링크를 클릭해서 어떤 모습인지 확인이 가능하다. HTML Example: 파일 선택시 지정한 파일 종류만 보이게 하기 특정 확장자의 파일만 보이는 파일선택 다이얼로그 창 이미지 사용방법은 input 태그에 accept 속성만 주면되고. 속성의 값으로 사용 할 수 있는 방법은 특정 확장자를 지정하거나 미디어 타입을 지정하는 방법 또는 audio/*, video/*, image/* 형식의로 정의 할 수 있다. 파일 확장자로 지정하는 것은 .gif, .jpg, .png 와 같이 나열 하면 된다. 구분은 ,..

[html] 캐시 방지 설정 html 코드 상단의 head 부분에 아래와 같이 meta tag를 추가해주면 됩니다!! 참고하시고! 개발에 도움들 되시길! 오늘도 화이팅!