반응형

코딩 공부 162

마우스 이펙트 사이트 만들기(3)

마우스 이펙트란? 마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다. 예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다. 마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다. 마우스 이펙트(3) 사이트 코드 Javascript Mouse Effect03 마우스 이펙트 1 2 3 4 5 6 Your act..

마우스 이펙트 사이트 만들기(2)

마우스 이펙트란? 마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다. 예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다. 마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다. 마우스 이펙트(2) 사이트 코드 Javascript Mouse Effect02 마우스 이펙트 1 2 3 4 5 6 You can'..

마우스 이펙트 사이트 만들기(1)

마우스 이펙트란?마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다. 예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다. 마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다. 완성된 사이트를 보여드릴게요! 마우스 이펙트 사이트 코드 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따..

텍스트 유형 페이지를 만들자!

텍스트 유형이란? 텍스트 유형 사이트는 텍스트가 주요 콘텐츠인 웹 사이트를 말합니다. 이러한 사이트는 주로 글을 중심으로 정보를 제공하고, 이미지나 동영상보다는 텍스트를 통해 정보를 전달합니다. 예를 들어, 뉴스 사이트나 블로그, 정부 기관의 법률정보 제공 사이트, 학술지 등이 텍스트 유형 사이트에 해당합니다. 이러한 사이트에서는 텍스트가 핵심 콘텐츠이기 때문에, 텍스트의 품질과 내용의 신뢰성이 중요합니다. 텍스트 유형 사이트는 디자인적인 요소나 그래픽보다는 정보 전달에 중점을 둔 사이트이기 때문에, 디자인이 간결하고 직관적인 것이 좋습니다. 또한, 검색 엔진 최적화(SEO)를 고려하여, 텍스트의 키워드 사용과 구성 등이 중요합니다. 텍스트 유형 장점 정보 전달에 뛰어남 : 텍스트가 핵심 콘텐츠이기 때문..

코딩 공부/HTML 2023.03.19

퀴즈(Quiz) 사이트를 만들어봅시다! (4)

자바스크립트 퀴즈(Quiz) 사이트 만들기 이번에 만들어 본 퀴즈 사이트는 전에 만든 사이트와 달리 객관식 확인하기 퀴즈 유형입니다. 퀴즈 사이트 코드 Quiz 객관식 확인하기 유형 1 2 3 4 5 5-1 . 정답입니다! 틀렸습니다! 정답 확인하기 객관식 확인하기 유형인 만큼 직전에 만든 사이트와 달리 새로운 부분이 생겼습니다. quiz__choice 부분이 생겼습니다. input type="radio"는 HTML에서 라디오 버튼을 나타내는 요소입니다. 라디오 버튼은 다중 선택이 가능한 체크 박스와 달리, 하나의 그룹에서 오직 하나의 선택만 가능합니다. 라디오 버튼은 input 요소 중 하나로, type 속성 값으로 "radio"를 가지며, name 속성으로 같은 그룹의 라디오 버튼들을 식별합니다. 그..

자바스크립트 테스트 (3)

자바스크립트 테스트 오늘 본 자바스크립트 테스트 문제와 정답을 정리하고 틀린 문제는 풀이를 해보자 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 😎결과 확인하기 함수가 실행되었습니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 😎결과 확인하기 함수가 실행되었습니다. 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i5 는 false이지만 j ! = 0 이 true가 되므로 결과값은 true가 된다. m= j num2 이 true면 num1을 반환하고 false면 num2를 반환한다. 10..

슬라이드 유형 페이지를 만들어보자!

슬라이드 유형 페이지란? 슬라이더는 여러 콘텐츠를 중요한 공간에 한 번에 넣을 수 있게 해 준다. 하지만 화면이 크든 작든, 사람들은 슬라이더를 그냥 지나치는 경우가 많다. 정적인 히어로 이미지(메인 전체를 차지하는 큼직한 이미지와 텍스트)나 좋은 UI로 콘텐츠를 잘 배치하는 것이 더 나은 해결책이다. 하지만 슬라이더가 꼭 필요하면, 내비게이션을 잘 사용하고 내용을 잘 구성해야 한다. 특징 웹사이트 맨 위에 있다. 로딩했을 때 모니터 화면의 상당 부분을 차지한다. (한 번에 하나씩) 여러 장을 보여 준다. 캐로셀 안에는 넘길 수 있는 내용이 더 있다는 것을 알려 주는 표시자나 내비게이션이 있다. 이미지와 짧은 텍스트가 있다. 내용은 조직의 소개나 사명에 대한 것 혹은 주요 정보나 프로모션이다. 장점 여러..

코딩 공부/HTML 2023.03.15

이미지 텍스트 유형 페이지를 만들자!

이미지 텍스트 유형이란? 이미지 텍스트 유형은 크게 두 가지로 나뉩니다. 포함된 이미지 텍스트 (Included Image Text) : 이미지에 직접 포함된 텍스트로, 이미지 파일 자체에 포함된 텍스트를 의미합니다. 예를 들어, 로고나 헤더 이미지 등에서 사용됩니다. 인식 가능한 이미지 텍스트 (Recognizable Image Text) : 이미지에 포함된 텍스트를 OCR (Optical Character Recognition) 기술 등을 사용해 인식 가능한 텍스트를 말합니다. 이러한 텍스트는 이미지와 함께 웹 페이지나 문서에서 노출될 수 있습니다. 예를 들어, 웹사이트에서 이미지에 포함된 제목이나 캡션 등에서 사용됩니다. 장점 검색 엔진 최적화 (SEO) : 이미지에 포함된 텍스트를 검색 엔진이 인..

코딩 공부/HTML 2023.03.14

퀴즈(Quiz) 사이트를 만들어봅시다! (3)

자바스크립트 퀴즈(Quiz) 사이트 만들기 이번에 만들어 본 퀴즈 사이트는 전에 만든 사이트와 달리 주관식(여러문제) 확인하기 퀴즈 유형입니다. 짜잔~ 스크롤을 내리시면 문제 3번까지 나와있는 것처럼 한 페이지에 주관식 문제가 여러개 있도록 만들어 줬습니다. 직접 만들어 본 퀴즈 사이트 코드 Quiz 주관식(여러문제) 확인하기 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 참고 태그의 placeholder 속성은 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시합니다. 문법 // 텍스트 : 요소에 입력될 값에 대한 짧은 힌트를 명시합니다. script 코드 querySele..

728x90
Adventure Time - BMO