web APIs (Application Programming Interfaces)

응용 프로그램 프로그래밍 인터페이스 는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.

(프로그램과 프로그램을 연결해주는 다리, 매개체)

 

 

* Web APIs Security

사용자의 권한 요청이나  HTTPs를 요구 할 수 있음.

 

HTTP: Hypertext Transfer Protocal (보안 처리가 안됨)

HTTPs: Hypertext Transfer Protocal Security (보안 처리 됨)

---

Element.getBoundingClientRect() 

: 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환.

(element의 width, height를 viewport를 기준으로 한 위치 (left, top, right, bottom, x, y) 이렇게 총 8가지 속성이 있는 DOMRect) 객체를 리턴한다.)

 ! DOMRect : 인터페이스는 직사각형의 크기와 위치를 나타냅니다.

 

 

** viewport

:모바일 브라우저들은 viewport로 알려진 가상의 window상에 페이지를 렌더링 합니다. 

즉 화면 Display상의 표시 영역을 뜻합니다.

모바일 Safari는 viewport meta 태그를 도입해 웹 개발자들이 viewport 크기와 scale을 조정할 수 있게 했고, 웹 표준은 아니지만 이제 대부분 모바일 브라우저들도 이를 지원합니다.

 

데스크탑과 모바일의 viewport는 다른점이 있습니다.

데스크탑의 viewport는 브라우저 창(visible area)의 viewport와 같고, 사용자가 브라우저 창의 크기를 조정하면서 viewport의 크기도 조절할 수 있습니다.

즉 웹페이지가 viewport보다 크면 스크롤을 하여 나머지 영역을 볼 수 있습니다.

반면에 모바일 viewport는 창보다 크거나 작을 수 있고 상하 좌우로 움직이거나, 더블탭, 줌인, 줌아웃 을 통해 viewport의 배율을 변경 할 수 있습니다. (크기가 아닙니다.)

---

- 자바스크립트에서 client element 기준점은 무조건 왼쪽 맨위에!

-Client x, y VS page x, y

 클라이언트는 윈도우에서 측정, 페이지는 우리눈에 보이지 않는 페이지 기준

(문서의 제일 첫 시작점부터 측정~ 스크롤로 이해하면 쉽죠~^^)