분류 전체보기 135

CSS 속성 검색 창을 만들어 보자

css속성 검색하기 코드 1 2 3 4 5 6 자바스크립트 CSS속성 검색하기 indexOf()/ search() 검색하기 CSS속성 갯수 : 개 esansi@naver.com 사용자의 정보를 받기 위해 input박스를 사용 검색하기 안에 저장한 데이터의 갯수를 찾기 위해 span의 선택자를 만들고 searchList안에 있는 데이터이기 때문에 searchList에 length를 사용해 갯 수를 구했다. CSS속성 갯수 : 개 const searchInfo= document.querySelector(".search__info span") searchInfo.innerHTML = searchList.length searchBox.addEventListener("keyup", () => { const use..

마지막에 오는 FOOTER 유형! 만들기!

FOOTER유형 가구 사이트 소개하기 가구 고르는 방법 첫번째 나에게 맞는 인테리어 가구 고르는 방법 두번째 셀프 플래닝 요즘 대세는 미니멀리즘 고객문의 고객지원 자주 묻는 질문 문의하기 배송조회 교환 환불 제품문의 품질 보증 제품 리콜 피드백 부품신청 쇼핑하기 쇼핑하기 헤이오더 Furniture for Business Furniture 모바일 앱 제품 사용 팁/가이드 제품 구매 가이드 서비스 Furniture 서비스 배송 서비스 조립 서비스 설치 서비스 주방 서비스 구매 상담 서비스 인테리어 디자인 서비스 바이백 서비스 Furniture 이야기 Furniture 이야기 브랜드 소개 집에서의 생활 지속가능한 생활 내가 아끼는 집, 나를 아끼는 집 뉴스룸 채용정보 2023 kimhyeonbeen 가구 사이..

마우스 효과 뒷 배경 조명 효과로 보기

마우스를 따라다니는 조명 효과 마우스 효과 3번에선 조명 ? 돋보기 느낌이 나는 효과를 넣어보았습니다. Javasrcipt Mouse Effect03 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Money can't buy happiness, but sitting in a Mercedes is more comfortable than riding a bike and crying. 돈으로는 행복을 살 순 없지만, 자전거에 탄 채로 우는 것보단 벤츠에 앉아 우는 게 편하다. esansi@naver.com 1,2번과 동일하게 cursor를 만든 뒤 커서 좌표를 출력해 주는데 새로운 방법을 사용해서 출력을 하려합니다. getBoundingClientRect() getBoundingClientRect(..

마우스 효과 2 - 마우스를 따라다니는 효과 GSAP편-

마우스 효과 2 GSAP를 이용해 마우스를 따라다니는 효과 Javasrcipt Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 It's not the idea that counts, it's the realization of that idea. 중요한 것은 아이디어가 아니라, 그 아이디어를 실현하는 것이다. esansi@naver.com 마우스 효과 2에선 cursor를 2개를 만들어 따라오는 효과를 GSAP를 사용해 나타낸다 https://greensock.com/ GreenSock GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-perfor..

마우스 효과

Javasrcipt Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 I want a car that makes me want to compete rather than a car that makes me win. 나는 나를 이기게 해주는 차보다는 경쟁하고 싶도록 해주는 차를 원한다. clientX : 0px clientY : 0px offsetX : 0px offset : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px esansi@naver.com transform 속성 scale(), rotate(), translate(), skew() transform:scale() - X 또는 Y축으로 확대/ 축소 scale은 ..

사이트 만들기 텍스트 유형

텍스트 유형 텍스트 유형 사이트는 텍스트가 주요 콘텐츠인 웹 사이트를 말합니다. 이러한 사이트는 주로 글을 중심으로 정보를 제공하고, 이미지나 동영상보다는 텍스트를 통해 정보를 전달합니다. notice 요즘 대세 미니멀리즘 미니멀리즘? 미니멀리즘(minimalism)은 극도로 단순한 것을 추구하는 미술 및 디자인 용어로, 극단적으로 간결하고 단순한 것을 만드는 것을 목표로 합니다. 이는 미술 분야뿐만 아니라 일상생활에도 적용되는 철학이 될 수 있습니다. 더보기 간결함 미니멀리즘의 가치 중 하나는 간결함입니다. 복잡한 것을 단순화하면서도 중요한 것들만을 추려내어 집중하는 것입니다. 이를 통해 삶이 더욱 단순하고 깨끗하며, 중요한 것에 대한 집중력을 높일 수 있다는 것입니다. 더보기 미니멀 인테리어 미니멀 ..

퀴즈 유형 4

퀴즈유형 4 퀴즈유형4 코드 Quiz 주관식 확인하기 유형 1 2 3 4 5 정답입니다! 오답입니다! 정답 확인하기 esansi@naver.com 퀴즈 4는 퀴즈1,2,3과는 다르게 주관식으로 만듭니다. 객관식 선택형으로 만듭니다. input type 유형 text 일반 텍스트를 입력 받을 수 있습니다. password 패스워드를 입력 받을 수 있도록, 입력 값이 화면에 보여지지 않도록 합니다. submit 태그 내에 입력된 데이터를 서버로 전달해 줍니다. button 버튼을 생성해 줍니다. checkbox 체크박스 형태의 입력을 받을 수 있습니다. radio 라디오 버튼 형태의 입력을 받을 수 있습니다. reset 태그 안의 사용자 입력을 초기화 합니다. radio를 사용해 선택을 입력 받습니다. 4가..

오답노트

오답노트 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 정답: 함수가 실행 되었습니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 정답: 함수가 실행 되었습니다. 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } 정답: 73 해설: if(num1 > num2) return num1 else return num2} 10 23를 넣었을때 10은 23..

공부하기 2023.03.17

3.16 코딩 일기

코딩일기 오늘은 함수공부를 했다. 함수란 무엇인가................... 함수는 입력값을 받아 처리한 후, 출력값을 반환하는 일련의 과정을 정의한 것입니다. 보다 수학적인 용어로는, 함수는 하나 이상의 변수(입력값)를 받아서 연산을 수행한 후, 하나의 결과값(출력값)을 반환하는 규칙적인 관계를 의미합니다. 선언적함수,익명함수,매개변수 함수, 리턴 값 함수를 무수히 반복하였고 화살표 함수로 바꾸는 연습도 복습 하였다. //선언적 함수 { function func(){ document.write("함수가 실행되었습니다.1 ") }; func(); } //익명 함수 { const func = function(){ document.write("함수가 실행되었습니다.2 "); }; func(); } /..

공부하기 2023.03.16