분류 전체보기407 프론트엔드4-2.[javascript] 팝업메뉴 만들기 완성본 더보기 안에 내용은 2022.02.11 - [멀티캠퍼스 풀스택 과정/프론트엔드] - 프론트엔드4-0.[javascript] 영화포스터 움직이는 바 만들기 메뉴에 마우스를 갖다대면 서브메뉴가 나온다. OUTER: 가디건 자켓 & 점퍼 베스트 코트 세일 TOP: T-shirt Cami Knit Shirt & Blouse DRESS: All 바캉스룩 Set BOTTOM: 레깅스 힐링투엘브 히든벤딩시리즈 스커트 팬츠 SUMMER: HOLI웜웨어 at 22 ℃ 바캉스룩 웹 페이지 구조 잡기 더보기 header(GIRLS DAILY) 전체 메뉴를 감싸는 div nav ul li (OUTER TOP DRESS BOTTOM SUMMER) ul li 서브메뉴 메인컨텐츠(지난 번에 만든 영화 포스터를 iframe태.. 2022. 2. 11. 프론트엔드4-1.[javascript] var, let, const 변수 선언 변수 선언하는 키워드 : var, let, const 1. var(변수 재선언 가능) 변수 선언을 여러 번 해도 각각 다른 값이 출력될 수 있다.(선언 여러번, 값의 재할당 가능) var a = 100; console.log("a: ",a); // a: 100 // var: 같은 변수명으로 여러번 재정의 할 수 있다. var a = 200; console.log("a: ",a); // a: 200 2. let(변수 재선언 불가능, 값 변경 가능) ' 같은 변수명의 선언은 한 번만 가능하고 값의 변경이 가능하다. (선언 한 번, 값의 재할당 가능) let hello = "안녕"; console.log("hello: " + hello) // hello: 안녕 //let hello = "잘가"; //conso.. 2022. 2. 11. 프론트엔드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. 이전 1 ··· 41 42 43 44 45 46 47 ··· 68 다음
