박스 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() 는 링크 클릭 시 기본동작(..
ES6문법 이란? ES6(ES2015)는 ECMAScript 6 라고도 불리며, ECMAScript의 6번째 버전이다. 여기서 ECMA는 기술규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. let, const 기존에는 변수를 선언할때 var 키워드를 사용했지만, ES6부터는 let, const 키워드를 사용하여 블록 범위의 변수와 상수를 선언할수 있다 let let은 재할당이 가능한 변수를 선언할때 사용하며 언제든 변할수있는 변수에 사용된다. const const는 재할당이 불가능한 상수를 선언할때 사용하며 변하지 않는 상수에 사용된다. Arrow Function(화살표 함수) 함수를 더 간결하게 정의하는 화살표 함수 문법이다. 일반적인 함수 선언 function add(a, b)..
JavaScript Bubbling 이란? 자바스크립트 이벤트 버블링(Event Bubbling)은 HTML 요소들이 중첩되어 있을 때, 해당 요소에서 발생한 이벤트가 부모 요소들로 전파되는 현상을 말한다. 이벤트가 발생한 요소에서 시작하여 최상위 부모 요소까지 이벤트가 전파되는 것을 의마한다. 예를 들어 아래와 같은 HTML 구조가 있다고 가정하면 클릭 버튼을 클릭하면 버튼에서 클릭 이벤트가 발생한다 여기서 이벤트는 버튼에만 적용되는것이 아니라, 버튼을 포함하는 부모 요소들에게도 전파된다, 따라서 클릭 이벤트가 버튼에서 발생하면 순서대로 " inner ", " outer " 요소 들에게도 이벤트가 전파되는 것이 이벤트 버블링이다. 이벤트 버블링을 이해하면, 이벤트를 캡처링(Capturing) 단계와 버..
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..
