JS에서 사용하는 DOM API
document.querySelector(".box") : DOM 요소를 선택한다.
document.querySelectorAll(".box") : 지정된 모든 DOM 요소를 선택한다.
<사용 예제>
let boxE1 = document.querySelector(".box");
let boxE1s = document.querySelectorAll(".box");
// 이벤트 발생 시 동작 구현
boxE1.addEventListener("click", function () {
// 동작할 코드 작성
});
// classList 메서드를 사용해 class 추가, 삭제, 토글
boxE1.classList.add("active"); // 클래스 추가
let isContains = boxE1.classList.contains("active"); // 포함하고 있는지 확인
boxE1.classList.remove("active"); // 클래스 삭제
boxE1.classList.toggle("active"); // 클래스 토글
// 반복문 forEach
boxE1s.forEach(function (boxE1, index) {
boxE1.classList.add(`order-${index + 1}`);
});
// 값을 얻기
const content = boxE1.textContent;
// 값을 지정하기
boxE1.textContent = contentdefer
html에서 script 파일을 불러올 경우 페이지가 로드된 후 script 파일을 로드해야 하기 때문에 영역 안에 script 파일을 명시해야 했다.
하지만 defer 속성을 사용하면 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행될 수 있도록 하기 때문에 영역 안에 작성해도 정상 동작된다.
- defer를 명시하면 페이지가 로드될 동안 백그라운드에서 script를 로딩한다.
type="module"
defer 대신 defer의 기능을 포함한 type="module"을 사용할 수 있다.
- type="module"을 사용할 경우 모듈로 나눠 사용할 수 있기 때문에 더 유용하다.
CSS 속성
overflow : 지정된 영역 밖의 요소를 보이지 않게 하는 속성
clip : 어떤 요소에 대해 보여주고 싶은 영역을 지정하는 속성
z-index : 속성이 양수(음수)로 설정된 요소는 position 속성이 static인 요소보다 앞(뒤)으로 보여진다.
position
position: relative: 하위 요소 위치에 영향을 주는 상위 요소로 설정, 자기 자신 요소 기준으로 배치position: absolute: 상위 요소 안에서 절대적인 위치로 요소 배치position: fixed: 뷰포트를 기준으로 요소 배치position: stickey: 스크롤 영역 기준으로 요소 배치- position 설정 후 top, bottom, left, right 속성으로 요소의 위치를 배치한다.
float : 이미지를 텍스트와 같이 배치할 때, 레이아웃을 구성할 때 사용
inherit: 부모 요소의 속성을 상속 받는다.left: 요소를 왼쪽으로 띄운다.right: 요소를 오른쪽으로 띄운다.none: 요소를 띄우지 않는다. (기본 속성)
::befor, ::after : 구분선을 넣을 때 사용한다.
#gnb .weather_area .max:before {
display: inline-block; // 가상 요소가 영역을 갖게 만든다.
content: ""; // content=""가 있어야 가상 요소가 만들어진다. (필수)
width: 5px;
height: 11px;
background-position: -47px -422px;
background-repeat: no-repeat;
vertical-align: top;
margin: 0 3px;
vertical-align: -1px;
}요약
(1) JS에서 사용하는 DOM API 정리해보았다. 자주 사용하는 DOM API는 사용하면서 외워둬야 할 것 같다.
(2) HTML에서 script를 가져올 때 defer를 사용하는 이유에 대해 알아보았다. defer을 사용하면 HTML이 로딩되는 동안 스크립트가 백그라운드에서 다운되기 때문에 헤드 영역에 사용해도 로직에 문제가 생기지 않는다는 것을 알 수 있었고, defer를 포함하고 있는 type="module"을 사용하는 방법도 있어서 실습을 진행할 때 type="module"을 사용하면 좋을 것 같다.
