SEOLHEE

10초에 한번씩 명언과 배경사진이 바뀌는 페이지 만들기 코드 body { background-image: url("https://source.unsplash.com/random/?sea"); } "https://source.unsplash.com/random/?sea" URL을 통해, 배경 이미지가 랜덤으로 해변 풍경이 선택됩니다. //함수 정의 function updateQuote() { fetch("json/dummy01.json") .then(res => res.json()) .then(data => { const result = document.querySelector("#result"); const random = Math.floor(Math.random() * 30); // 0 ~ 29 사이의..

로또 번호 생성기 만들기 head 코드 body 코드 L O T T O 번호 생성기 클릭 "result"라는 id 속성을 가진 HTML 요소를 찾아서 result 변수에 할당하고 있습니다. "button"이라는 HTML 요소를 찾아서 button 변수에 할당하고 있습니다. "luckyNumber"라는 객체를 생성하고 있습니다. 이 객체는 두 개의 속성을 가지고 있습니다. digitCount : 숫자의 자릿수를 나타내는 속성으로, 현재는 6으로 설정되어 있습니다. maxNumber : 가능한 최대 숫자를 나타내는 속성으로, 현재는 45로 설정되어 있습니다. HTML 문서에서 'result'와 'button' 요소를 선택합니다. 'button' 요소를 클릭했을 때 실행되는 함수에서는, 'luckyNumber..

10초에 한번씩 명언이 바뀌는 페이지 만들기 마무리 문제1 JSON 데이터를 가져온 후 코솔창에 결과를 표시해보세요. 가져온 데이터가 어떤 구조로 이루어져 있는지 살펴보는 것이 목표입니다 길라잡이 fetch와 then, catch를 사용해서 URL에서 자료를 가져옵니다. 가져온 데이터에 어떤 값이 어떤 구조로 저장되어 있는지 확인하고 그중에서 명언과 말한 사람 정보를 가져오는 방법을 생각합니다. 마무리 문제2 마무리 문제1에서 명언 데이터를 가져오는데 성공했으면 그중에서 1개의 명언만 가져와서 문서의 #result 역영에 명언 내용과 말한 사람을 표시해 보세요. 이때 명언 내용은 #result 영역에 있는 .quote 영역에, 말한 사람은 .author 영역에 표시하세요. 길라잡이 마무리 문제1에서 한 ..

슬라이드이펙트란? 웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다. 슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다. 주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나..

슬라이드이펙트란? 웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다. 슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다. 주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나..

슬라이드이펙트란? 웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다. 슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다. 주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나..

슬라이드이펙트란? 웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다. 슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다. 주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나..

슬라이드이펙트란? 웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다. 슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다. 주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나..

슬라이드이펙트란? 웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다. 슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다. 주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나..

슬라이드이펙트란? 웹 사이트나 애플리케이션에서 이미지나 콘텐츠를 슬라이딩하여 화면에 전환하는 효과를 의미합니다. 슬라이드 이펙트는 다양한 형태로 표현될 수 있으며, 주로 이미지 갤러리, 배너, 광고 등에서 사용됩니다. 슬라이드 이펙트는 사용자가 웹 페이지를 더욱 동적으로 느끼게 하고, 시각적인 흥미를 유발하여 사용자 경험을 향상시키는 효과를 가지고 있습니다. 또한, 슬라이드 이펙트는 화면 전환 시 부드러운 애니메이션을 제공하여 사용자가 불편함을 느끼지 않도록 도와줍니다. 주로 사용되는 슬라이드 이펙트에는 수평 슬라이드, 수직 슬라이드, 페이드 인/아웃, 카드 슬라이드, 돌리기, 점진적 슬라이드 등이 있습니다. 이러한 슬라이드 이펙트는 CSS와 JavaScript를 사용하여 구현할 수 있으며, 라이브러리나..