Twittler 과제를 수행하면서 검색해본 결과들
CSS를 사용할 때 기본적인 구성 틀로 알고 있으면 좋을만한 정보들
1. 테이블을 만드는 방법
테이블 구성요소
<table> 테이블을 만드는 태그
<th> 테이블의 헤더 만드는 태그
<tr> 테이블의 행을 만드는 태그
<td> 테이블의 열을 만드는 태그
2. 테이블 디자인 변경 방법
border: 테이블의 테두리
bordercolor: 테두리 색상
width: 가로 크기
height: 세로 크기
align: 정렬
bgcolor: 배경색
colspan: 가로 합병(열 합병)
rowspan 세로 합병(행 합병)
이번주는 HTML과 CSS를 학습했다.
오늘 배운 내용중에 더 공부해야 할 것들에 대한 요약을 남겨본다.
아직은 다 이해하지 못한 부분들이 많아서 차근차근 블로깅 할 예정이다.
Basic
*DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경하는 방법
createElement - CREATE
querySelector, querySelectorAll - READ
textContent, id, classList, setAttribute - UPDATE
remove, removeChild, innerHTML = "" , textContent = "" - DELETE
appendChild - APPEND
innerHTML과 textContent의 차이
Advanced
DOM의 더 깊은 내용에 대해서 이해할 수 있다.
createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.
HTML5 template tag 사용법을 이해할 수 있다.
element와 node의 차이를 이해할 수 있다.
children과 childNodes의 차이를 이해할 수 있다.
remove와 removeChild의 차이를 이해할 수 있다.
같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?
좌표 정보 조회를 할 수 있다. - offsetTop...
크기 정보 조회를 할 수 있다. - offsetWidth...
MDN에서 append와 prepend에 대해서 검색하고, 차이에 대해서 공부하세요. (difference between append and prepend in javascript dom)
MDN에서 appendChild와 append에 대해서 검색하고, 차이에 대해서 공부하세요. (difference between appendChild and append in javascript dom)
textContent와 innerHTML의 차이 (difference between textContent and innerHTML)
innerHTML의 보안상 단점 (mdn innerHTML security issue)
Advanced 2
element와 node의 차이 (difference between element and node in javascript dom)
children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)
Node가 element의 상위개념이다
dom은 document 객체를 통해 html을 접근
queryselector: 맨처음 만나는 걸 가져옴
queryselectorAll: 전부를 가져옴
set attribute(1-->2가 됨)
onclick(속성이라서 마지막 값만 가져옴) vs. addevent listener(무한대로 추가가능)
what is inner html?
참고 자료
https://indepth.dev/here-is-why-appendchild-moves-a-dom-node-between-parents/
