EFFECT34 슬라이드 이펙트 - 지금까지 한 것들 다 합치기! 슬라이드 이펙트 : 버튼 및 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이 이번 슬라이드 이펙트는 지금까지 한 모든 것을 한 번 합쳐봤습니다. HTML 각 슬라이드 형태에 맞는 이미지를 넣기 위해 각각 이미지를 넣어줬습니다. 또한 스크립트를 짤 때, 그에 맞는 class 이름을 지정해주고 dot도 마찬가지로 형태로 진행하기 위해 html을 구성하였습니다. 주석 표시한 것들은 스크립트에서 적용한 것들 입니다. HTML CODE 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS css는 기존에 앞 슬라이드 css와는 비슷하지만. 새로 dot을 작동시킬 때 적용되는 css를 구성하였습니다. dot에 스타일은 자기가 원하는 형태로 코드를 적용해주시면 됩니다. CSS CODE /* s.. 2022. 10. 23. 슬라이드 이펙트 - 버튼 및 닷메뉴, 무한으로 움직이기 슬라이드 이펙트 : 버튼 및 닷메뉴, 무한으로 움직이기 이번 슬라이드 이펙트는 버튼 클릭시 하단에 닷메뉴 작용과 무한으로 움직이게 코딩해봤습니다. HTML 각 슬라이드 형태에 맞는 이미지를 넣기 위해 각각 이미지를 넣어줬습니다. 또한 스크립트를 짤 때, 그에 맞는 class 이름을 지정해주고 dot도 마찬가지로 형태로 진행하기 위해 html을 구성하였습니다. 주석 표시한 것들은 스크립트에서 적용한 것들 입니다. HTML CODE 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS css는 기존에 앞 슬라이드 css와는 비슷하지만. 새로 dot을 작동시킬 때 적용되는 css를 구성하였습니다. dot에 스타일은 자기가 원하는 형태로 코드를 적용해주시면 됩니다. CSS CODE /* slid.. 2022. 10. 23. 검색 이펙트 - 2분 동안 CSS속성 입력하기 검색 이펙트 : 2분 동안 CSS속성 입력하기 이번에는 2분 동안 CSS속성을 입력하는 게임을 만들어봤습니다. HTML 이번 HTML 구조는 스크립트를 적용해 줄 각 클래스 이름을 정해주고 또 게임 느낌나게 애니메이션을 추가해줬습니다. HTML CODE CSS 속성 검색 이벤트 2분동안 CSS 속성 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 기억이 나지 않는다면 힌트보기를 세 번 이용하실 수 있습니다. 02 : 00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 CSS 서치는 다 똑같은 형태의 css입니다. 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. 앞선 검색 이펙트들과 거의 동일한 형태입니다. CSS va.. 2022. 10. 23. 게임 이펙트 - 뮤직플레이어.. 그 등등? 게임 이펙트 및 뮤직 플레이어를 만들어보자! 게임 느낌이 나는 이펙트 효과와 함께 뮤직 플에이어를 한 번 만들어봤습니다. GAME AND MOUSE HTML 스크립트를 적용해 줄 코드로 짜주시고, 또 거기에 맞는 class 이름을 적어주세요. GAME AND MOUSE HTML CODE STAR SIX SHOP FILE MOVIE AUDIO MUSIC PLAYER HTML 스크립트를 적용해 줄 코드로 짜주시고, 또 거기에 맞는 class 이름을 적어주세요.\ 각각 주석표시는 스크립트로 적용해주는 코드~ MUSIC PLAYER HTML CODE MUSIC PALYER LAKEY INSPIRED Blue Boi 00 : 00 04 : 00 MUSIC LIST GAME BACKGROUND CSS 이건 어디에서.. 2022. 10. 23. 슬라이드 이펙트 - 버튼 및 닷메뉴 슬라이드 이펙트 : 버튼 및 닷메뉴 이번 슬라이드 이펙트는 버튼 클릭시 하단에 닷메뉴도 작동하는 형태로 코딩해봤습니다.. HTML 각 슬라이드 형태에 맞는 이미지를 넣기 위해 각각 이미지를 넣어줬습니다. 또한 스크립트를 짤 때, 그에 맞는 class 이름을 지정해주고 dot도 마찬가지로 형태로 진행하기 위해 html을 구성하였습니다. HTML CODE prev next CSS css는 기존에 앞 슬라이드 css와는 비슷하지만. 새로 dot을 작동시킬 때 적용되는 css를 구성하였습니다. dot에 스타일은 자기가 원하는 형태로 코드를 적용해주시면 됩니다. CSS CODE /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; alig.. 2022. 10. 23. 검색 이펙트 - sort(), reverse()를 이용해 다양한 속성을 알아보자! 검색 이펙트 : sort(), reverse() 이번에는 메서드 종류인 sort(), reverse()를 이용해 검색 기능을 가진 이펙트를 코딩해봤습니다. HTML 이번 HTML 구조는 스크립트를 적용해 줄 각 버튼을 만들어줍니다. 뭐..반대, 내림, 오름, 알파..등등 여러가지가 있네요..? HTML CODE sort(), reverse()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 반대로 정렬하기 내림차순 정렬하기 오름차순 정렬하기 알파벳순 (a~z) 알파벳순 (z~a) 랜덤 정렬하기 전체 속성 갯수 : 0 CSS 서치는 다 똑같은 형태의 css입니다. 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. 앞선 검색 이펙트들과 거의 동일한 형태입니다. CSS var() 함수를 사용하.. 2022. 10. 23. 페럴랙스 이펙트의 리빌 효과를 알아보자! 페럴랙스 이펙트 : 리빌 효과 이번에는 페럴랙스 이펙트 중에 리빌 효과를 넣는 방법을 코딩해봤습니다. HTML HTML 코드는 사용해 줄 섹션 구간을 나눠주고 CSS와 스크립트를 이용하기위해 각각에 class로 이름을 지정해줍니다. 이번에는 리빌 효과를 적용하기 위해서 각 적용할 구간에 reveal 클래스 이름을 집어넣어주세요! 텍스트는 자신이 좋아하는 말이나..명언을...? 집어넣어주세여.. HTML CODE 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6.. 2022. 10. 23. 검색 이펙트 - filter()를 이용해 속성의 중요도를 알아보자! 검색 이펙트 : filter() 이번에는 배열 메서드인 filter()를 이용해 검색 기능을 가진 이펙트를 코딩해봤습니다. HTML HTML 구조는 언제나와 같이 CSS와 스크립트를 사용하기 위한 각각 맞는 클래스 이름을 지정해줍니다. HTML CODE filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 전체 속성 갯수 : 0 CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. 앞선 검색 이펙트들과 거의 동일한 형태입니다. CSS var() 함수를 사용하여 색 지정 및 변경을 하기 편하도록 해줬습니다. var() : 함수로 정의해둔 속성을 불러와 사용가능하다. : .. 2022. 9. 29. 페럴랙스 이펙트의 텍스트 효과를 알아보자! 페럴랙스 이펙트 : 텍스트 효과 이번에는 페럴랙스 이펙트 중에 텍스트 효과를 넣는 방법을 코딩해봤습니다. HTML HTML 코드는 사용해 줄 섹션 구간을 나눠주고 CSS와 스크립트를 이용하기위해 각각에 class로 이름을 지정해줍니다. 텍스트는 자신이 좋아하는 말이나..명언을...? 집어넣어주세여.. HTML CODE 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 아니지만 세상은 돈으로 굴러간다. 07 section7 사회는 널 기다려주지.. 2022. 9. 29. 마우스 이펙트의 텍스트 효과를 알아보자! 마우스 이펙트 : 텍스트 효과 이번에는 마우스에 텍스트 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML 코드는 이번엔 조큼 다릅니나. 이건 약간의 편법을 썼기에 기존 큰 네모를 반으로 나누고 그 위에 텍스트를 얹은 뒤에 overflow: hidden으로 반씩 나오는 식으로 진행 할 예정입니다. 나머지 들을 기존에 class로 이름을 지정해 주면 됩니다. HTML CODE one two one two three four three four five six five six seven eight seven eight CSS CSS는 위 HTML에서 말했듯이 각각의 각 left와 right에다가 50vw로 반만 지정해 준 뒤 서로 교차 됐을 때 가려지도록 overflow: hidden을 사용해줍니다. e.. 2022. 9. 29. 검색 이펙트 - find()를 이용하여 만들어보자! 검색 이펙트 : find() 이번 배열 메서드인 find()를 이용해 만든 검색 기능을 가진 이펙트를 코딩해봤습니다. HTML HTML 구조는 언제나와 같이 CSS와 스크립트를 사용하기 위한 각각 맞는 클래스 이름을 지정해줍니다. HTML CODE find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 검색한 단어의 설명이 나옵니다. 전체 속성 갯수 : 0 CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. 앞선 검색 이펙트들과 거의 동일한 형태입니다. CSS var() 함수를 사용하여 색 지정 및 변경을 하기 편하도록 해줬습니다. var() : 함수로 정의해둔 속성을 불러와 사용가능하다. : 사용 방법. var(--htmlColor) CSS CODE :root.. 2022. 9. 29. 마우스 이펙트의 기울기 / 글씨 반전 효과를 알아보자! 마우스 이펙트 : 기울기 효과 / 글씨 반전 효과 이번에는 마우스에 이미지 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML 코드는 뭐.. 다른 것들과 거의 비슷하죠..? 추가적인 mouse__info의 좌표 값만 따로 몇 개만 추가하시면 됩니다. 각 CSS로 이용할 클래스 이름 지정과 스크립트에 이용할 클래스 이름mouse__cursor 미리 지정해둡니다. 또한, 현재 마우스 좌표 값을 스크립트 적용하기 위해 mouse__info 클래스에 각각에 좌표 값에 맞는 클래스를 따로 지정해줍니다. 글은..여러분이 평소에 가진 가치관을 기준으로...? HTML CODE Do it yourself. 너 혼자 알아서 해라. mousePageX : 0px mousePageY : 0px centerPageX : .. 2022. 9. 28. 마우스 이펙트의 이미지 효과를 알아보자! 마우스 이펙트 : 이미지 효과 이번에는 마우스에 이미지 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML 코드는 딱히 어려운 건 없습니다. 각 CSS로 이용할 클래스 이름 지정과 스크립트에 이용할 클래스 이름mouse__cursor 미리 지정해둡니다. 또한, 현재 마우스 좌표 값을 스크립트 적용하기 위해 mouse__info 클래스에 각각에 좌표 값에 맞는 클래스를 따로 지정해줍니다. 명언은..여러분이 평소에 가진 가치관을 기준으로...? HTML CODE Look at yourself before blaming others 남 탓 하기 전에 너 자신을 봐라. mousePageX : 0px mousePageY : 0px centerPageX : 0px centerPageY : 0px CSS 이번 C.. 2022. 9. 22. 마우스 이펙트의 조명 효과를 알아보자! 마우스 이펙트 : 조명 효과 이번에는 마우스에 조명 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML 코드는 딱히 어려운 건 없습니다. 각 CSS로 이용할 클래스 이름 지정과 스크립트에 이용할 클래스 이름mouse__cursor 미리 지정해둡니다. 명언은..여러분이 평소에 가진 가치관을 기준으로...? HTML CODE Justice without power is incompetence. 힘 없는 정의는 무능이다. CSS 이번 CSS 코드는 언제나 전과 같이 원하는 디자인으로 구성했고, 기본적인 반응형도 해주었습니다. CSS CODE /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center.. 2022. 9. 22. parallax 05 페럴랙스 이펙트 : 이질감 효과 이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다. 코드보기 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 아니지만 세상은 돈으로 굴러간다. 07 section7 사회는 널 기다려주지 않는다. 08 section8 힘 없는 정의는 무능이다. 09 section9 객관적으로 .. 2022. 9. 20. mouse 02 마우스 이펙트 02 (마우스 따라다니기 : GSAP) 이번에는 마우스에 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다. 코드 보기 Money is not everything in the world, but the world runs on money. 돈이 세상에 다는 아니지만세상은 돈으로 굴러간다. CSS css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다. 또한, z-index를 사용하여 각 위치를 잡아줍니다. 코드 보기 /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center.. 2022. 9. 18. mouse 01 마우스 이펙트 01 (마우스 따라다니기) 이번에는 마우스에 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다. 코드 보기 There's no more excuse than what you don't do. 니가 안하는 것 뿐 그 이상의 핑계는 없다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px CSS css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다. 또한, z-index를 사용하여 각 위치를 잡아줍니다. 코드 보기 /* mouseType */.. 2022. 9. 18. Slider 04 슬라이드 이펙트 04 (슬라이드 버튼) 이번에는 이미지 슬라이드 형태를 가진 이펙트를 코딩해봤습니다. HTML HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다. 코드 보기 prev next CSS css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다. 또한, z-index를 사용하여 각 위치를 잡아줍니다. 코드 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지를 보이는 영역 */ position: relative; width: 80.. 2022. 9. 18. Slider 03 슬라이드 이펙트 03 (좌 : 연속적인 움직임) 이번에는 이미지 슬라이드 형태를 가진 이펙트를 코딩해봤습니다. HTML HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다. 코드 보기 CSS css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다. 또한, z-index를 사용하여 각 위치를 잡아줍니다. 코드 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지를 보이는 영역 */ position: relative; width: 800px; .. 2022. 9. 18. parallax 04 페럴랙스 이펙트 04 이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다. 코드보기 Javascript Mouse Effect04 패럴렉스 이펙트 - 나타나기 1 2 3 4 5 6 7 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 아니지만 세상은 돈으로 굴러간다. 07 section7 사회는 널 기다려주지 .. 2022. 9. 18. parallax 03 페럴랙스 이펙트 03 이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다. 코드보기 & Javascript Mouse Effect03 패럴렉스 이펙트 - 숨김 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 .. 2022. 9. 8. parallax 02 페럴랙스 이펙트 02 이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다. 코드보기 Javascript Mouse Effect02 패럴렉스 이펙트 - 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 아니지만 .. 2022. 9. 8. Parallax 01 페럴랙스 이펙트 01 이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다. 코드보기 Javascript Mouse Effect01 패럴렉스 이펙트 - 메뉴 이동 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 아니지만 세.. 2022. 9. 6. Slider 02 슬라이드 이펙트 02 (좌로 움직이기) 이번에는 이미지 슬라이드 형태를 가진 이펙트를 코딩해봤습니다. HTML HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다. 코드 보기 CSS css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다. 또한, z-index를 사용하여 각 위치를 잡아줍니다. 코드 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지를 보이는 영역 */ position: relative; width: 800px; heigh.. 2022. 8. 29. Slider 01 슬라이드 이펙트 01 (트랜지션 효과) 이번에는 이미지 슬라이드 형태를 가진 이펙트를 코딩해봤습니다. HTML HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다. 코드 보기 CSS css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다. 또한, z-index를 사용하여 각 위치를 잡아줍니다. 코드 보기 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; width: 800px; height: 450px; } .slider { position:.. 2022. 8. 29. Quiz 06 Quiz 06 이번 시간에는 스크롤 형식이 아닌 슬라이드 형식으로 퀴즈 문제를 만들어 봤습니다. 원본 사이트 보기 자바스크립트 데이터 값의 입력과 함수와 for문을 사용했습니다. 이번에는 문제를 풀 시 슬라이드 형식으로 넘어가는 걸로 바꿨으며, 틀린 답을 체크하고 정답 확인 시 정답에 대한 해설이 나오도록 설정했습니다. 코드 보기 // 선택자 const quizType = document.querySelector(".quiz__type"); // 시험 날짜 const quizQuestion = document.querySelector(".quiz__question"); // 문제 번호, 질문 const quizSelects = document.querySelector(".quiz__selects"); /.. 2022. 8. 24. Quiz 05 Quiz 05 이번 시간에는 총 60문제를 코딩하면서 만들어봤습니다. 원본 사이트 보기 자바스크립트 데이터 값의 입력과 함수와 forEach문을 사용했습니다. 이번에는 정답 확인 시에 모든 문제에 대한 풀이와 해설이 나오도록 설정했으며, 마지막에는 맞춘 갯수가 나오도록 설정했습니다. 코드 보기 // 선택자 const quizWrap = document.querySelector(".quiz__wrap"); let quizScore = ""; // 문체 출력 const updateQuiz = () => { const exam = []; quizInfo.forEach((question, number) => { exam.push(` ${question.answerType} ${question.answerNum}.. 2022. 8. 24. Search 03 서치 이펙트 03 알파벳을 클릭하면 해당 알파벳이 앞자리에 포함된 속성이 나오도록 해보겠습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 해당 html은 div안에 keyword클래스를 부여해 준 뒤, span을 사용하여 검색 기능의 구조를 잡아주도록 코딩했습니다. 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 전체 속성 갯수 : 0 accent-color : href특성을 통해 다른 페이지나 같은페이지의 위치, 파일와 그 외 다른 URL로 연결할 수 있는 하이퍼 링크를 만듭니다. align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정 align-i.. 2022. 8. 22. Search 02 서치 이펙트 02 검색 기능을 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. data-name을 사용하여 각 li에 이름을 부여 해줍니다. 해당 HTML에서 결과물에 맞게 li입력 시 보는데 불편해지기에 갯수를 제한했습니다. inCludes()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요. 전체 속성 갯수 : 0 accent-color : href특성을 통해 다른 페이지나 같은페이지의 위치, 파일와 그 외 다른 URL로 연결할 수 있는 하이퍼 링크를 만듭니다. align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정 align-items : 콘텐츠 아이템의 내부 상.. 2022. 8. 17. Search 01 서치 이펙트 01 검색 기능을 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. data-name을 사용하여 각 li에 이름을 부여 해줍니다. 해당 HTML에서 결과물에 맞게 li입력 시 보는데 불편해지기에 갯수를 제한했습니다. indexOf()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 CSS 속성 갯수 : 0 accent-color : href특성을 통해 다른 페이지나 같은페이지의 위치, 파일와 그 외 다른 URL로 연결할 수 있는 하이퍼 링크를 만듭니다. align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정 align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정 align-self : 개별적인 콘텐츠 아이템.. 2022. 8. 17. 이전 1 2 다음
