html (22) html 2022. 1. 11. 17:36 [html]모양이 변하는 svg 만들기 See the Pen svg click event / svg 클릭 이벤트 by sangmok-ye (@sangmok-ye) on CodePen. 준비물 : 2개 이상의 svg파일 참고 사이트1 : https://app.haikei.app/ 참고 사이트2 : http://mm.sookmyung.ac.kr/~sblim/lec/svg-smil04/svg04-13.htm //기본 태그 구조 //svg 다운받으면 나오는 구조 아무것도 움직이지 않는 선만 나옴 // path태그 사이에 animate추가 // path태그에 있는 속성 d를 animate values로 삽입 // 추가로 더 다운받은 svg의 path d속성을 animate values에 추가 // 추가된 속성 구분은 세미콜론으로 할 것 // attri.. html 2022. 1. 7. 18:13 [html]카카오맵 지도 삽입하기+구글지도 카카오맵에서 검색 > 위치 확인 후 상세 보기 > 아래와 같은 화면 에서 우측 상단 깃발 클릭 ▼노출정보 선택 후 하단 소스 생성하기 (보통 전부 체크 해제함) 이후 html에 붙여넣기만 하면 끝ㅇㅇ See the Pen 카카오맵 html 삽입 by sangmok-ye (@sangmok-ye) on CodePen. + 구글맵 구글맵 검색 > 공유 > 지도 퍼가기 > 코드복붙 See the Pen 구글맵 by sangmok-ye (@sangmok-ye) on CodePen. html 2022. 1. 6. 11:58 [html]input type="checkbox" 인풋 체크박스 css디자인 체크박스 1번 체크박스 2번 일반적인 체크박스의 경우 체크박스를 클릭해야만 선택이 가능 → 디자인상으로 체크박스를 작게 만들었을 경우 클릭이 힘들게 됨 → input과 label이 떨어져있으므로 id와 for를 사용하여 연동을 시켜줘야함 2번의 체크박스의 경우 텍스트를 클릭해도 체크가 되지만 디자인적인 변형은 불가 →label이 input을 감싸고 있으므로 id와 for를 사용하지않아도됨 2번으로 쓰고 ::before와 ::after를 사용하면 편법 끝.. before는 체크전, after는 체크 후 position으로 위치 잡기 html 2021. 12. 15. 17:08 [html]구글 아이콘 icon https://fonts.google.com/icons html 2021. 11. 23. 15:35 [html]head meta 카톡 미리보기 이미지 설정 img [미리보기 정보 변경] 정방형 사이즈 800*800 꽉차게 사이즈 800*400 (이너 가로 600안에 넣는게 성공률 높음) 카톡 캐시삭제 https://developers.kakao.com/tool/clear/og html 2021. 11. 23. 11:04 [html&css]인풋 라디오 input radio input id랑 label for맞춰서 묶어주기 (라디오의 경우)input name으로 어떤 것이 택1이 될지 묶어주기 - 그룹화 2번으로 작성할 경우 인풋을 클릭해도 라벨에 체크 연동이 됨 포지션 등으로 사용하지않아도 따로 떨어뜨려서 디자인 가능 (1번으로 작성할 경우 한 셋트가 되어버림 input id와 label for를 안써줘도 자동 연동됨) label,input, input:checked, input:focus{appearance: none; margin: 0; padding: 0; border: none; background: none; outline: none;} /* input[type="radio"] 등으로 개별 설정 가능 */ label, input 데코 리셋 input작성후 requ.. 이전 1 2 3 다음