본문 바로가기

Effect32

[Game Effect] 게임 이펙트 01 - 뮤직 플레이어 게임 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 게임 이펙트를 만들어보도록 하겠습니다. 컴퓨터 바탕화면과 작동되는 뮤직 플레이어를 만들어보도록 하겠습니다. HTML 소스 보기 HTML 구성은 헤더(제목, 시간)와 메인(바탕화면 아이콘), 푸터(agent, 소스 보기), 뮤직 플레이어로 구성된다. Coding Note's Game World 디스크 뮤직 듣기 샵 폴더 동영상 파일 FIGMA agent 소스 보기 *** MUSIC PLAYER *** Kazoom - Quincas Moreira YouTube Music 0:00 4:00 뮤직 리스트 JavaScript 소스 보기 : 헤더(상단바)에 시간 표시하기 시간, 날짜를 저장할 상수와 시, 분, 초를 저장할 변수를 생성한 .. 2022. 10. 21.

[Search Effect] 검색 이펙트 07 검색 이펙트 만들기 07 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 2분 동안 CSS 속성명을 입력하면 점수가 올라가는 형태의 미니 게임을 만들어 보겠습니다. 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 07의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. 코드 펼쳐보기 Search 01 02 03 04 05 06 07 CSS 속성 검색 이벤트 2분동안 CSS 속성 검색 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 기억이 나지 않으면, 힌트 보기를 한 번 이용할 수 있습니다. 2:00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 개.. 2022. 10. 21.

[Search Effect] 검색 이펙트 06 검색 이펙트 만들기 06 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 06의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬 내림차순 정렬 오름차순 정렬 알파벳순(a~z) 알파벳순(z~a) 랜덤 정렬 전체 속성 개.. 2022. 10. 21.

[Slide Effect] 슬라이드 이펙트 05 - 이미지 슬라이드(버튼, 닷메뉴) 슬라이드 이펙트 05 : 이미지 슬라이드(버튼, 닷메뉴) 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 지난번 슬라이드04에서 넣었던 연속적으로 좌우로 움직일 수 있게 하는 버튼에서 닷메뉴(Dot Menu)를 추가시켜 보도록 하겠습니다. HTML 소스 slider__wrap > slider__img > slider__inner 안에 이미지 5장이 들어간 구조이며, 그 아래의 slider__btn div태그 안에 이미지를 좌우로 슬라이드 할 수 있는 버튼을 만들어두었다. 마지막 slider__dot의 경우 안의 a 태그들을 JS로 출력시키기 위해 주석 처리한다. JAVASCRIPT SLIDER EFFECT 05 슬라이드 이펙트 ⑤ - 이미지 슬라이드.. 2022. 10. 14.

[Parallax Effect] 패럴럭스 이펙트 07 패럴럭스 이펙트 07 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 이번 패럴럭스 이펙트 07에서는 리빌(reveal) 효과 애니메이션을 주겠습니다. HTML 소스 애니메이션을 주고자 하는 이미지와 텍스트 영역에 reveal 클래스값을 준다. · reveal-RTL : 우측에서 좌측으로 리빌 효과 · reveal-TTB : 상단에서 하단으로 리빌 효과 · reveal-BTT : 하단에서 상단으로 리빌.. 2022. 10. 6.

[Search Effect] 검색 이펙트 05 검색 이펙트 만들기 05 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 05의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 .. 2022. 9. 29.

[Parallax Effect] 패럴럭스 이펙트 06 패럴럭스 이펙트 06 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 이번 패럴럭스 이펙트 06 - 텍스트 효과에서는 텍스트가 타이핑하는 형식으로 한글자씩 나타나는 애니메이션을 주겠습니다. HTML 소스 header, parallax__dot(dot 내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크롤탑값)), footer(모달 박스)로 구성된다.. 2022. 9. 29.

