153_자바스크립트에서 스타일 확인하기 [적용] 요소에 적용한 스타일을 확인하고 싶을 때 [문법] 속성 의미 반환 getComputedStyle. 속성 스타일 값 가져오기 문자열 [내용] getComputedStyle()을 사용해 스타일 정보를 가져올 수 있다.각 스타일 설정에 따라 최종적으로 계산된 값을 가져온다. HTML index.html CSS style.css #box { width: 100px; height: 100px; } .red { background-color: #ff2bc2; } JavaScript main.js const box = document.querySelector('#box'); console.log(getComputedStyle(box).width); // width 값 ..

152_자바스크립트에서 스타일 변경하기 [적용] 자바스크립트 처리 결과에 따라 스타일을 변경하고 싶을 때 [문법] 속성 의미 반환 요소.style.속성 스타일 값 문자열 [내용] 자바스크립트로 요소의 스타일 변경이 가능하며, 원하는 요소만을 지정하여 스타일에 변경을 주고 싶을 때 유용하다. const box = document.querySelector('#box'); // 배경을 파란색으로 변경 box.style.backgroundColor = 'blue'; 앞의 방법으로 CSS 코드의 스타일을 지정할 때의 속성 표기법은 케밥 케이스(Kebab-Case(-(하이픈)으로 단어를 연결하는 방법)가 아닌 카멜 케이스(CamelCase(첫 글자를 대문자로 하여 단어를 연결하는 방법)를 사용하므로 주의할 필요가 ..

151_자바스크립트에서 요소 클래스 유/무효화하기 [적용] 요소의 클래스를 동적으로 다루고 싶을 때 [문법] 메소드 의미 반환 요소.classList.toggle(클래스) 클래스 전환 없음 [내용] classList.toggle()은 설정된 클래스를 추가하거나 제거할 수 있다. 1초마다 클래스를 전화하는 예시를 확인해 보자. setInterval(() => { box.classList.toggle('red'); }, 1000); [예시] 버튼 클릭으로 표시 내용을 전환하는 예시안을 확인해 보자. .button 요소를 클릭하면 .contnt 요소의 show 클래스를 표시하거나 제거한다. show 클래스가 설정된 상태에서만 .content 요소가 표시된다. HTML index.html HTML HyperTe..

150_자바스크립트에서 요소 클래스 속성 다루기 [적용] 클래스를 추가하고 싶을 때 클래스를 제거하고 싶을 때 클래스의 존재 여부를 확인하고 싶을 때 [문법] 메소드 의미 반환 요소.classList.add(클래스1, 클래스2, ...) 클래스 추가 없음 요소.classList.remove(클래스1, 클래스2, ...) 클래스 제거 없음 요소.classList.contains(클래스) 존재 여부 확인 진리값 [내용] 이 메소드를 사용해 요소의 클래스 조작이 가능하다. 자바스크립트로 요소의 클래스를 조작하여 동적인 변화를 줄 수 있으며, 조작 반응과 상태 변화 표시에 유용하다. classList.add()와 classList.remove()는 클래스를 추가/제거하며, 여러 클래스를 한꺼번에 조작하는 것도 ..

149_자바스크립트에서 태그 _blank의 부모창 조작 제한하기 [적용] 안전하게 _blank 속성을 사용하고 싶을 때 [내용] target="_blank" 속성을 가진 a 태그로 윈도우 창을 열었을 때, 해당 창에서 window.opener를 사용해 부모창의 제어가 가능하다. 하지만 어느 정도의 위섬성을 내포하므로 rel="noopener"를 사용해 부모창의 제어를 제한할 수 있다. _blank 속성의 a 태그를 자동으로 noopener 설정하는 예시를 확인해 보자. HTML index.html 링크1 링크2 링크3 링크4 링크5 개발자 도구에서 HTML 코드를 확인해 보면 _blank가 설정된 a 태그만 noopener가 설정되어 있다. 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아..

148_자바스크립트에서 요소 속성 다루기 [적용] 속성의 값을 변경하고 싶을 때 [문법] 메소드 의미 반환 요소.setAttribute(속성, 값) 요소 속성 설정 없음 요소.getAttribute(속성) 요소 속성 가져오기 없음 요소.hasAttribute(속성) 요소 속성 존재 여부 확인 진리값 [내용] 해당 메소드로 요소 속성을 다룰 수 있다. HTML index.html 링크 JavaScript main.js const anchorElement = document.querySelector('#anchor'); // example.com 출력 console.log(anchorElement.getAttribute('href')); const imageElement = document.querySele..

147_자바스크립트에서 자신을 포함한 HTML 요소 다루기 [적용] 자신을 포함한 HTML 텍스트와 아미지의 태그를 변경하고 싶을 때 [문법] 속성 의미 타입 요소.outerHTML 요소 HTML 문자열 [내용] outerHTML 속성은 innerHTML과 달리 자신도 대상이 될 수 있으며, 자신의 HTML을 가져오거나 변경할 수 있다. HTML index.html 오늘의 날씨 비(16도) JavaScript main.js const weaterInformation = document.querySelector('#weather-information'); // 다음의 문자열 출력 // 비(16도) console.log(weatherInformation.outerHTML); // 부분을 img 요소로 변경 ..

146_자바스크립트에서 요소 내부 HTML 다루기 [적용] HTML 텍스트와 이미지의 태그를 변경하고 싶을 때 [문법] 속성 의미 타입 요소.innerHTML 요소 내부 HTML 문자열 문자열 [내용] innerHTML 속성으로 요소의 HTML을 변경하거나 속성을 가져올 수 있다. innerHTML은 Node 객체인 노드 .textContent와 다르게 Element 객체의 속성이다. 태그를 포함한 문자열 HTML을 가져오는 다음의 예시를 확인해 보자. HTML index.html 오늘의 날씨 비(16도) JavaScript main.js const weatherInformation = document.querySelector('#weather-information'); // 다음의 문자열 출력 // 비

145_자바스크립트에서 텍스트 요소 다루기 [적용] HTML 텍스트를 변경하고 싶을 때 [문법] 메소드 의미 타입 노드.textContent 노드 내 텍스트 문자열 [내용] textContent는 요소 내 텍스트를 가져오거나 변경한다. 텍스트를 가져올 때 HTML 태그는 무시한다. HTML index.html 오늘의 날씨 흐림

144_자바스크립트에서 노드 교체하기 [적용] 요소를 다른 요소로 교체하고 싶을 때 [문법] 메소드 의미 반환 변경대상노드.replaceWith(새노드) 대상 노드를 새 노드로 교체 없음 [내용] replaceWith() 는 변경 대상 노드를 새로운 노드로 교체한다. 교체된 노드라 DOM 트리에서 제거되는 것은 replaceChild()와 같지만, 반환값이 없다는 점이 다르다. 화면 표시 3초후 새로운 노드로 교체하는 예시를 확인해 보자. HTML index.html 교체 전 박스 JavaScript main.js setTimeout(() => { // 교체 전 박스 요소 const oldBox = document.querySelector('.old-box'); // 새로운 박스 요소. div 요소 생성..