100S00

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유형 가구 사이트 소개하기 가구 고르는 방법 첫번째 나에게 맞는 인테리어 가구 고르는 방법 두번째 셀프 플래닝 요즘 대세는 미니멀리즘 고객문의 고객지원 자주 묻는 질문 문의하기 배송조회 교환 환불 제품문의 품질 보증 제품 리콜 피드백 부품신청 쇼핑하기 쇼핑하기 헤이오더 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를 이용해 마우스를 따라다니는 효과 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 코드 Quiz 주관식 확인하기 유형 1 2 3 4 5 정답입니다! 오답입니다! 정답 확인하기 esansi@naver.com 퀴즈 4는 퀴즈1,2,3과는 다르게 주관식으로 만듭니다. 객관식 선택형으로 만듭니다. input type 유형 text 일반 텍스트를 입력 받을 수 있습니다. password 패스워드를 입력 받을 수 있도록, 입력 값이 화면에 보여지지 않도록 합니다. submit 태그 내에 입력된 데이터를 서버로 전달해 줍니다. button 버튼을 생성해 줍니다. checkbox 체크박스 형태의 입력을 받을 수 있습니다. radio 라디오 버튼 형태의 입력을 받을 수 있습니다. reset 태그 안의 사용자 입력을 초기화 합니다. radio를 사용해 선택을 입력 받습니다. 4가..

슬라이드 유형 슬라이드 유형이란? 슬라이드 유형은 웹사이트에서 사용되는 이미지나 콘텐츠를 일정한 간격으로 전환하여 보여주는 기능을 말합니다. 슬라이드는 일반적으로 이미지나 텍스트, 동영상 등 다양한 형태의 콘텐츠를 보여줄 수 있습니다. 슬라이드는 주로 웹사이트의 홈페이지나 특정 섹션에서 사용되며, 사용자가 더 많은 정보를 얻을 수 있도록 도와줍니다. 슬라이드는 여러 가지 방식으로 구현될 수 있으며, 자동으로 전환되거나 사용자가 버튼을 클릭하여 전환할 수도 있습니다. 슬라이드는 웹사이트 디자인에서 매우 중요한 역할을 하며, 사용자의 관심을 끌고 더 많은 정보를 제공하는 데 도움을 줍니다. 슬라이드 유형에는 여러가지가 존재합니다. 이미지 슬라이드: 대부분의 사이트에서 사용되는 슬라이드 유형입니다. 여러 장의..

이미지 텍스트 타입 사이트 만들기 혼자 만들어보기 NOTICE 나에게 맞는 인테리어 인테리어를 선택하는 것은 매우 개인적인 결정입니다. 그러나 일반적으로는 다음과 같은 단계를 거쳐 진행됩니다. 1. 스타일 결정하기: 먼저 자신이 선호하는 스타일을 결정해야 합니다. 전통적인, 현대적인, 귀여운, 거친 등 다양한 스타일이 있으며, 이 중 하나를 선택해야 합니다. 2. 공간 파악하기: 다음으로는 공간을 파악해야 합니다. 방의 크기, 형태, 창문의 위치, 문의 위치 등을 고려해야 합니다. 3. 가구 선택하기: 가구를 선택할 때는 공간과 스타일을 고려해야 합니다. 가구의 크기, 색상, 재질 등을 결정할 때도 스타일을 기반으로 선택해야 합니다. 4. 색상 선택하기: 색상은 인테리어에 매우 중요한 역할을 합니다. 색..