❓ 라이트 박스 원하는 사진을 클릭하면 전면에 크게 나타낸 후, 주변을 어둡게 처리하여 클릭한 요소에 시선을 집중시키는 스타일이다. 자바스크립트의 DOM을 이용하여 간단한 라이트박스 효과를 만들 수 있다. 1️⃣ 코드의 흐름 파악하기 두 개의 태그 중 위의 것은 썸네일 형식으로 나타낼 6개의 이미지이고 아래의 것은 라이트 박스 영역을 나타낸다. 작동 방식은 다음과 같다. 1) 썸네일 이미지 6개를 우선 화면에 보여준다. 2) 6개 중에 하나를 클릭하면 해당 이미지를 라이트 박스 영역(2번째 div태그)에 표시하고 화면에 나타나게 한다. 3) 화면에 나타난 라이트 박스 영역을 클릭하면 다시 라이트 박스를 감춘다. 2️⃣ DOM요소 가져오고 썸네일 보여주기 사용할 DOM요소를 가져와야한다. 우선 썸네일 이미..

자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있다. 각 요소의 스타일을 자유롭게 수정할 수 있으므로 웹 문서에서 다양한 효과를 만들 수 있다는 장점이 있다. [방법] 해당 스타일이 적용된 HTML요소 다음에 예약어 "style"를 쓰고 속성을 적는다. Ex) document.querySelector("#desc").style.color = "blue"; 위의 color 속성처럼 한 단어인 속성명은 그대로 사용하면 되지만 "background-color", "border-radius"처럼 중간에 하이픈(-)이 있는 경우는 두 단어를 붙여서 쓰고 각 단어의 첫글자는 대문자로 표시한다! 아래의 예시를 통해서 내용을 숙지해보자! [도형의 배경색과 테두리 바꾸기!] 도형 위로 ..

addeventListner() 메소드와 event객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결하여 실행할 수 있다. 🚨주의🚨 메소드 끝에 항상 세미콜론(;)을 붙여야함! 사용법 ) 요소.addEventListner(이벤트, 함수, 캡처 여부); 이벤트 : 이벤트 유형을 지정한다. 단, click이나 keypress처럼 "on"을 붙이지 않는다! 함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정한다. 여기서 함수를 정의할 때는 인자로 event객체를 받는다! 캡처 여부 : 이벤트를 캡처하는지 여부를 지정한다. 디폴트 값은 "false"이다. "true"이면 캡처링, "false"이면 버블링한다는 의미인데 그 의미는 예를 들면 다음과 같다. 종류 설명 🤔 캡처링 DOM의 부모노드에서 자식노드로..

CSS에서는 class, id, 태그 등 선택자들의 스타일을 구별하여 정의해야한다. 이 선택자를 이용해서 DOM에 접근할 수 있다. 1️⃣ id 선택자로 접근하는 getElementById() 태그의 id 속성은 요소가 문서 안에서 중복되지 않도록 사용하는 CSS선택자이다. 다음과 같이 사용 가능하다. 요소명.getElementById("id명") ex) document.getElementById("post") 2️⃣ class값으로 접근하는 getElementByClassName() 지정한 class선택자 이름이 들어있는 DOM요소에 접근가능하다. 요소명.getElementByClassName("class명") 3️⃣ 태그 이름으로 접근하는 getElementsByTagName() 웹 문서 안에서 같은..

❓ 문서 객체 모델이란 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹문서 전체 또는 일부분이 동적으로 반응하게 하는 것이다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다. 예를 들어 웹 문서에 텍스트와 이미지가 들어 있다면 웹 브라우저는 마크업 정보를 보면서 텍스트 단락이 몇 개이고 그 내용이 무엇인지 살펴본다. 또한 이미지가 몇 개이고 이미지 파일 경로는 어떠한지 등등을 정리하여 인식한다. 이러한 모든 정보 요소를 자바스크립트로 가져와 프로그래밍 할 때 사용한다. 이 때 알아야 할 개념이 바로 "문서 객체 모델(DOM : document object model)"이다. DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이..

window객체는 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위에 위치한다. 때문에, 자바스크립트의 모든 객체는 window객체 안에 포함된다. window객체의 프로퍼티를 사용하여면 "window.프로퍼티" 형식으로 사용한다. 여러개의 프로퍼티중 다음 두 가지의 프로퍼티에 대해 궁금증이 생겨서 조사해보고 글을 쓰게 되었다. window.localStorage 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환함 window.sessionStorage 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환함 다음 두 가지의 프로퍼티는 비슷하면서도 다른 값을 반환한다. 위의 두 가지 저장소는 HTML5에서 추가된 "키 : 밸류" 형태의 데이터를 저장하는 저장소이다. 로컬 스토리지와 세션 스토리지의..