티끌모아 태산

relative

원래 있어야할 장소(원래 item이 있었던 위치)에서 옮겨간 것.

fixed

상자에서 완전히 벗어나서, 페이지 상에서 옮겨가는 것

absolute

내가 위치하고 있는 상자 안을 기준으로 옮겨지는 것.

Flex Box

자식에게 명시하지 않고 부모에게 명시한다. div의 부모를 diplay: flex로 만든다.

을 적용하고 싶으면 먼저 display: flex가 필요하다. 

<div> 안의 요소들도 flex를 하면 justify-content, align-item이 가능하다.

flex-direction: column으로 하면 주 축은 수직이 되고, 교차 축은 수평이 된다.

justify-content

기본 축(주 축) 가로(수평) 정렬 방식 

align-item

교차 축 세로(수직) 정렬 방식, height: 100vh로 설정한 뒤에 align-item: center를 한다. 

기본 body가 이미 전체를 중심으로 하기에 height: 100vh를 하지 않으면 움직임이 없다. (body를 기준으로 할 때만)

block - 옆에 다른 요소가 올 수 없음.

inline - 옆에 다른 요소가 올 수 있음. (span, a link, image)

어떤 요소가 inline이면 height, width를 가질 수 없다. (inline은 높이와 너비가 없다.)

display 속성으로 block, inline 값을 바꿀 수 있음.

margin : box의 border로부터 바깥에 있는 공간 

margin 순서 : 위 - 오른쪽 - 아래 - 왼쪽 (시계 방향)

collapsing margins : 위, 아래쪽에서만 발생

SetInterval(fn, 1000)

두 인자 값을 받는다.

첫 번째 인자로는 실행할 함수를 받고 (fn), 

두 번째 인자로는 그 함수를 실행하고 싶은 시간 간격을 입력한다. 단위는 millisecond 기준이기 때문에 1초당 1000으로 적는다. 0.5초면 500.

완성된 코드

완성된 코드

완성된 코드

실패한 코드

완성된 코드

평균을 출력하는 부분에서 / 를 입력하면 제출한 답이 틀린다고 나온다. 

문제에서 평균 점수는 항상 정수를 출력하라고 했으니, 소숫점 값을 버리고 출력하는 // 을 사용하면 된다.