퀴즈이펙트 7번 보충 설명!
·
코딩/JAVASCRIPT
자바스크립트 퀴즈 이펙트(일곱 번째) 만들기_보충 저번에 이어서 스크립트를 마저 진행해보겠습니다. 스크립트_보기 체크, omr 체크 // 보기 체크 const answerSelect2 = (elem) => { const answer = elem.value; const answerNum = answer.split("_"); const select = document.querySelectorAll(".cbt__omr .omr"); // 전체 문항 수 100개 const label = select[answerNum[0]].querySelectorAll("input"); // 보기 4개 label[answerNum[1]-1].checked = true; const answerInputs = document.qu..
퀴즈 이펙트(일곱 번째)를 만들어봅시다!
·
코딩/JAVASCRIPT
오늘은 퀴즈 유형 중 CBT 유형을 만들어보겠습니다! 자바스크립트 퀴즈 이펙트(일곱 번째) 만들기 구조 짜기 2007년 1회 정보처리기능사 기출문제 1. 객체지향 프로그램에서 데이터를 추상화하는 단위는? 클래스 메소드 상속 메시지 객체지향언어는 이다.객체지향언어는 이다.객체지향언어는 이다.객체지향언어는 이다.객체지향언어는 이다.객체지향언어는 이다. 객체지향언어 수험자 : 여다슬 전체 문제수 : 60문항 남은 문제수 : 59문항 01 1 2 3 4 59분 10초 제출하기 quiz__wrap에 cbt 유형으로 만들어 아예 새롭게 구조를 짜보겠습니다. quiz__wrap__cbt에 cbt__header, cbt__conts, cbt__aside로 크게 나눠주겠습니다. CSS는 영역에 맞춰 속성을 설정해줍니다...
콩닥콩닥 하트 애니메이션 ><
·
코딩/애니메이션
See the Pen Untitled by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen.
웹디자인 기능사 실기 연습 해봅시다!(레이아웃 짜기)
·
코딩/웹페이지
안녕하세요! 오늘은 웹디자인 기능사 실기 연습, 레이아웃을 구성해보겠습니다! 구조를 짜고 CSS 설정하는 연습이 되겠죠!! 웹디자인 기능사 실기 이번에 연습해 볼 화면은 요겁니다! 포토샵으로 필요한 이미지 따오기 포토샵을 이용해 각각 이미지를 자른다음, 새로운 레이어에 복사 붙여넣기 해서 저장해줍니다. 이때, 그냥 jpg로 저장해주기 보단 웹용으로 저장해야 파일 사이즈 등을 확인할 수 있습니다. 포토샵에서 웹용으로 저장하는 단축키: Alt + Shift + Ctrl + S 이 이미지들은 크기가 적당해 최적화 진행을 안해도 괜찮지만, 파일이 큰 이미지들은 꼭 이미지 최적화 작업을 거쳐주셔야합니당. 이미지 최적화 사이트 : https://imagecompressor.com/ko/ 이렇게 img 폴더에 저장해..
자바스크립트 오답노트를 작성해보아용~
·
코딩/오답노트,마무리 문제
자바스크립트 오답노트 틀린 문제는 총 3개! 오답노트를 잘 작성해봅시다~ 01. 다음의 결괏값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 💎정답💎 0 02. 다음의 결괏값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } 💎정답💎 20, 21 03. 결괏값을 작성하시오. { function func(){ let a = []; for(i=1; i
자바스크립트 마무리 문제를 풀어봅시다!
·
코딩/오답노트,마무리 문제
오늘은 자바스크립트 이벤트 객체와 관련된 마무리 문제들을 풀어보겠습니다. 자바스크립트 마무리 문제1 이미지1에 마우스 포인터를 올려놓았을 때 이미지 2로 바뀌고, 다른 곳으로 이동할 때는 이미지1로 다시 돌아오는 이벤트를 만들어보겠습니다. 길라잡이 - img태그에는 id나 xlass가 없습니다. 태그 이름을 사용하거나 2개 이상의 선택자를 연결한 후 이미지를 가져와서 변수에 저장합니다. -마우스 포인터를 이미지의 위에 올려놓을 때는 mouseover 이벤트가, 마우스 포인터를 다른 곳으로 이동할 때는 mouseout 이벤트가 발생합니다. -이벤트가 발생했을 때 이미지의 src 속성값을 바꿉니다. 구조 짜기 마우스 오버하면 이미지 바꾸기 구조는 간단하게 div를 만들어 이름을 container라고 지정해줍..
문자열에 대해 알아보자!
·
코딩/JAVASCRIPT
자바스크립트 문자열 간단한 텍스트를 처리하기 위해서는 문자열을 자주 사용하는데 오늘은 문자열을 다루는 방법에 대해 살펴보겠습니다! ❣️문자열에 접근하기 원시 유형과 객체 let str = "hello" str.length //s 자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 래퍼객체라고 부릅니다. number나 boolean, string과 같은 원시 유형에서 프로퍼티나 메서드를 사용하면 일시적으로 원시 유형을 해당 객체로 변환합니다. 그리고 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사라져버립니다. 필요할 때만 임시로 객체로 바꿔..
사이트 만들기1
·
코딩/웹페이지
이제까지 한 레이아웃을 합쳐보겠습니다. 일단 site1에 index.html을 만들어 기본 셋팅을 해주겠습니다. 사이트 만들기 1 index.html 기본 셋팅 head 안쪽에 SEO(검색 엔진 최적화), 파비콘, CSS를 연동시켜 기본 셋팅을 해주겠습니다. 파비콘은 경로에 맞게 저장을 해주셔야 합니다. SEO? SEO란 검색 엔진 최적화(Search Engine Optimization)의 약어로, 웹사이트를 검색 엔진에서 노출시키기 위한 기술적인 작업을 말합니다. 검색 엔진은 웹사이트의 컨텐츠를 수집하고 분석하여 검색 결과에 반영하는데, 이때 SEO는 검색 엔진의 알고리즘에 맞추어 웹사이트의 구조, 컨텐츠, 키워드 등을 최적화하여 검색 엔진에서 상위 노출되도록 하는 것입니다. 이를 통해 검색 엔진에서 ..
다쭐◠‿◠