후기

후기

Event Loop

HTML script tag에 type="module"추가.src 폴더에 각각의 클래스 파일만들어서 export default class PopUp{}.

innerText는 사람이 읽을 수 있는 text(렌더링 후의 text)만 가져오지만, textContent는 script, style 태그 안의 text를 포함한 display=none안의 text도 가져온다.https://ko.javascript.info/

후기

event.preventDefault()는 브라우저에서 발생할 수 있는 기본적인 행동을 취소해버린다. 예를 들어 체크박스를 클릭해도 브라우저에서 체크 표시가 나타나지 않는다. preventDefault()를 사용할 수 없는 passive한 이벤트들이 있는데, event

feat.DreamCoding!DOM(Document Object Model) - document...BOM(Browser Object Model) - navigator, storage, fetch...EventTarget.addEventListener()EventTa

후기

후기

후기

Intersection Observer APIDocument.elementFromPoint()Element.closest()

button, input과 같은 form에 관련된 태그들은 body에서 정의한 폰트 CSS 값들을 상속받지 않아서 따로 정의해야 한다.\* { } 여기 안에 스타일을 지정하는 순간, HTML에 있는 모든 요소들을 다 찾아서 스타일을 적용해 주는데, 폰트와 같이 텍스트

box-sizing 기본값 content-box는 padding, border, margin을 제외하고 오직 content-box의 width, height가 적용된다. border-box는 content, padding, border 까지가 width, height가

<img>var htmlImageElement = new Image(width, height);example <img width="100" height="200" src="picture.jpg">https://developer.mozilla.org/

TV에 크롬 캐스터 켜두면 배경화면이 일정시간 있다가 변하는 것 처럼 효과 만들기.html : 2. css item들을 position:absolute;로 겹쳐두고 opacity:0;으로 보이지 않게 해준다. z-index:0;item에 show 클래스가 더해지면 op

Q/A에서 자주 보는 펼쳤다가 접기html로 Q와 A를 형제 관계로 배치했다.cssQ가 hover 상태, active class 추가된 상태일 때 색을 변경해준다.A는 overflow:hidden; 자식 크기에 맞춰주고, max-height:0 , transition:

버튼을 누르면 snackBar가 잠깐 보였다 사라진다.htmlbutton에 onclick="snackBarFunc()"을 적용하고, 보여질 snackBar를 설정한다.csssnackBar에 visibility와 animation(위치,투명도)을 적용한다.snackBar

버튼을 누르면 창이 나타나면서 주변 배경은 그림자가 지고, 닫기 버튼이나 그림자 배경을 누르면 창이 사라진다.modal htmlmodal-layer(그림자 배경)와 modal-wrap(컨텐츠)으로 구성 modal cssposition: fixed로 고정된 창을 만든다.

sticky한 Nav를 scroll up-down 할 때 색상을 바꾸려고 한다.window에 addEventListener로 scroll 이벤트를 지정한다.top 변수에 스크롤 위치를 가져와서 스크롤 위치가 50보다 크면 class="active"를 nav의 class