분류 전체보기 (137) js 2022. 1. 20. 14:22 [js]스크롤하는만큼 내려오는 선-프로그래스바 같은 See the Pen 스크롤하는 만큼 내려오는 선 by sangmok-ye (@sangmok-ye) on CodePen. $(function(){ $(window).scroll(function(){ let em = $(".history_wrap em"); let sc_st = $(window).scrollTop(); let sc_dh = $(document).height(); let sc_wh = $(window).height(); let scroll_em = (sc_st / (sc_dh - sc_wh)) * 100; em.css( "height", scroll_em + "%" ); }) }) html 2022. 1. 14. 17:42 [html]keyframe을 이용한 움직이는 svg See the Pen svg-animation by sangmok-ye (@sangmok-ye) on CodePen. svg-animation ... codepen.io stroke-dasharray는 path의 길이 stroke-dashoffset이 0으로 향할수록 path가 나타남 js로 array와 offset을 path길이만큼 설정 후 keyframe으로 offset을 0으로 만들어 path가 나타나게 함 +) array=offset일 경우 선이 완전이 생기고 난 후 바로 사라짐 offset을 *2할 경우 사라지고 생기고를 반복함 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.. js 2022. 1. 10. 17:52 [js, php]텍스트 대치 / 일부 텍스트 변경 / text relpace $(function(){ let txt="가나다라마바사"; let tt=txt.replace("가","하"); alert (tt); }) 입력 > 가나다라마바사 출력 > 하나다라마바사 // 기본식인데 txt에 $("div").text(); 로 담으면 왜 안되는지 모르겟음 입려 > 변수 출력 > 함수 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. css 2022. 1. 7. 11:32 [css]리스트 list 2열 배치 display gird 그리드 ul{display: grid; grid-template-columns: 1fr 1fr;}/* grid-template-columns: repeat(2, 1fr)과 동일*/가로값이 정확할 경우 float혹은 display: flex로 가로값을 줘서 배치를 할수 있지만 가로값이 정확하지 않을 경우엔 display: grid를 사용ㅇㅇㅇㅇㅇ↓ㅇㅇㅇㅇㅇ로 변환됨 grid-template-columns에서 지정된 갯수만큼 배열이 되며 fr는 자동으로 가로값이 인식된다 너비가 1000px일 때=> grid-template-columns: 200px 1fr 에서 1fr은 800px// 1000px - 200px = 800px(1fr)=> grid-template-columns: repeat(4, 1fr) 에서 .. js 2022. 1. 6. 15:20 [js]마우스 따라다니는 원 만들기 css포지션을이용 하여 마우스 이벤트 제어 body{background: #fff;} .cursor{width: 50px; height: 50px; position: absolute;; transform: translate(-50%, -50%); z-index: -1; background: #1ce6BA; border-radius: 50%; mix-blend-mode:darken; transition: transform .3s; pointer-events: none;} .cursor.on{transform: translate(-50%, -50%) scale(2);} $(function(){ let cursor=$(".cursor"); /* e가 왜들어가는지 아직 모르겟지만 넣으라고 해서 넣음 */ $(w.. 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으로 위치 잡기 이전 1 ··· 12 13 14 15 16 17 18 다음