-
button으로 style을 관리하는것보다 btn 클래스를 붙여 관리하는 것이 추후 sub button이나 primary button이 생겼을 때 관리가 용이하다.
-
:root 의사 클래스는 문서 트리의 루트 요소를 선택한다. HTML의 루트 요소는 요소이므로, :root의 명시도가 더 낮다는 점을 제외하면 html 선택자와 똑같다.전역 CSS 변수 선언에 유용하게 사용할 수 있다.
:root{
--color-black : black;
--base-space:8px;
} -
view port : 웹페이지가 사용자에게 보여지는 영역
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정한다.. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 준다.
-
initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 한다. 0~10 사이의 값을 가진다.
이것외에도 다음과 같은 값을 지정할 수 있다.
-
minimum-scale : 줄일 수 있는 최소 크기를 지정한다. 0~10 사이의 값을 가진다.
-
maximum-scale : 늘릴 수 있는 최대 크기를 지정한다. 0~10 사이의 값을 가진다.
-
user-scalable : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정한다.
위의 줌 레벨은 1이 원래크기이고, 0.5 라면 50% 축소를 뜻한다.
width와 height에서 %를 사용할 경우 부모 태그의 부분 중 그 %만을 차지하지만 vh나 vw를 사용하면 뷰포트의 %를 차지하게 된다.
- cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정한다.
cursor 속성은 쉼표로 구분한 0개 이상의<url>과, 필수로 지정해야 하는 키워드 값으로 이루어진다. 각각의<url>은 이미지 파일을 가리켜야 한다. 브라우저는 첫 번째 이미지를 불러오려 시도하고, 실패했을 땐 다음 이미지를, 모두 실패하거나 지정한 이미지가 처음부터 없었다면 키워드 값을 사용한다.
<url>은 공백으로 구분한 숫자 쌍을 받을 수 있다. 두 숫자는 이미지의 좌상단 모서리를 기준으로, 커서가 상호작용하는 부분의 x, y 좌표를 나타낸다.
-
transition CSS 속성은 transition-property, transition-duration, transition-timing-function 과 transition-delay를 위한 단축 속성이다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있다. 엘리먼트의 각 상태는 가상 클래스를 사용해 정의된 :hover 나 :active 또는 자바스크립트를 사용해 동적으로 만들어진 것들이다.
-
:hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택한다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택된다.
-
:active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타낸다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미한다.
-
scale()은 엘리먼트의 크기를 조정하는 함수이며 2차원상에서 수직 수평 모두 조작 가능하다. 이것의 결과는 transform-function data type이다.
-
Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능하다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있다.
fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않는다. Code가 404나 500을 반환하더라도 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다.
-
then() 메서드는 Promise를 리턴하고 두 개의 콜백 함수를 인수로 받는다.. 하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다.
-
Document.querySelector(selector)는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다.
**선택자를 만족하는 모든 요소의 목록이 필요하다면 document.querySelectorAll(selector)를 쓰는 것이 좋다.
-
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
13.EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 일반적인 대상은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다.
addEventListener(type, listener)는 EventTarget의 주어진 이벤트 유형에, EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동한다.
type : 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열.
listener : 지정된 타입의 이벤트가 발생했을 때, 알림(Event 인터페이스를 구현하는 객체)을 받는 객체. EventListener 인터페이스 또는 JavaScript function를 구현하는 객체여야만 한다.
