기초부터 시작하는 코딩 114

Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기03

- 자 오늘도 마우스 효과를 사용해서 페이지를 만들어 보겠습니다. - 동그라미를 통해서 선명한 사진을 보게 하는 사이트 입니다. - 코드를 보시죠 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 "The only way to do great work is to love what you do." 큰 일을 해내는 유일한 방법은 자신이 하는 일을 사랑하는 것이다. - HTML태그는 별로 특별할 게 없습니다. - 커서를 대신할 div태그 하나와 문자가 들어가는 태그가 끝입니다. const cursor = document.querySelector(".mouse__cursor"); const circle = cursor.getBoundingClientRect();..

Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기02

- 자 오늘도 마우스 효과를 사용해서 페이지를 만들어 보겠습니다. - 오늘 할 것은 마우스 포인터를 동그라미 2개로 만들고 하나는 천천히 따라오게 해주는 것입니다. - 코드를 먼저 보겠습니다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Insanity is doing the same thing over and over again and expecting different results. 늘 같은 길을 가면서 다른 결과를 바라는 것은 어리석은 짓이다. im.kebab00@gmail.com - 일단 HTML의 구조를 보면 마우스 커서를 대신할 2개의 div태그가 보입니다. - 그 두개의 div태그에 mouse__cursor, mouse__cursor2..

Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기01

- 자 오늘은 마우스 효과를 사용해서 페이지를 만들어 보겠습니다. - 동그란 원이 마우스 커서를 대신하는 효과인 것이죠~ Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Traveling is making new memories . 여행은 새로운 추억을 쌓는 것이다. clientX : px clientY : px offsetX : px offsetY : px pageX : px pageY : px screenX : px screenY : px im.kebab00@gmail.com - 자 이것이 위에 있는 페이지의 코드입니다. - 눈에 띄는 것은 마우스를 움직일 때마다 마우스의 좌표를 알려주는 것이고 커서를 특정 단어 위에 올려두었을 때 커서에 효과가 있..

사이트를 만들어 봅시다. - TextType(01)

-오늘은 위에 있는 예시처럼 슬라이드 형식의 페이지를 만들어 보겠습니다. - 구조는 6개의 박스에 텍스트가 있는 형식입니다. - 나중에 각 박스를 클릭하게 된다면 해당 내용에 관련된 페이지로 넘어가게 해줄 수도 있습니다. - 일단 코드를 보시죠 NOTICE 식물을 키울 때 유의할 점 적절한 환경 조성 각 식물은 자신만의 적절한 환경을 필요로 합니다. 적절한 온도, 습도, 빛 등을 제공해주어야 합니다. 예를 들어, 대부분의 화분 식물들은 밝은 곳에서 자라는 것을 좋아합니다. 더보기 적절한 수분 공급 대부분의 식물들은 적절한 양의 물을 필요로 합니다. 물 주기는 각 식물마다 다르며, 너무 많이 물을 주거나 적게 물을 주는 것은 식물의 건강에 영향을 미칠 수 있습니다. 더보기 적절한 토양 선택 적절한 토양을 ..

Javascript를 이용한 사이트 만들기! - 퀴즈 효과 사이트 만들기04

- 오늘은 객관식 문제를 풀 수 있는 사이트를 만들어 보겠습니다. - 바로 코드로 넘어가 보도록하죠 Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 정답입니다! 틀렸습니다! 정답 확인하기 im.kebab00@gmail.com - 먼저 HTML부분에 달라진 부분이 있습니다. 바로 ,,태그들을 이용해서 선택할 상자들을 만들어 주었습니다. - 태그의 type에 button,checkbox등의 속성을 넣으면 원하는 방식으로 데이터를 입력받을 수 있습니다. - 그리고 id는 다르게 했지만 name은 같은 값을 주어 4개 중에 하나만 선택이 가능하도록 만들어 주었습니다. - value는 눌렀을 때 입력되는 데이터를 JavaScript 등의 스크립트에서 수집하거나 서버로 전송하는 등의 작업에 사용됩니다. - ..