우당탕탕 코딩생활

Script 오늘 만든 페이지는 스크립트 부분이 가장 중요하고 복잡하기 때문에 스크립트 부분만 살펴보도록 하겠습니다. 이 페이지에서는 데이터를 json으로 불러와서 작업했습니다. const cbtQuiz = document.querySelector(".cbt__quiz"); const cbtOmr = document.querySelector(".cbt__omr") const cbtSubmit = document.querySelector(".cbt__submit") let questionAll = []; // 모든 퀴즈 정보 //데이터 가져오기 const dataQuestion = () => { fetch("json/gineungsaWD2023_01.json") .then(res => res.json())..

main 부분 ☰ 안녕하세요 자바스크립트 어려워요 살려주세요 메인 박스 안에 이미지가 들어갈 박스를 만들어 주고 이미지를 삽입한 뒤 선택자 선택을 위해 클래스 속성을 부여했습니다. 마찬가지로 버튼에도 해주었습니다. Script 부분 이 예제의 주요 목적은 선택자 사용인 것 같아 선택자를 총 3가지 만들어 주었습니다. imageAll은 이미지를, btn1은 버튼을 nav는 카테고리 입니다. document.qrerySelector(".image__wrap .A").addEventListener('mouseenter', () => { imageAll.src = "img2.png"; }); 선택자를 이용해 이미지 변수를 묶어 준 뒤 마우스 관련 이벤트를 발생시키기 위해 addEventListener을 넣었습니..

현재

문자열에 접근하기 지난 포스팅에 이어서 문자열 객체를 알아보겠습니다! 오늘 알아볼 문자열 객체는 이 친구들입니다. charAt() startsWith() endsWith/() charAt() : 문자열. charAt(위치) charAt() 함수는 문자열에서 지정된 위치에 있는 문자를 반환합니다. 이 함수는 문자열의 인덱스를 0부터 시작하며, 지정된 인덱스에 해당하는 문자를 반환합니다. let str = "good morning!"; str.charAt(3) //"d" str[5] //"m" charAt()메서드를 사용해 str문자열에서 인덱스가 3인 요소와 5인 요소를 가져왔습니다. 인덱스는 0부터 시작하기 때문에 각각 d와 m을 불러오게됩니다. startsWith() : 문자열.startsWidth(문..

웹 페이지 디자인 반응형 지금까지 했던 유형들을 합쳐서 반응형으로 작업해보도록 하겠습니다. 사이트 로고 위 코드는 웹 사이트 제작을 하기전 기본적인 구성입니다! 파비콘을 적용해주고 SEO도 작성해주었습니다. body 안에는 main이 자리해있는데 이번 포스팅의 핵심적인 부분입니다. 작업한 사이트의 구성은 아래와 같습니다. 기존의 레이아웃을 가져왔으며 추가된 부분은 미디어 쿼리 부분입니다. 헤더 영역 슬라이드 영역 이미지 타입 영역 이미지 텍스트 영역 카드 타입 영역 배너 타입 영역 텍스트 타입 영역 푸터 영역 오늘 포스팅에서는 헤더와 슬라이드 영역을 제외한 나머지를 분석해보도록 하겠습니다. 먼저 각 타입별로 css페이지를 만들어 주었습니다. 반응형에서는 미디어 쿼리를 사용합니다. 그러므로 각 css페이지..

See the Pen Untitled by siyeon kim (@doitsiyeon) on CodePen.

지난 포스팅에서는 여러개의 문제를 불러와 나열하는 형식이었는데요. 오늘은 답을 맞추면 넘어가는 형식으로 해보겠습니다! HTML 정답🥰 오답😩 다음 문제 퀴즈 만들기 4번과 동일한 형식이지만 객관식 부분을 주석 처리해주었습니다. 한 문제를 풀면 다음 문제로 넘어가야 하는 방식이기에 한 문제 한문제 모두에 객관식을 넣기보다는 자바스크립트에서 태그를 작성해 작업하기 위해 주석처리를 해주었습니다. Script const quizInfo = [ { infoType : "정보처리기능사", infoTime : "2008년 2회", infoNumber : "20080201", infoQuestion : "다음 논리회로에서 출력 f의 값은? ", infoChoice : ["-1", "0", "1/2", "1"], inf..

01. 결과값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 더보기 해설 indexOf() 문자열을 검색하여 주어진 값과 일치하는 첫 번째 위치값(index)를 반환합니다. 문자열이 포함되어 있으면 1을 반환하며 포함되어 있지 않으면 -1을 반환합니다. lastIndexOf() 문자열을 역순으로 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)를 반환합니다. 문자열이 포함되어 있으면 1을 반환..

문자열 객체 이번 포스팅은 자바스크립트의 문자열 객체에 대한 포스팅입니다! 문자열 객체는 문자열 데이터를 다루는데 사용되는 자바스크립트 내장 객체, 이 객체를 사용하면 문자열을 조작하고 검색하며, 변환하고, 분리하고, 합칠 수 있습니다. 문자열 객체는 다양하게 있는데 그 중에서도 자주 사용되는 것들로 알아보도록 하겠습니다. includes() indexof() lastIndexof() match() search() 이 포스팅에서는 includes(), indexof(), lastIndexof() 에 대해 알아보고 match와 search는 다음 포스팅에서 알아보겠습니다 ☺️ ⭐️ includes() : " ".inclouds(검색값, 위치값) includes()는 해당 문자열 포함 여부를 검색하여 불린을..