[Mouse Efffect] 마우스 이펙트 06 마우스 이펙트 06 : 텍스트 효과 이번 시간에는 마우스 이펙트 - 텍스트 효과를 만들어보도록 하겠습니다. HTML 소스 header, main(마우스 커서 & 이미지 & 명언 & 마우스 인포(좌표값)), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것. JAVASCRIPT MOUSE EFFECT 06 마우스 이펙트 - 텍스트 효과 01 02 03 04 05 06 07 Pain Past Pain Past is pleasure. is pleasure. 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. CSS 소스 .mouse__cursor.active에.. 2022. 9. 29.

[Search Effect] 검색 이펙트 04 검색 이펙트 만들기 04 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 04의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다. 전체 속성 개수 : 0 kde66034@gmail.c.. 2022. 9. 28.

[Mouse Effect] 마우스 이펙트 05 - 기울기 효과 / 글씨 반전 효과 마우스 이펙트 05 : 기울기 효과 / 글씨 반전 효과 이번 시간에는 마우스 이펙트 - 기울기 효과 및 글씨 반전 효과를 만들어보도록 하겠습니다. HTML 소스 header, main(마우스 커서 & 이미지 & 명언 & 마우스 인포(좌표값)), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것. JAVASCRIPT MOUSE EFFECT 05 마우스 이펙트 - 기울기 효과 / 글씨 반전 효과 01 02 03 04 05 06 07 I never dreamed about success, I worked for it 난 결코 성공에 대해 꿈꾸지 않았다, 나는.. 2022. 9. 28.

[Mouse Effect] 마우스 이펙트 04 - 이미지 효과 마우스 이펙트 04 : 이미지 효과 이번 시간에는 GSAP를 이용하여 이미지 영역 내부에서만 마우스 커서가 바뀌고 마우스 위치에 따라 사진도 같이 미세하게 움직이는 효과를 만들어보도록 하겠습니다. HTML 소스 header, main(마우스 커서 & 이미지 & 명언 & 마우스 인포(좌표값)), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것. JAVASCRIPT MOUSE EFFECT 04 마우스 이펙트 - 이미지 효과 01 02 03 04 05 06 07 &lt/div> I never dreamed about success, I worked for .. 2022. 9. 22.

[Mouse Effect] 마우스 이펙트 03 - 조명 효과 마우스 이펙트 03 : 조명효과 이번 시간에는 GSAP를 이용하여 마우스 커서에 조명효과를 입혀 보도록 하겠습니다. HTML 소스 header, main(마우스 커서 & 명언), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것. JAVASCRIPT MOUSE EFFECT 03 마우스 이펙트 - 조명효과 01 02 03 04 05 06 07 The future depends on what we do in the present. 미래는 현재 우리가 무엇을 하는가에 달려 있다. CSS 소스 body에 사용된 이미지와 동일한 이미지를 마우스 커서 영역에 ba.. 2022. 9. 22.

[Parallax Effect] 패럴럭스 이펙트 05 - 이질감 효과 패럴럭스 이펙트 05 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 이번 패럴럭스 이펙트 05 포스팅에서는 스크롤 할 때 이질적인 느낌을 줘보도록 하겠습니다. HTML 소스 header, parallax__dot(dot 내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크롤탑값)), footer(모달 박스)로 구성된다. JAVASCRIPT PAR.. 2022. 9. 20.

[Slide Effect] 슬라이드 이펙트 04 - 좌우 이동 버튼 만들기 슬라이드 이펙트 04 : 좌우 이동 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 슬라이드를 연속적으로 좌우로 움직일 수 있게 하는 버튼을 추가해보겠습니다. HTML 소스 slider__wrap > slider__img > slider__inner 안에 이미지 5장이 들어간 구조이며, 그 아래의 slider__btn div태그 안에 이미지를 좌우로 슬라이드 할 수 있는 버튼을 만들어두었다. JAVASCRIPT SLIDER EFFECT 04 슬라이드 이펙트 ④ - 좌로 움직이기(연속적으로) 01 02 03 04 05 06 07 prev next CSS 소스 기존의 슬라이드 효과에서 쓰던 CSS 코드에 버튼용(slider__btn) 코드를 추가하였다... 2022. 9. 18.

