SBDB_뉴유 SBDB_뉴유

Web과 함께 시작하기 웹사이트의 외관은 어떻게 할까요? "웹사이트의 외관은 어떻게 할까요?"에서는 "나의 웹사이트가 무슨 정보를 제공할 것인지?", "무슨 글꼴과 색상을 사용할 것인지?", "나의 웹사이트가 무엇을 하는지?" 등을 포함하여 코드를 작성하기 전에 여러분이 해야할 계획 세우기와 디자인에 대해 이야기 할 것입니다. 계획 세우기 코드를 작성하기 전에 여러분은 아이디어가 필요합니다. 웹사이트가 실제로 무엇을 해야하는지? 웹사이트가 기본적으로 무엇을 할 수 있는지? 하지만 여러분의 첫 시도를 위해선 이것을 간단히 할 필요가 있습니다. 우리는 제목과 사진, 그리고 몇 개의 문단을 포함한 간단한 웹페이지를 제작하는 것부터 시작할 것입니다. 스케치하기 다음으로는 펜과 종이를 가져와 여러분의 사이트가 어..

Web과 함께 시작하기 기본 소프트웨어 설치하기 기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다. 사용하는 도구는 뭔가요? 컴퓨터: 당연한 이야기이지만 웹 개발을 하기 위해서는 컴퓨터가 필요합니다. 텍스트 편집기 : 텍스트 편집기는 Visual Studio Code을 사용하기로 했습니다. Visual Studio Code 사이트 웹 브라우저 : 웹 브라우저는 Chrome을 사용하기로 했습니다. Chrome 다운로드 사이트 이미지 편집기 : 이미지 편집기는 figma을 사용하기로 했습니다. figma 사이트 버전 관리 시스템 : 버전 관리 시스텝은 GitHub을 사용하기로 했습니다. GitHub 사이트 이후 프로그렘이 추가되면 추가하여..

Web과 함께 시작하기 Web과 함께 시작하기(Getting stated with the Web)는 여러분에게 웹 개발의 실직적인 측면을 소개하는 간결한 시리즈입니다. 여러분은 간단한 웹페이지를 만들 때 필요한 도구를 설치하고 여러분의 코드를 게시할 것입니다. 당신의 첫 번째 웹사이트 줄거리 전문적인 웹사이트를 생성하기 위해서는 매우 많은 작업이 필요합니다. 그러니 웹 개발이 처음이라면, 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는 건 그리 어럽지 않으니 여기부터 시작하겠습니다. 아래 나열한 항목을 순서대로 진행하면 백지부터 시작해서 첫 웹페이지를 인터넷에 띄울겁니다. 시작합시다! 기본 소프트웨어 설치하기 웹사이트 제작을 위한 도구는..

const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e){ //마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerWidth/2 - mousePageX; let centerPageY = window.innerHeight/2 - mousePageY; //최소값을 -100 최대값을 100 설정 let maxPageX = Math.max(-100, Math.min(100, centerPageX)); let maxPageY = Math.max(-100..

const circle = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", e => { document.querySelector(".cursor").style.opacity = "1"; //커서 gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2}); //마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 값을 가운데 초기화 //전체 가..

function follow(e){ // const circle = document.querySelector(".cursor").clientWidth; //190: border 값 빠진 상태 // const circle = document.querySelector(".cursor").offsetWidth; //200: border 값 포함 상태 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, width, x, y // console.log(circle); // console.log(circle.width); gsap.to(".cursor", {duration..

const cursor = document.querySelector(".cursor"); const follower = document.querySelector(".cursor-follower"); window.addEventListener("mousemove", e => { // //커서 좌표값 할당 // cursor.style.left = e.pageX -5 + "px"; // cursor.style.top = e.pageY -5 + "px"; // follower.style.left = e.pageX -15 + "px"; // follower.style.top = e.pageY -15 + "px"; //커서위치 가운데로 조정 gsap.to(cursor, {duration: .3, left: e.pa..

//출력용 window.addEventListener("mousemove", () => { document.querySelector(".clientX").innerHTML = event.clientX; document.querySelector(".clientY").innerHTML = event.clientY; document.querySelector(".offsetX").innerHTML = event.offsetX; document.querySelector(".offsetY").innerHTML = event.offsetY; document.querySelector(".pageX").innerHTML = event.pageX; document.querySelector(".pageY").innerHTM..

const quizWrap = document.querySelector(".quiz__wrap"); //퀴즈 //문제정보 const quizInfo = [ { answerType : "HTML", answerNum : 1, answerAsk : "정답은 HTML 입니다.", answerChoice : { 1: "html", 2: "css", 3: "javasript", 4: "react" }, answerResult : "1", answerEx : "정답은 HTML 입니다." }, { answerType : "CSS", answerNum : 2, answerAsk : "정답은 CSS 입니다.", answerChoice : { 1: "html", 2: "css", 3: "javasript", 4: "rea..

const quizType = document.querySelector(".quiz__type"); //퀴즈 종류들 const quizNumber = document.querySelector(".quiz__number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__confirm"); //퀴즈 확인 버튼 const quizResult = document.querySelector(".quiz__result"); //퀴즈 정답 const quizView = document.querySelector(".quiz__view") //강아지 c..

const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류들 const quizNumber = document.querySelectorAll(".quiz__number"); //퀴즈 번호 const quizAsk = document.querySelectorAll(".quiz__ask"); //퀴즈 질문 const quizConfirm = document.querySelectorAll(".quiz__confirm"); //퀴즈 확인 버튼 const quizResult = document.querySelectorAll(".quiz__result"); //퀴즈 정답 const quizView = document.querySelectorAll(".qu..

const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__confirm"); //퀴즈 확인 버튼 const quizResult = document.querySelector(".quiz__result"); //퀴즈 정답 const quizView = document.querySelector(".quiz__view") //강아지 co..