개발자의 끄적끄적

[html/css] html 색상표 조회 사이트 [링크] 개발을 하다보면 대부분 색상이나 이건 부분은 디자이너와 퍼블리셔가 정해주는대로 작업하지만, 자잘한거는 개발단에서 그냥 수정하게 되는 경우도 있습니다. 그럴때 html 코드표가 맨날 헤깔리는데 모바일에서도 되는 잘 만들어놓은 사이트가 있어서 공유하고자 링크 달아봅니다!! RGB / HSL / HSV / Hex 4가지 값도 다 나오게 되어있으니 참고들하세요!! html 색상표 사이트 URL : wepplication.github.io/tools/colorPicker/ HTML 색상표 온라인 RGB 색상표, HSL, HSV, CSS 칼라코드 모음 wepplication.github.io

[html/css] input radio tag 사용시 주의점 html 에서 input radio 태그 사용시 주의점입니다!! 라디오 1 라디오 2 위와 같은 태그가 있다고 가정할때, 글자클릭시 라디오 check 효과를 주고싶다면, input 이 가지고 있는 id 와 label 의 for 가 동일해야 합니다. 그리고!! 라디오 1 과 라디오 2 중 하나만 선택되게 하고 싶다면 input radio 태그의 name을 동일하게 주어야 합니다! 만약 name이 다르다면 모든 radio가 클릭되는 현상이 나타날 껍니다! 참고들하세요!

[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] CSS / CSS를 HTML에 적용시키는 방법 HTML에 CSS를 적용시키는 방법은 세가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다. Internal Style Sheet HTML 문서 안의 안에 CSS 코드를 넣는 방법입니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. Inline Style Sheet Inline Style Sheet는 HTML 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법입니다. 간단한 예는 다음과 같습니다. Lorem ipsum dolor. 해당 태그(위 코..