[Parallax Effect] 패럴럭스 이펙트 04 - 부드럽게 나타내기 패럴럭스 이펙트 04 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 이번 패럴럭스 이펙트 04 포스팅에서는 지난 패럴럭스 이펙트 1, 2, 3보다 더욱 자연스럽고 스무스하게 사진과 명언이 등장하도록 애니메이션을 줘 보도록 하겠습니다. HTML 소스 header, parallax__dot(dot 내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크.. 2022. 9. 18.

[Mouse Effect] 마우스 이펙트 02 - GSAP 마우스 이펙트 02 : GSAP 이번 시간에는 자바스크립트와는 살짝 다른 GSAP를 이용하여 마우스 이펙트를 만들어보도록 하겠습니다. HTML 소스 header, main(마우스 커서 2개 & 명언), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것. JAVASCRIPT MOUSE EFFECT 02 마우스 이펙트 - 마우스 따라다니기(GSAP) 01 02 03 04 05 06 07 The future depends on what we do in the present. 미래는 현재 우리가 무엇을 하는가에 달려 있다. CSS 소스 마우스 커서 두 개(mo.. 2022. 9. 18.

[Parallax Effect] 패럴럭스 이펙트 03 - 메뉴바 숨겼다 나타나게 하기 & TOP 버튼 패럴럭스 이펙트 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 지난 패럴럭스 01 포스팅에서 만든 틀을 그대로 유지한 채 메뉴 바를 숨겼다 나타나게 하는 기능을 추가하겠습니다. 또한 페이지 최하단으로 내려가면 TOP 버튼이 나타나고, TOP 버튼을 누르면 페이지 최상단으로 올라가게 하는 이펙트도 추가해보도록 합시다. HTML 소스 header, parallax__dot(dot 내비게이션), ma.. 2022. 9. 9.

[Parallax Effect] 패럴럭스 이펙트 02 - 사이드바 패럴럭스 이펙트 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 지난 패럴럭스 01 포스팅에서 내비게이션 형태만 사이드바 형식의 dot으로 바꿔보았습니다. HTML 소스 header, parallax__dot(dot 내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크롤탑값)), footer(모달 박스)로 구성된다. JAVASCRIPT PAR.. 2022. 9. 8.

[Parallax Effect] 패럴럭스 이펙트 01 패럴럭스 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. HTML 소스 header, parallax__nav(내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크롤탑값)), footer(모달 박스)로 구성된다. JAVASCRIPT PARALLAX EFFECT 01 패럴럭스 이펙트 01 02 03 04 05 06 07 메뉴1 메뉴2 메.. 2022. 9. 6.

[Mouse Effect] 마우스 이펙트 01 마우스 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 마우스 이펙트를 만들어보도록 하겠습니다. HTML 소스 보기 header, main(명언 & mouseInfo(마우스 커서 좌표값 표시)), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것. JAVASCRIPT MOUSE EFFECT 01 마우스 이펙트 - 마우스 따라다니기 01 02 03 04 05 06 07 The future depends on what we do in the present. 미래는 현재 우리가 무엇을 하는가에 달려 있다. clientX : 0px c.. 2022. 9. 5.

[Slide Effect] 슬라이드 이펙트 03 - 좌로 움직이기(연속적으로) 슬라이드 이펙트 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 2초마다 다음 사진으로 슬라이드 되는 효과이며, JS 코드를 보여드리겠습니다. HTML, CSS 코드는 원본 소스 보기 버튼을 눌러 확인해주세요. 자, 그럼 시작해볼까요? 01. 변수와 상수(const/let) 선언하기 필요한 만큼의 변수와 상수를 선언해주도록 한다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slid.. 2022. 9. 1.

