코딩공부

슬라이드 이펙트의 기본적이 효과를 만들어 보겠습니다. css 슬라이드 이펙트를 만들때 필요한 css입니다. reset.css @import url('https://webfontworld.github.io/locus/LocusSangsang.css'); @import url('https://webfontworld.github.io/Healthset/HealthsetGothic.css'); @import url('https://webfontworld.github.io/suncheon/Suncheon.css'); @import url('https://webfontworld.github.io/leferi/LeferiBase.css'); @import url('https://webfontworld.github.i..

어제에 이어 새로운 기능을 추가해보았습니다. 추가된 HTML 당신의 이름은 입니다. 당신은 웹디자인 기능사 시험을 선택했습니다. 시작하기 추가된 script 선택자 const cbt = document.querySelectorAll(".cbt"); const cbtViewSubject = document.querySelector(".cbt__view .subject"); const cbtViewName = document.querySelector(".cbt__view .name"); const cbtHeader = document.querySelector(".cbt__header h2"); const cbtStart = document.querySelector(".cbt__start"); const cb..

오늘은 어제 만든 유형에서 조금 더 추가하여 만들어 보았습니다. HTML Quiz 객관식 확인 CBT 카드 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 제출하기 59분 10초 수험자 : 이승연 전체 문제수 : 0문항 남은 문제수 : 0문항 기능사 시험 도전하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 ..

오늘은 지금까지 했던 퀴즈유형들과 다르게 cbt 형식의 유형을 만들어보도록 하겠습니다. HTML Quiz 객관식 확인 CBT 카드 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 수험자 : 이승연 전체 문제수 : 60문항 남은 문제수 : 59문항 제출하기 59분 10초 이번에는 CBT유형과 OMR유형으로 만들었으므로 dog__wrap 대신 메인에 quiz__wrap__cbt를 만들어 주었습니다. cbt__quiz안 요소들을 주석처리 한 이유는 같은 문제를 스크립트로 다르게 표현 해 줄 것이기 때문에 같다는 의미로 주석처리 해두었습니다. omr도 마찬가지 입니다. css /* cbt 유형 */ .quiz__wrap__cbt { padding: 0 20px; font-family: 'P..

문제 연습 1 이미지가 마우스 오버를 했을 때 첫번째 이미지에서 두번째 이미지가 나오는 소스를 작성해보세요. 마우스를 이미지 위에 올리면 이미지가 바뀝니다! HTML코드 마우스 오버 이미지 변경 script 먼저 선택자로 이미지 두 개를 각각 선택합니다. 그리고 처음에 두번째 이미지가 나타나지 않도록 스타일에 display = "none";을 주었습니다. 선택자로 이미지를 모두 선택하고 forEach문을 통해 마우스를 오버했을때 두번째 이미지가 나타나도록 첫번째 이미지를 display ="none"으로 가리고 두번째 이미지는 display = "block"을 주었습니다. 그리고 마우스가 빠졌을때 효과가 없는 원래의 이미지로 돌아가야 하므로 반대로 주었습니다 이렇게 하면 위와 같은 페이지가 완성됩니다. 문..

문자열이란? 간단한 텍스트를 처리하기 위한 유형입니다. 에크마스크립트2015부터 문자열과 관련된 다양한 함수가 생겼습니다. 원시 유형과 객체 단순히 값만 가지고 있을 경우 '원시 유형'이고, 프로퍼티와 메서드를 가지고 있을 경우 '객체'입니다. 자바스크립트에서는 원시 유형이여도 프로퍼티와 메서드를 사용할 수 있습니다. let str = "hello" str.length//5 위와 같이 변수에 문자열을 할당한 후 length라는 프로퍼티를 사용하면 str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다. 문자열의 길이 length 프로퍼티 문자열의 길이를 찾을 때는 배열에서처럼 length 프로퍼티를 사용합니다. //기본형 문자열.length 문자열에서 문자..

오늘은 저번처럼 객관식 문제가 여러 개 있는 유형이지만, 저번과 다르게 문제가 한문제 한문제 넘어가는 유형을 만들어 보겠습니다. CSS .quiz__answer .next { background-color: #9be8ff; border: 6px ridge #cacaca; width: 100%; font-family: 'Suncheon'; padding: 10px 20px; font-size: 22px; cursor: pointer; transition: all 0.3s; font-weight: bold; } .quiz__answer .next:hover { background-color: #7cd5ff; 새로 추가된 CSS부분 입니다. 그동안 만들었던 정답확인 버튼과 다른 버튼이므로 quiz__answe..

오늘은 저번에 만든 퀴즈 이펙트 4번처럼 객관식 유형을 선택할 수 있는 퀴즈 유형을 만들겁니다. 4번을 이용해서 오늘은 더 많은 문제를 선택할 수 있는 유형을 만들어보도록 하겠습니다. 코드 Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 5 1346zany@gmail.com 4번에 있는 코드 구성과 똑같으므로 4번을 그대로 가져왔습니다. 다만, 이번엔 여러 개의 퀴즈를 만들것이므로 main부분이 아닌 script에 퀴즈 정보들을 넣을 것 입니다. 그래서 quiz__wrap안에 있는 부분들은 모두 주석처리 해주었습니다. CSS 각각의 CSS를 참고해주세요. reset.css @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'..

오늘은 위와 같은 서치 이펙트를 만들어 보려고 합니다. 만들기 전에 먼저 개념을 설명하고 넘어가겠습니다! Search Effect란? 웹 사이트나 애플리케이션에서 검색 기능을 개선하기 위해 사용되는 기술 중 하나입니다. 일반적으로 검색어와 일치하는 결과를 실시간으로 보여주는 것을 말합니다. 전체 구조 1 2 3 4 5 6 🤭자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설..

오늘은 흐릿한 화면에서 마우스 커서에 따라 뒷배경이 보이는 마우스 이펙트를 넣어주는 법에 대해 설명해보려고 합니다. 완성 예시입니다. 전체 구조 JavaScript Mouse Effect03 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Great hopes make great men. 큰 희망이 큰 사람을 만든다. CSS는 전 글들을 참고해주세요 body JavaScript Mouse Effect03 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Great hopes make great men. 큰 희망이 큰 사람을 만든다. 이번엔 뒷배경을 보이게 해줄 것 이므로 span 태그는 넣지 않았습니다! style header에 z-index 값을 넣어 커서 뒤에 묻히지 않도록 설정해줍니다. m..