안녕하세요 오늘은 마우스 효과를 만들어보겠습니당 ! 새로운 메서드와 속성들이 나왔으니 꼼꼼하게 정리해볼게요~ 자바스크립트 마우스 이펙트(첫 번째) 만들기 css 세팅해주기 reset.css 설정 @import url('https://webfontworld.github.io/pretendard/Pretendard.css'); @import url('https://webfontworld.github.io/goodchoice/Jalnan.css'); @import url('https://webfontworld.github.io/sunn/SUIT.css'); @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); @import url('ht..

오늘은 텍스트 타입의 레이아웃을 만들어보겠습니다~!! 텍스트 유형 페이지 만들기 피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다. 기본 CSS 리셋값 설정해주기 CSS리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠?? 텍스트 섹션 구성해주기 notice 향수 종류에 따른 지속력 오드퍼퓸(EDP) 오드퍼퓸(EDP)은 향수의 농도가 가장 높은 제품 중 하나로, 향수 성분의 농도가 약 15-20% 정도입니다. 따라서, 오드퍼퓸은 다른 향수에 비해 더 진하고 집중적인 향을 가지며, 오래 지속됩니다. 더보기 오드코롱(EDC) 오드코롱(Eau de Cologne)은 가장 가벼운 향수 중 하나이며, 향수..

오늘은 퀴즈 이펙트 네 번째를 작업해보겠습니다! 저번에는 여러 개의 주관식 확인하기 유형이였다면 이번엔 객관식 확인하기 유형입니다. 자바스크립트 퀴즈 이펙트(네 번째) 만들기 영역 지정해주기 정답입니다! 틀렸습니다! 정답 확인하기 세 번째 유형과는 다르게 이번엔 보기가 존재하므로 quiz__choice라는 영역을 만들어줍니다. 그리고 보기를 4개를 설정해줍니다! name과 value값도 같이~~ 선택자 만들기 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title"); const quizQuestion= quizWrap.querySelector(".quiz__qu..

역대급 난이도. ㅋ 자바스크립트 시험 오답노트? 레츠기릿. 헷갈리는 문제가 넘 많았지만 어쨋든 공부 열심히 안 했으니까.. 오답노트를 써보며 다시 열공해봅시다! 자바스크립트 오답노트 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } ✔답 확인하기 함수가 실행되었습니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } ✔답 확인하기 함수가 실행되었습니다. 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i

선생님의 넓은 아량으로 오늘의 숙제는 코딩일기 입니당 ^___^ 코딩일기 오늘 오전엔 자바스크립트 함수 중 새로운 걸 배우고, 또 복습하는 시간을 가졌다! 함수 유형 네 가지는 어느 정도 알았는데 익.매.리 (익명함수 매개변수 함수 리턴값 함수)가 어려웠다... 그래도 옆에 앉은 나의 환상의 짝꿍 미스 CHEON과 같이 공부를 하면서 하니 더 잘 외워지고 이해도 잘 되는 거 같았다! 물론 오늘 배운 함수 종류는 뭔지 잘 모르겠지만 ㅎ. 내일 시험에는 객체리터럴까지만 나온다니까 오늘 집 가서 빡공해야지! 제발 밥 먹고 소마냥 퍼질러 자지말고,,.ㅋ 함수 함수 유형 : 객체생성자 함수 객체 생성자 함수는 객체를 생성하기 위해 사용되는 함수입니다. 객체 생성자 함수는 일반 함수와 구분하기 위해 대문자로 시작하..

오늘은 슬라이드 타입의 레이아웃을 만들어보겠습니다~!! 슬라이드 유형 페이지 만들기 피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다. 기본 CSS 리셋값 설정해주기 CSS 리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다.초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠?? 이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다. 슬라이드 섹션 구성해주기 메인 슬라이드 영역 event Custom making 향기의 원료, 어울리는 향기의 조합, 만드는 방법, 추후 보관 방법 등등 커스텀 향수에 관한 모든 정보를 공유합니다. 자세히보기 상담신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 ..

오늘은 이미지텍스트 타입의 레이아웃을 만들어보겠습니다~!! 이미지텍스트 유형 페이지 만들기 피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다. 기본 CSS 리셋값 설정해주기 CSS 리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다.초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠?? 이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다. 이미지텍스트 섹션 구성해주기 NOTICE 향수의 다양한 원료들 향수의 원료는 여러 가지가 있습니다. 이 중 몇 가지를 예로 들어보면 다음과 같습니다. 꽃: 장미, 라벤더, 철쭉, 백합, 오렌지 꽃 나무: 삼나무, 향나무, 피나무, 쟁반나무, 코나쥬 향신료: 고추, 크로뮴, 페퍼민트, 카르다몸..

오늘은 퀴즈 이펙트 세 번째를 작업해보겠습니다! 저번에는 정답인지 오답인지 판별하는 효과였다면 이번엔 여러 개의 주관식을 확인해보는 효과를 해보겠습니다! 두 번째에 했던 효과와 거의 흡사하지만 이번엔 여러 개가 있어 다중선택자를 사용해보겠습니다. 자바스크립트 퀴즈 이펙트(세 번째) 만들기 영역 지정해주기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 두 번째와 했던 것과는 다르게 문제가 3개이므로 quiz 영역을 복사해 3개로 만들어줍니다. 그리고 이번에 추가된 것은 맞췄을 시, 정답 혹은 오답인지 애니메이션 효과를 주기 위해 dog__wrap 밑부분에 영역을 넣어줍니다. 선택자 만들기 const quizWrap = doc..