Leeyanggoo

지난 레이아웃 만들기에서 슬라이드 유형을 만들었습니다. 근데 디자인만 하고 기능을 못 넣었던 게 아쉬워서 어떻게 슬라이드 기능을 구현하는지 알아보고 예제를 만들어봤습니다! 원래 예제는 CSS와 HTML이 적용된 박스들이 커서 바로 적용하지 못했습니다ㅠㅠ.. 그래도 원리를 알아보는 시간이라 생각하면 되겠습니다! CSS를 이용해서 div 쌓기! 1 2 3 먼저 만들 슬라이드 개수만큼 div를 만들고 이미지를 추가했습니다. 그리고 몇 번째 슬라이드인지 확인하는 버튼도 그에 맞게 만들었습니다. 그리고 inner의 width를 100vw를 줘서 한 화면에 하나의 슬라이드만 보이게 하고 float: left로 가로로 나열된 모양을 만들었습니다. section에는 overflow: hidden을 줘서 넘치는 슬라이드..

문제 개수가 많을 때 어떻게 해야 할까? 이전 포스팅에서 객관식 문제를 만들기 위한 코드를 알아봤습니다. 4개의 보기가 있을 때 객체 속의 배열을 불러오기 위해 "querySelectAll()"과 for문을 사용했습니다. 그렇다면 마치 정보처리 기출 문제집처럼 여러 문제가 한 회에 있는 경우라면 어떻게 해야 할까요? . 정답입니다! 땡! 정답 확인하기 설명 . 정답입니다! 땡! 정답 확인하기 설명 . 정답입니다! 땡! 정답 확인하기 설명 이전에 이펙트 세 번째에서 주관식이 세 문제가 있는 HTML 코드를 가져왔습니다. 문제 3개에 이렇게 많은 코드가 나열된다면, 문제가 60개 있으면 어떻게 될까요? 이 코드를 20배 써야 한다면 알아보기도 힘들고 적기도 힘들지 않을까요? 우리는 여러 보기가 있는 객관식 ..

See the Pen Untitled by leeyanggoo (@leeyanggoo) on CodePen.

자바스크립트 테스트 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 01. 결괏값을 작성하시오. ⭕ { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 더보기 1 3 true 02. 다음의 결괏값을 보고 빈칸을 채우시오. ⭕ { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document...

오늘은 사용자가 input 창에 입력하는 값에 따라 결과를 보여주는 검색 이펙트를 만들어 보았습니다. 이번 예제는 if문에 대한 이해와 forEach(), 선택자 모두 모두 중요한 예제기 때문에 이전에 배웠던 개념을 까먹었거나 헷갈린다면 다시 복습하고 오는 것도 좋습니다! if문의 false 조건 기억나십니까? HTML 코드 : class명을 잘 확인하자!! 🤪자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 개수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. JS 코드 : 선택자와 if, forEach()를 잘 이해해보자!! //선택자 co..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 푸터 유형 레이아웃이란? 푸터(footer)는 웹 페이지의 하단에 위치한 영역으로, 보통 사이트 내비게이션, 저작권 정보, 연락처 등과 같은 보조적인 정보를 담고 있습니다. 푸터 유형은 페이지마다 다양하게 제작할 수 있으며 일반적으로는 두 가지 유형이 있습니다. 1. Fixed Footer 고정 푸터는 웹 페이지의 하단에 고정되어 스크롤을 내려도 항상 화면에 보이는 유형입니다. 사용자가 어떤 곳을 보고 있든지 항상 접근할 수 있기 때문에 편리합니다. 하지만 ..

이전의 마우스 이펙트는 자바스크립트의 라이브러리 "GSAP"를 이용해서 좀 더 커서가 부드러운 효과를 만들었습니다. 이제는 쭉 "GSAP"를 적용하는 방향으로 이펙트를 만드려 합니다! 이번에 만들 마우스 이펙트는 조명 효과를 낼 수 있는 기능입니다. //CSS에 저장된 img03 body.img03 { background-image: url(../img/mouseEffect03-min.jpg); } body.bg03::after { background-color: rgba(245, 177, 121, 0.7); } I've never loved myself 단 한번도 스스로를 사랑하지 않았노라 CSS를 적용해서 조명효과를 만들어보자!! #header { z-index: 100; } #footer { z-i..

이전의 첫 번째 마우스 이펙트 포스팅에서는 mouseover를 이용한 마우스 효과를 알아봤습니다! 또한 clientX와 같은 이벤트 객체로 위치 정보를 불러오고, getAtrtibute()를 이용해 코드도 축약해봤습니다. 이번엔 자바스크립트 라이브러리인 "GSAP"를 이용해서 이펙트를 만들어보겠습니다! Have you ever been fiery passion to anyone? 너는 누구에게 한번이라도 뜨거운 사람이었느냐 이번 예제의 HTML 코드입니다. 안도현 시인의 유명한 시 "너에게 묻는다"를 가져와봤습니다. 저번과는 다르게 "mouse__cursor" div가 2개가 있는 걸 보실 수 있습니다. 우리는 커서를 2개 만들어서 하나는 포인터를 다른 하나는 포인터를 따라오는 원을 만들 예정입니다! G..

자바스크립트에서는 마우스의 좌표에 따라 여러 가지 기능을 부여할 수 있습니다. 먼저 마우스 이펙트를 만들기 위해선 어떻게 마우스의 좌표값을 불러오는지 알아야 합니다. 이벤트 객체로 위치 정보를 불러오자! clientX 브라우저 기준 X 좌표 값 clientY 브라우저 기준 Y 좌표 값 offsetX 요소 기준 X 좌표 값 offsetY 요소 기준 Y 좌표 값 pageX 페이지 기준 X 좌표 값 pageY 페이지 기준 Y 좌표 값 screenX 디바이스 기준 X 좌표 값 screenY 디바이스 기준 Y 좌표 값 이벤트 객체는 이벤트가 발생했을 때 생성되며, 이벤트와 관련된 정보를 담고 있습니다. 위의 8가지 속성은 이벤트 객체의 속성이자, 이벤트가 발생한 위치에 대한 정보를 담고 있습니다. Laugh, a..