2021.09.03

후기

2021년 9월 3일
·
0개의 댓글
·

2021.09.02

후기

2021년 9월 2일
·
0개의 댓글
·

Event Loop

Event Loop

2021년 9월 1일
·
0개의 댓글
·

리팩토링

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

2021년 8월 27일
·
0개의 댓글
·

setInterval, clearInterval

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

2021년 8월 27일
·
0개의 댓글
·
post-thumbnail

carrot-game

후기

2021년 8월 26일
·
0개의 댓글
·

Event

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

2021년 8월 25일
·
0개의 댓글
·

DOM

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

2021년 8월 24일
·
0개의 댓글
·

Web APIs (2)

후기

2021년 8월 23일
·
0개의 댓글
·
post-thumbnail

Web APIs (1)

후기

2021년 8월 20일
·
0개의 댓글
·

git

후기

2021년 8월 19일
·
0개의 댓글
·

observer

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

2021년 8월 17일
·
0개의 댓글
·

portfolio-project

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

2021년 8월 15일
·
0개의 댓글
·

CSS: Essentials

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

2021년 8월 14일
·
0개의 댓글
·
post-thumbnail

쇼핑몰 미니게임 클론코딩

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

2021년 8월 12일
·
0개의 댓글
·
post-thumbnail

slide

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

2021년 8월 11일
·
0개의 댓글
·
post-thumbnail

Accordion(Q/A)

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

2021년 8월 10일
·
0개의 댓글
·

snackBar

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

2021년 8월 10일
·
0개의 댓글
·
post-thumbnail

modal

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

2021년 8월 10일
·
0개의 댓글
·

scroll

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

2021년 8월 9일
·
0개의 댓글
·