목록JS (11)

김코드의 웹디자인 세상

❏ Js - 스크롤 스파이 (scroll spy) 만들기!

안녕하세요! 오늘은 자바스크립트를 활용하여 웹페이지에 적용할 수 있는 스크롤 스파이를 만들어보겠습니다! 스크롤 스파이란(scroll spy)? 스크롤 위치에 기반하여 자동으로 네비게이션 대상을 갱신하는 가로형 UI입니다. 먼저 html 파일을 준비합니다. ✎ html 이 달의 에디박스 8만 반려견들의 후기 구성소개 QnA 테마소개 ✎css 간단하게 css도 입혀줍니다. header .menu{ display: flex; align-items: center; justify-content: space-around; } header .menu .menu_list{ display: flex; flex-direction: row; gap: 40px; font-size: 1.1rem; } 그럼 아래처럼 만들어집니다..
⊹⠀𝙹𝚂 2023. 6. 22. 15:58
❏ js - 자바스크립트 HTML DOM ➋

이번시간에는 DOM Attribute에 대해서 알아보겠습니다. 사용자가 브라우저에 입력하는 데이터는 DOM요소의 value 속성에 저장이 됩니다. 이 데이터를 사용하기 위해서는 DOM요소에 대한 접근을 한 후 해당 요소의 속성 정보에 접근해야 합니다. 그렇기에 이번에는 DOM요소에 접근하여 요소가 가지고 있는 속성을 읽고, 변경하는 방법에 대해서 알아보겠습니다. ✏ getAttribute() getAttribute 함수는 HTML요소의 속성 정보를 가져올 수 있습니다. 그럼 예제로 unput type="text" 요소에 사용자가 입력한 데이터를 가지고 오는 코드를 만들어 보겠습니다. ✏ setAttribute() 버튼을 disabled 처리했다가 풀어줍니다. 저장 ✏ hasAttribute() HTML요..
⊹⠀𝙹𝚂 2023. 2. 3. 17:43
❏ js - 자바스크립트 HTML DOM ➊

안녕하세요! 오늘은 자바스크립트에서 사용하는 HTML DOM에 대해서 알아보겠습니다. 자바스크립트는 HTML 모든 요소에 접근하여 변경할 수 있습니다. 사용자가 웹 페이지에 접근하면 웹 페이지가 로드되면서 브라우저는 웹 페이지에 대한 DOM(Document Object Model)을 생성하게 됩니다. DOM은 W3C의 표준이며, 문서에 접근하기 위한 표준을 정의합니다. 자바스크립트는 HTML DOM 객체 모델을 통해 아래와 같은 기능들을 수행할 수 있습니다. 페이지의 모든 HTML요소를 변경할 수 있습니다. 페이지의 모든 HTML속성을 변경할 수 있습니다. 페이지의 모든 CSS 속성을 변경할 수 있습니다. 페이지의 HTML요소 및 속성을 제거할 수 있습니다. 새로운 HTML요소 및 속성을 추가할 수 있습..
⊹⠀𝙹𝚂 2023. 1. 18. 13:31
❏ Js - 동등 연산자와 일치 연산자

안녕하세요! 오늘은 자바스크립트의 연산자 중 동등연산자와 일치연산자에 대해서 알아보고 그 둘의 차이점을 알아보겠습니다! 1. 동등연산자 동등연산자는 (==)으로 표기하며 비교하는 값을 비교하는 연산자입니다. 그 말은 왼쪽의 값과 오른쪽의 값이 틀리면 false로 동일하면 true로 불린 데이터로 반환합니다. 그러나 동등연산자는 데이터타입을 구분하지 않고 불린데이터로 반환합니다. 2. 일치연산자 일치연산자는 (===)으로 표기하며 비교하는 값의 데이터타입을 함께 비교하는 연산자입니다. 비교하는 값이 동일하더라도 한쪽이 문자데이터(string)이고 비교하는 데이터값이 숫자데이터(numder)이면 false 거짓으로 반환합니다. 그렇기에 이 둘의 차이점은 데이터타입까지 구분의 유무를 보시면 되겠습니다. und..
⊹⠀𝙹𝚂 2023. 1. 13. 14:30
이전 Prev 1 2 3 Next 다음