디노 code.html12 Input, setInterval을 이용해서 타이머 만들기 / html javascript input type="checkbox"와 자바스크립트의 setInterval을 사용하여 체크 박스를 클릭했을 때, 초단위 시간을 세어주는 시스템을 만들어보겠습니다. html 소스 타이머 활성화 먼저 html에서 input type="checkbox"를 만들고 그 아래 태그로 빈 공간을 만들어줍니다. js 소스 let [timer, timeId] = [0,0]; const h1 = document.querySelector('h1'); const checkbox = document.querySelector('input'); console.log(h1); console.log(checkbox); checkbox.addEventListener('change', (e)=>{ if (e.currentTarget.c.. 2021. 8. 25. hover 했을 때 underline animation 효과 만들기 / html css hover 했을 때 underline animation 효과 만들기 / html css 포트폴리오를 짜는 중에 메뉴 부분에 hover 했을 때 딱딱하게 밑줄이 그어지는 것이 아닌 애니메이션 효과를 넣어보기 위해서 가상 요소를 사용한 underline animation 효과를 만들어 봤습니다. html 소스 hover1 hover2 hover3 과 로 메뉴를 만들었기 때문에 간단하게 , 만 사용했습니다. css 소스 @charset "utf-8"; * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: inherit; } ul { padding: 200px 200px; } ul > li { font-siz.. 2021. 8. 16. 마우스를 따라다니는 이미지 만들기 mousemove /html css jQuery 마우스를 따라다니는 이미지 만들기 mousemove /html css jQuery 포트폴리오 작성 중에 이미지가 마우스를 따라다녔으면 좋겠다는 생각에 공부해본 내용입니다. 화면으로 봤을 때 굉장히 어려운 내용일 것으로 생각했는데, 하나씩 이해하면서 쓰다 보니 내용도 짧고 생각보다 쉽더라고요! html 소스 cursor라는 박스 안에 제가 이번 포트폴리오에 사용하는 로고를 가져왔습니다. css 소스 .cursor { position:absolute; top:0; left: 0; z-index: 9999; width: 350px; height: 100px; transform:translate(-50%, -50%); } position: absolute로 공간에서 띄워주고 위치 값, 크기 값을 맞춘 후 z-i.. 2021. 8. 11. 웹디자인 기능사 실기 세로형 메뉴 slideDown / html css jQuery 웹디자인 기능사 실기 세로형 메뉴 slideDown / html css jQuery 가로형 메뉴는 다 연습해 봤고, 세로형 메뉴는 거의 비슷하지만 아주 살짝 다르기 때문에 공부해봤습니다. html 소스 이용안내 이용방법 이용시간 이용요금 이벤트정보 현장이벤트 온라인이벤트 이벤트예약 프로그램 프로그램안내 온라인예약 단체예약상담 고객센터 공지사항 자주묻는질문 자료실 wrap으로 감싸고 #header 안에 으로 로고 영역을 잡아주고 200/40 크기로 텍스트 이미지를 포토샵으로 만들어서 넣어주었습니다. .gnb로 메뉴 영역을 잡아 준 이후 메뉴는 , 로 메뉴, 서브 메뉴를 넣어주었습니다 html은 가로형과 크게 다를거 없습니다. css 소스 div#wrap { width: 1000px; } div#wrap d.. 2021. 8. 11. 이전 1 2 3 다음