SBDB_뉴유 SBDB_뉴유

//글씨 쪼개기 //let text = document.querySelector("#section1 .content__item__desc"); //let splitText = text.innerText; //let splitWrap = splitText.split('').join(""); // splitWrap = "" + splitWrap + "" // text.innerHTML = splitWrap //alert(splitWrap) // 여러개 글씨 쪼개기 //for(let i=1; i { let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + "" desc.inne..

function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); //const img = document.querySelector("#section1 .content__item__img"); //img.style.transform = "translateY("+scrollTop/10+"px)"; document.querySelectorAll(".content__item").forEach(item => { let offset1 = (scro..

//window.addEventListener("scroll", () => { // let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; // // document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); //}) function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Math.r..

// window.addEventListener("scroll", () => { // let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; // // 스크롤 값이 0보다 크면 show 클래스를 추가 // // if(scrollTop>0){ // // document.querySelector("#parallax__nav").classList.add("show") // // } else { // // document.querySelector("#parallax__nav").classList.remove("show") // // } // document.querySelector(".scrollTop ..

document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); // window.scroll(0,1000); // window.scroll({left:0, top:1000}); // window.scroll({left:0, top:1000, behavior:"smooth"}); // window.scrollTo(0,1000); // window.scrollTo({left:0, top:1000}); // window.scrollTo({left:0, top:1000, behavior:"smooth"}); // window.scrollBy(0,1000); // w..

document.querySelectorAll("#parallax__nav li a").forEach(li => { li.addEventListener("click", (e) => { e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior:"smooth" }) }) }) window.addEventListener("scroll", () => { // let scrollTop = window.pageYOffset; // let scrollTop = document.documentElement.scrollTop; // let scrollTop = window.scrollY; let scrollTo..

자바스크립트 위치 JavaScript는 를 사이에 작성합니다. 의 자바스크립트 예시 A Paragraph Try it JavaScript는 를 사이에 작성합니다. 외부 자바스크립트 외부 스크립트는 동일한 코드가 여러 다른 웹 페이지에서 사용될 때 실용적입니다. JavaScript 파일의 파일 확장자는 .js 입니다. 실습해보기

자바스크립 소개 - 실습 JavaScript Can Change HTML Content JavaScript는 HTML의 컨텐츠를 변경할 수 있습니다 텍스트 텍스트 JavaScript Can Change HTML Attribute Values JavaScript는 HTML의 속성 값을 변경할 수 있습니다 JavaScript Can Change HTML Styles (CSS) JavaScript는 HTML의 스타일(CSS)을 변경할 수 있습니다. 텍스트 텍스트 JavaScript Can Hide HTML Elements JavaScript는 HTML 요소를 숨길 수 있습니다 텍스트 텍스트 JavaScript Can Show HTML Elements JavaScript는 HTML 요소를 표시할 수 있습니다 텍..

자바스크립 소개 JavaScript Can Change HTML Content JavaScript는 HTML의 컨텐츠를 변경할 수 있습니다 예시 document.getElementById("demo").innerHTML = "Hello JavaScript"; JavaScript는 큰따옴표와 작은따옴표를 모두 허용합니다. getElementById("demo"): HTML문서의 컨테츠 중에서 아이디가 "demo"인 요소룰 가져옴니다. ~.innerHTML = "Hello JavaScript"; : ~에 "Hello JavaScript"을 HTML 방식으로 입력합니다. JavaScript Can Change HTML Attribute Values JavaScript는 HTML의 속성 값을 변경할 수 있습니다..

Web과 함께 시작하기 CSS 기본 CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. 예를 들면, 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까? 제목과 같이 이 글은 CSS과 그 기능에 대한 기본적인 이해를 제공할 것입니다. 그래서 CSS가 뭔가요? HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어도 아닙니다. 스타일 시트언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소..

Web과 함께 시작하기 HTML 기본 HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 컨텐트는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있습니다. 제목과 같이 이 글은 HTML과 그 기능에 대한 기본적인 이해를 제공할 것입니다. 그래서 HTML은 무엇일까요? HTML은 프로그래밍 언어가 아닙니다. 컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소(elements)로 이루어져 있습니다. 태그(tags)로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hy..

Web과 함께 시작하기 파일 다루기 웹사이트는 문자, 코드, 스타일시트, 미디어 등 수많은 파일로 구성되어 있습니다. 웹사이트를 제작할 때 여러분은 이러한 파일들을 여러분의 컴퓨터에 적당한 양식에 맞춰 정리해야 하고 서로가 잘 작동하는지 확인해야 하며 최종적으로 서버에 업로드하기 전에 모든 내용이 올바르게 나타나게 해야 합니다. 파일 다루기에서는 여러분의 웹사이트를 위한 적당한 양식을 만들기 위해 여러분이 알아야 하는 몇 가지 문제들에 대해 이야기 할 것입니다. 웹사이트는 컴퓨터의 어디에 두어야 할까요? 만약 여러분이 컴퓨터에서 웹사이트에 대해 작업한다며 퍼블리시된 웹사이트의 파일 구조를 반영하는 하나의 폴더 안에 관련된 모든 파일을 유지하여야 합니다. 이 폴더는 어디에나 둘 수 있지만 하드 드라이브에 ..