연습/JS9 JS - 기능 구현 연습 자주 사용할 것 같은 기능드롭다운, 슬라이드, 탭 기능을 연습했다. HTML더보기 로고 HOME SERVICE CONTACTS USER PAGE A N E Y 1 내용 2 내용 3 내용 왼 오 .. 2024. 9. 3. JS - drag and drop 연습 drag and drop 연습 겸 복습 HTML더보기 드래그 1 드래그 2 드래그 3 여기에 드롭 하세요. CSS더보기 드래그 1 드래그 2 드래그 3 여기에 드롭 하세요. JS// 모든 드래그 요소를 선택let draggable = document.querySelectorAll(".draggable");// console.log("드래그 요소의 갯수 : " + draggable.length);// 드롭 영역 선택let dropZone = document.querySelector(".dropZone");// console.log("드롭영역 : " + dropZone);// 모든 드래그 요소에 dragstart, dragend 이벤트 할당for(let.. 2024. 9. 3. JS - 기초 랠리 학원에서 진행한 랠리다.해당 문제를 1번 부터 풀고, 틀리면 모두 지우고 공부한 후에 1번부터 다시 푸는 형식이다.틀리면 지우고 다시 푸는 것을 반복하니, 제대로 알지 못했던 개념이나 코드를 확실하게 익힐 수 있어서 좋았다. 1변수를 개념과 선언(정의)하는 방법을 설명할 수 있다.변수란데이터를 저장하는 메모리공간이다.변수의 선언 및 초기화let a = 0;변수 선언 후 초기화let a;a = 0;2변수의 이름을 정하는 규칙에 대해서 설명할 수 있다.변수의 이름은 숫자로 시작할 수 없고, '_, $'를 제외한 특수문자는 사용할 수 없다.3기본 데이터 타입을 설명할 수 있다.문자형 : 하나 이상의 문자로 이루어진 변수다. 따옴표 안에 값을 작성한다.숫자형 : 정수, 실수가 포함된 변수다. 따옴표를 사용하지.. 2024. 8. 29. JS - 탭 JavaScript를 사용해 탭을 만들어보자 HTML 탭 1 탭 2 탭 3 콘탠츠 1 콘탠츠 2 콘탠츠 3 탭 메뉴와 탭 콘텐츠에 해당하는 영역을 로 정했다. 각 탭 메뉴에는 동일한 클래스와 다른 id가 지정되어 있으며 이는 탭 콘텐츠도 동일하다.클래스와 id를 지정함으로써 다양하게 접근할 수 있게 되었다. CSS* { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box;}.tab { font-size: 25px; border: 2px solid gray; margin: 10px; display: inline-block;}.tab-conte.. 2024. 8. 27. JS - 슬라이드 JavaScript를 사용해 슬라이드를 만들어보자. 우선 HTML이다. 왼쪽 오른쪽 첫 번째 는 배경색을 입히는 용도로 사용하려고 사용했다.두 번째 는 슬라이더 영역과 버튼의 위치를 조정하기 위해 사용했다.은 슬라이드인 를 하나로 묶는 역할을 한다.는 화면상 보이는 슬라이드의 역할을 한다. 두 개는 각각 왼쪽 오른쪽 버튼의 역할을 한다. 의 역할을 한다 생각하면 된다. 마지막 는 html이 로딩된 후에 JavaScript를 적용하기 위함이다. CSS * { margin: 0; padding: 0; list-style: none; box-sizing: border.. 2024. 8. 26. JS - 배경 색상 변경 버튼을 클릭하면 배경 색상이 변경되고, 그 색상의 이름과 RGB 값이 텍스트로 표시되는 JavaScript 코드를 작성하려고 한다. JavaScript를 작성하기에 앞서 HTML과 CSS를 먼저 작성하겠다. HTML background color : none CHANGE 에 JavaScript를 작성하는 데 필요한 요소들을 작성했다.요소는 변하지 않는 텍스트고, 자식 요소로 있는 요소는 색상의 이름과 RGB 값이 표시되는 텍스트다. 요소는 JavaScript의 함수를 호출하는 역할을 한다. "onclick"을 사용해 "changeColor()" 함수를 호출하게 했다. CSS* { margin: 0; padding: 0; transition: all 0.5s;}#box { wid.. 2024. 8. 23. 이전 1 2 다음
