1. <Script> 속성
우리가 단순하게 html 코드를 작성할 경우 body 맨 끝 부분에 script를 그냥 써도 문제가 되지 않지만 html이 무거울 경우 페이지가 엄청 느려질 수 있는 문제가 발생할 수 있다.
이런 문제를 해결할 수 있는 속성이 defer과 async다.
A. <script> defer 속성
defer속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행되는 것을 말한다. 불리언 속성으로 명시하지 않으면 false값을, 명시하면 true 값을 가진다.
defer 속성은 <script>가 외부 스크립트를 참조하는 경우에만 사용할 수 있다.
defer 속성을 가지고 있는 스크립트(지연 스크립트)는 백그라운드에서 다운로드한다. 따라서 스크립트를 다운로드하는 도중에도 html 파싱이 멈추지 않는다. 실행 같은 경우에는 페이지 구성이 끝날 때까지 지연된다.
지연스크립트는 DOM이 준비된 후에 실행되고 DOMcontentLoaded 이벤트 발생 전에 실행되며 일반 스크립트와 마찬가지로 html에 추가된 순으로 실행된다.
순서
페이지 콘텐츠 출력 > 지연 스크립트 실행 > DomcontentLoaded 실행
B.<script> async 속성
async 속성을 가진 스크립트(비동기 스크립트)는 페이지와 독립적으로 동작한다. defer 속성과 마찬가지로 백그라운드에 다운로드가 진행되기 때문에 스크립트 다운과 상관없이 html 페이지를 출력시킨다. 하지만 defer과 달리 async 스크립트 실행 중에는 html 파싱이 멈추게 된다.
DomcontentLoaded 이벤트는 async 스크립트 실행을 기다리지 않는다. 마찬가지로 async 스크립트도 DomcontentLoaded 이벤트 실행을 기다리지 않는다. 따라서 누가 먼저 실행되는지는 예측할 수 없다.
스크립트가 여러 작성된경우에도 스크립트들이 비동기 스크립트 실행을 기다리지 않는다. 반대의 경우에도 마찬가지이다.
따라서 작성 순서와 상관없이 다운로드가 끝난 순서대로 실행된다.
2. queryselector, queryselectorAll
queryselector는 name, id, class를 가리지 않고 요소를 찾는다.
id의 경우 #을 붙이고 class인 경우 .를 붙여서 작성해 준다.
queryselectorAll의 경우 위 문법과 사용방법은 동일하며 배열과 비슷한 nodelist를 반환한다. 반환객체가 nodelist이기 때문에 for문 또는 for each 문을 사용한다. nodelist란 queryselecotrall메서드나 childnodes 속성의 값으로 반환되는 객체로서 문서 내 모든 노드를 리스트 형태로 저장하고 있다. 노드리스트는 배열과 마찬가지로 0부터 접근할 수 있다.
Document 관련 메서드
●createElement(): 노드를 생성 및 추가한다.
●createtextnode():텍스트 노드를 생성 및 추가한다.
●insertBefore(): 특정 노드 이전에 노드를 추가한다
●appendChild(): 특정태그의 자식 노드로 추가한다.
nodelist의 속성과 메서드
●length: nodelist의 개수 정보를 포함하고 있다.
●item(): 결과 값을 항목별로 접근할 때 사용한다.
●childnodes: 모든 자식 노드의 정보가 담겨 있다.
●parentnode: 부모 노드의 정보가 담겨 있다.
●previousSibling.previousSibling: 현위치에서 이전 형제 노드를 말한다.
●nextSibling.nextSibling:: 현위치에서 이후 형제 노드를 말한다.
3. classList
classList는 다양한 메서드를 통해 html의 class를 손쉽게 정의할 수 있다.
classList의 메서드
●revome() : 지정한 클래스 값을 제거한다. 해당 클래스가 없더라도 에러를 발생시키지 않고 작동한다.
●add() : 지정한 클래스 값을 추가한다. 해당 클래스가 이미 존재한다면 무시한다. 하나의 클래스뿐만 아니라 ","를 통해 여러 개의 클래스를 한 번에 추가할 수 있다.
●item(index) : 인덱스를 이용해 클래스를 반환한다.
●toggle() : 해당 클래스가 존재하면 제거하고 false를 반환하며, 존재하지 않는다면 클래스를 추가하고 true를 반환한다.
인수가 2개인 경우도 있는데 이는 두 번째 인수(ex. i < 10)가 ture면 클래스 값을 추가하고 false라면 제거한다.
click이벤트를 통해 많이 사용한다.
●contains(): 지정한 클래스 값이 해당 클래스 값에 존재하면 참을 아니면 거짓을 반환한다.
●replace(old, new): 오래된 클래스를 새로운 클래스로 교체한다.
3. <a> 태그의 속성
●href: 연결할 주소를 지정한다.
●target: 링크를 클릭할 때 창을 어떻게 열지 설정한다. 속성을 이용해 다양한 방식으로 지정할 수 있다.
○ _self : 링크를 클릭한 창에서 연다.
○_blank : 링크를 새창으로 연다.
○_parent : 부모창에서 연다(부모 창이 없을 경우 _self 속성으로 처리된다.)
○_top : 전체 브라우저 창에서 가장 상위의 창에서 연다.
●title: 해당 링크에 마우스 커서를 올릴 때 도움말 설명을 설정한다.
4. CSS overflow 속성
overflow 속성의 경우 콘텐츠가 지정된 공간보다 더 많은 양을 차지할 경우 넘치는 콘텐츠를 어떻게 보여줄지 제어한다.
overflow 속성은 visible, hidden, scroll, auto로 이루어져있다.
●visible : overflow 속성의 기본 값으로 지정된 공간보다 콘텐츠가 많을 경우 공간 밖으로 나오더라도 콘텐츠를 끝까지 보 여준다. 하지만 두 개의 연속된 콘텐츠가 보여질 때 첫 번째 콘텐츠가 밖으로 나올 경우 두번째 컨텐츠와 중첩되 어 보일 수 있는 단점이 존재한다.
● hidden : 지정된 공간 보다 컨텐츠가 많을 경우 밖으로 나오는 콘텐츠들을 잘라버린다.
●scroll : 콘텐츠가 지정된 공간 밖으로 나올 경우를 대비해서 스크롤 바를 만드는 메서드다. 콘텐츠가 넘치더라도 스크롤 을 내려 콘텐츠 내용을 끝까지 볼 수 있다.
●auto: auto 메서드의 경우 콘텐츠 크기가 일정하지 않아 스크롤바를 보여줘야 할지 말아야 할지 결정하기 어려운 경우에
사용하는 메서드다. auto 메서드를 사용할 경우 지정된 공간보다 콘텐츠 내용이 넘칠 경우에만 스크롤 바가 생기고
공간 안에 콘텐츠가 모두 담길 경우 스크롤 바가 생기지 않는다.
'개발일기' 카테고리의 다른 글
| 내가 보려고 만든 개발 일기(2023.09.21) (0) | 2023.09.21 |
|---|