박스 1 박스 2 JavaScript 설명 abjustLayout() 은 현재 화면의 크기를 가져와서 600px 이하일때와 그 이상일때에 따라 레이아웃의 px을 조정한다. window.addEventListener("resize", adjustLayout) 화면 크기가 변경될때마다 adjustLayout() 함수를 호출하여 레이아웃을 재조정 한다.
섹션 1 이곳은 섹션 1의 내용입니다. 섹션 2 이곳은 섹션 2의 내용입니다. 자동으로 섹션을 슬라이드 하는 기능을 구현한 예시이다. HTML/CSS 설명은 제외하고 JavaScript 설명만 추가하면 document.querySelectorAll("section") 은 페이지 내의 모든 섹션 요소를 선택한다. currentSectionIndex 는 현재 표시되고 섹션을 보이도록 변경하는 함수이다. slideNext() 다음 섹션으로 슬라이드 하는 함수이다. setInterval(slideNext, 3000) 3초마다 slideNext() 함수를 호출하여 다음 섹션을 자동으로 슬라이드 한다.
섹션 1 섹션 2 섹션 1 이곳은 섹션 1의 내용입니다. 섹션 2 이곳은 섹션 2의 내용입니다. 간단한 메뉴를 이용하여 웹 페이지의 섹션으로 스크롤을 이동하는 예시입니다. HTML, CSS 설명은 제외하고 JavaScript 설명만 추가하면 DOMContentLoaded 는 이벤트를 기다리고 이벤트가 발생하면 메뉴 링크들에 이벤트 리스너를 추가한다. document.querySelectorAll("a")는 페이지 내의 모든 링크요소를 선택한다 menuLinks.forEach(...) 는 각 링크 요소에 대해서 반복문을 실행한다. link.addEventListener("click", ...)은 각 링크에 클릭 이벤트 리스너를 추가한다. event.preventDefault() 는 링크 클릭 시 기본동작(..
HTML 팝업 열기 팝업창 내용 팝업창 내용을 입력하세요. 닫기 HTML 파일에는 팝업창을 나타내기 위한 요소와 팝업창을 표시할 버튼을 만들며 일반적으로는 팝업창을 감싸는 컨테이너 요소와 팝업창 내용을 담는 요소를 포함한다. CSS .popup-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; align-items: center; justify-content: center; } .popup-content { background-color: #fff; padding: 20px; border-radius: 8..
바닐라 JS란? 바닐라 JavaScript란 순수하게 웹 브라우저에서 실행되는 JavaScript를 의미한다, 즉 어떠한 프레임워크나 라이브러리를 사용하지 않고 순수 JavaScript 만을 사용하여 웹 페이지를 동적으로 조작하고 기능을 구현하는 것을 말한다. HTML, CSS와 함께 웹 페이지를 구성하고, 웹 페이지의 요소들을 JavaScript 를 통해 동적으로 변경하며 이를 통해 웹 페이지의 사용자 경험을 향상시키며 다양한 기능을 추가할수 있다. 바닐라 JS DOM 조작 - HTML 문서의 요소들을 JavaScript를 통해 선택하고 내용을 변경하거나 스타일을 조정할수 있다. 이벤트 처리 - 버튼 클릭, 마우스 이벤트, 키보드 입력과 같은 이벤트를 JavaScript로 처리하여 웹 페이지의 동작을 ..
Script 기본 출력문 document.write("환영합니다."); //document객체 //객체 //클래스(설계도)와 메모리에 실체화된것(빌딩) //document객체는 //window객체의 하부객체다. //document객체가 HTML태그를 관장한다. //DOM //Document Object Model //document객체로 제어할수있는 형태가 만들어진것 //DOM Tree // 태그로 줄바꿈한다. 변수 var num1=10; var num2=3.14; //var - variable - 변수,변할수있는 //vari - 다양한, able- ~할수있는 //int num=10; document.write(num1," ")//10 document.write(num2," ")//3.14 자동형변환 d..
