멀티캠퍼스 풀스택 과정170 프론트엔드4-0.[javascript] 영화포스터 움직이는 바 만들기 웹 창을 열면 바로 움직이다가 끝까지 가면 다시 또 반대쪽으로 움직이고 마우스를 올리면 멈춘다. 구조 구분하기 구조: 전체를 싸고 있는 빨간색 div / 왼쪽 버튼 ◁ 과 오른쪽 버튼 ▷ / 그림를 감싸고 있는 초록색 div / 각 그림들 사진의 크기는 116 x 164 1. HTML 파일과 기준 틀 생성 더보기 더보기 전체 의 가로의 크기는 넉넉하게 하고 높이는 사진의 높이와 같게 생성한다. margin을 0 auto로 가운데 정렬한다. 2. div박스에 사진을 넣기 더보기 더보기 3. div박스에 넣은 사진을 정렬 사진을 넣은 div박스(imgView)가 좌표의 기준점이 되게끔 만들어야 한다. (imglist가 imgView기준으로 움직이게 하기 위해서) 이미지는 가로로 길게 되어있다. (사진의 가로.. 2022. 2. 11. 프론트엔드3-10.[javascript] document객체의 cookie document.cookie 쿠키(cookie)란 HTTP의 일종으로 브라우저에 저장되는 작은 기록 정보 파일(클라이언트 컴퓨터에 데이터를 저장할 수 있음) HTTP 쿠키, 웹 쿠키, 브라우저 쿠키라고도 한다. 쿠키는 주로 웹 서버에 의해 생성된다. cookie는 document객체 안에 있지만 jsp에도 있고, js에도 있다. 창을열어서 -> F12(페이지 검사) -> Application -> 왼쪽 메뉴 Storage -> Cookies document.cookie는 name=value 쌍으로 구성되어 있고, 각 쌍은 ;로 구분한다. (변수=데이터 세미콜론(;)의 반복) name 변수 value 값 path URL의 현재위치 domain 쿠키에 접근 가능한 domain expires/max-age 유.. 2022. 2. 10. [js] onkeydown으로 input에 숫자만 입력하기 연락처 : 숫자(0~9) 48~57 텐키(0~9): 키보드 오른쪽 95~105 백스페이스 8 탭키 9 왼쪽방향키 37 오른쪽 방향키 39 delete 키 46 영문은 입력이 안되는 데 한글은 계속 되길래 왜그런지 구글링했더니 한글은 유니코드로 구성되어 있어서 keyCode()는 유니코드를 인식하지 못한다고 했다. function checkNumber() { // 아스키코드 숫자는 48~57 백스페이스는 8 탭키 9 왼쪽방향키 37 오른쪽방향키 39 delete 46 var key = event.keyCode; if(key>=48 && key=95 || key 2022. 2. 10. 프론트엔드3-9. [javascript] window.scroll window 객체의 함수 scroll( ) 문서에서 특정 위치로 스크롤 scrollBy(x,y) 지정한 크기만큼씩 스크롤 scrollTo(x,y) 지정한 위치까지 스크롤 window 객체의 속성 scrollX 스크롤했을 때 수평으로 이동하는 픽셀 수 scrollY 스크롤했을 때 수직으로 이동하는 픽셀 수 1. HTML 파일 for문을 이용해서 img를 출력한다.(이미지의 숫자가 순서대로여야 한다. 태그를 이용해서 배경이미지를 추가한다. 2. js 구현 ... 스크롤이 0.5초 간격으로 움직이는 것을 구현한다. ... 배경이미지를 움직이게 하기(에서 적용한 body backgroundImg) ... background-position 반복되지 않는 배경 이미지의 상대 위치(왼쪽 위부터 이미지를 출력) ba.. 2022. 2. 10. 프론트엔드3-8. [javascript] setInterval과 setTimeout setInterval(func( ){자바스크립트 코드}, 일정 시간 간격) 지속적으로 일정한 시간 간격으로 함수를 호출해 코드를 실행 setTimeout(func(){자바스크립트 코드}, 일정 시간 간격) 단 한 번 일정한 시간 간격으로 함수를 호출해 코드를 실행 setInterval( ) setTimeout( ) 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 떄 사용 코드를 바로 실행하지 않고 일정시간 기다린 후 실행 첫 번쨰 인자로 실행할 코드를 담고 있는 함수를 받고 두 번째 인자로 반복주기를 밀리초(ms)단위로 받는다. 첫 번쨰 인자로 실행할 코드를 담고 있는 함수를 받고 두 번째 인자로 지연시간을 밀리초(ms)단위로 받는다. clearInterval( )메서드로 중지한다. clea.. 2022. 2. 10. 프론트엔드3-7. [javascript] 팝업창띄우기 예제(window와 screen) popup창을 띄우고 widnow객체의 함수로 동작하게 해본다. 1. popup html 작성 2. popup을 띄울 main winodw 창 1. 팝업창을 띄우는 생성 1) HTML 파일 팝업창 띄우기 2) js 구현 window.open( "URL(파일명)", "새 창 이름", "새 창 옵션" ) 새로운 창(새 탭)을 연다 새창을 표시하려면 window객체의 open( )함수를 생성해서 사용한다. 파일명을 적을때 만약 폴더가 다른 곳에 있으면 폴더 경로도 적어줘야 한다. 저기서 "w"는 이름이 아니고 창을 한 개만 띄게 해준다.(창을 재사용) "w"가 없으면 button을 누를때마다 팝업창이 무한대로 생성된다. 새 창 옵션에는 width, height, left, top, resizeable 등이 있.. 2022. 2. 10. 이전 1 ··· 9 10 11 12 13 14 15 ··· 29 다음
