전체 글12 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. 혼자 공부하는 자바스크립트 예제 정리 inch 를 cm 단위로 변경하기 혼자 공부하는 자바스크립트 직접 해보는 손 코딩 예제 정리 inch를 cm 단위로 변경하기 혼자 자바스크립트를 공부해야 하는 저는 혼자 공부하는 자바스크립트라는 책을 구매하여 읽고 있습니다. 읽는 중에 첫 프로그램을 작성해 보려고합니다. inch를 cm 단위로 변경하기 const rawInput = prompt('inch 단위의 숫자를 입력해주세요') const inch = Number(rawInput) const cm = inch * 2.54 alert(`${inch}inch는 ${cm}cm 입니다`) 저는 미리 html에 js 파일을 연결 해 둔 상태입니다. const상수 "rawInput"은 = prompt질문, 힌트 등을 주어서 말을 하도록 유도하여 사용자에게 입력 받을 수 있는 메서드('inch.. 2021. 8. 10. 웹디자인 기능사 실기 modal layer popup(레이어 팝업) / html css jQuery 웹디자인 기능사 실기 modal layer popup(레이어 팝업) / html css jQuery 웹디자인 기능사의 마지막 modal layer popup만 남았습니다. 오늘 학원에서 테스트를 하는데 html에 팝업을 만들어 놓고, 다른 작업 먼저 하려고 display : none;으로 가려놨다가 깜빡해서 팝업 구현을 안 하고 제출했더라고요. 이 글을 보시는 분들은 조금 거슬리더라도 display: none 하지 말고 작업하시는 거 추천드립니다!! html 소스 팝업 제목 팝업 내용 Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quo reprehenderit qui harum facilis. Necessitatibus exceptur.. 2021. 8. 10. 반응형 웹 메뉴 만들기 @media css / html css 반응형 웹 메뉴 만들기 @media css / html css 취업을 위해 포트폴리오를 준비 중인데, 국비 지원을 받아 배우는 이 곳에서는 반응형을 알려주지 않았습니다. 오로지 퍼블리셔가 되기 위한 기초적인 것들만을 배우더라구요! 저의 목표는 퍼블리셔를 넘어 프론트앤드가 되는 것이기 때문에 따로 반응형을 공부해봤습니다. html 소스 logo View my work Get to know me Say hello 메뉴 부분을 만들 것이기 때문에 header 시멘틱 태그를 사용했고, Logo를 아직 정하지 않아서 logo라고만 넣어주었습니다. 태그를 이용해서 logo라는 텍스트를 기울여봤습니다. 을 감싸는 박스를 항상 넣었는데 이번엔 반응형을 만들기 위해서 에 직접 class를 넣어주었습니다. 에 제가 포트폴.. 2021. 8. 9. 웹디자인 기능사 실기 탭 메뉴 구현 / html css jQuery 웹디자인 기능사 실기 탭 메뉴 구현 / html css jQuery 웹디 기능사에서 css 소스가 제일 복잡한 구간이 바로 탭 메뉴입니다. 하지만 jQuery 소스가 그만큼 쉬우니 잘 따라오실 수 있습니다! html 소스 공지사항 공지1 공지2 공지3 공지4 공지5 갤러리 html부터 조금 복잡하죠? tab이라는 박스로 감싸주고 제목이 있기 때문에 , , 를 사용해 주었습니다. 는 제목 는 내용 이 둘을 감싸는 이 있다고 생각하면 쉽습니다. 먼저 "공지사항"과 "갤러리" 두 가지의 제목을 탭 했을 때 내용들이 나올 것이기 때문에 에 공지사항과 갤러리를 만들어 주었습니다. 공지사항과 갤러리 둘 중 하나를 눌렀을 때, on이라는 클래스를 이용해 배경색의 변화를 줄 것이기 때문에 첫 번째 에 on 클래스를 주.. 2021. 8. 6. 이전 1 2 다음