[Slide Effect] 슬라이드 이펙트 02 - 좌로 움직이기 슬라이드 이펙트 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 2초마다 다음 사진으로 슬라이드 되는 효과이며, JS 코드와 GSAP, jQuery 코드 세 가지를 보여드리겠습니다. HTML, CSS 코드는 원본 소스 보기 버튼을 눌러 확인해주세요. 자, 그럼 시작해볼까요? JS 코드 슬라이드 이펙트 02의 JS 소스와 부연 설명(주석 처리됨)이다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySele.. 2022. 8. 29.

[Slide Effect] 슬라이드 이펙트 01 슬라이드 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. HTML과 자바스크립트 소스를 설명드리며 CSS는 복잡해지기 때문에 CSS 소스 보기 버튼을 클릭하여 봐 주시기 바랍니다. 자, 그럼 시작해볼까요? HTML 소스 보기 : 모달 박스 슬라이드 이펙트 01의 HTML 소스와 부연 설명(주석 처리됨)이다. JAVASCRIPT SLIDER EFFECT 01 슬라이드 이펙트 ① - 트랜지션 효과 01 02 03 04 05 06 07 소스 보기 JavaScript HTML CSS // 선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); // 알.. 2022. 8. 25.

[Quiz Effect] 퀴즈 이펙트 06 - 슬라이드 형식 퀴즈 만들기 06 : 객관식(여러 문제) 유형 : 슬라이드 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 문제 정보·선택자 생성 문제 정보를 배열 안의 객체 형태로 작성해준다. 다른 퀴즈 효과와는 달리 answerResult에 번호가 아닌 answerChoice에 있는 정답 그 자체를 그대로 똑같이 입력해준다. 필요한 const 상수를 생성해준 다음 연결해주는 작업까지 마.. 2022. 8. 24.

[Quiz Effect] 퀴즈 이펙트 05 - 2013년 4회 웹디자인기능사 기출문제 풀어보기 퀴즈 만들기 05 : 2013년 4회 웹디자인기능사 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! JS 소스 다섯번째 객관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. 기존 문제 풀이 기능에 총 문제수와 정답 개수, 총 점수, 합격 여부 등을 표시하는 기능을 추가하자. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼.. 2022. 8. 24.

[Search Effect] 검색 이펙트 03 검색 이펙트 만들기 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 03의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 charAt()를 이용하여 검색하기 CSS 속성 첫 글자 검색하기 a b c d e f g h i j k l m n o p q r s t u v w x y z 전체 속성 개수.. 2022. 8. 22.

[Search Effect] 검색 이펙트 02 검색 이펙트 만들기 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 02의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 indexOf()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드, 기타 등등 유형별로 검색해보세요. 전체 속성 개수 : 0 accent-c.. 2022. 8. 17.

[Search Effect] 검색 이펙트 01 검색 이펙트 만들기 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 HTML 태그와 CSS 속성, JavaScript 실행문들을 검색창에 키워드를 입력해서 설명을 볼 수 있는 페이지를 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 01의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 HTML CSS JavaScript 02 03 04 05 06 indexOf()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 a : .. 2022. 8. 16.

[Quiz Effect] 퀴즈 이펙트 04 - 객관식(한 문제) 유형 퀴즈 만들기 04 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 객관식 유형 네 번째 주관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것. // 선택자 // quizChoice와 quizSelect는 총 4개이므로 뒤에 All을 붙여준다. const quizT.. 2022. 8. 8.

[Quiz Effect] 퀴즈 이펙트 03 - 주관식(여러 문제) 유형 퀴즈 만들기 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 주관식(여러 문제) 유형 세 번째 주관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것. // 선택자 : 상수 const를 필요한 만큼 선언한 다음 HTML 영역의 div, 시맨틱 태그 등의 Cla.. 2022. 8. 5.

이전 1 2 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바