부트캠프교육중/HTML8 Canvas -HTML의 태그와 javascript를 사용하면 다양한 그래픽 요소를 만들수있다. -애니메이션, 데이터 시각화, 웹 게임 개발 등 그래픽이 필요한 곳이라면 어디든지 다양하게 활용할수있다. -캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성된다. 따라서 엘리먼트를 선택할때 사용할 id를 작성해주는 것이 좋다. 캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됩니다. 이제 자바스크립트를 사용해서 엘리먼트를 선택해준다. const canvas = document.querySelector("#canvas"); 캔버스를 본격적으로 다루기 전에, 너비와 높이를 설정해주어야 한다. 크기를 설정해주지 않으면 기본적으로 300픽셀*150픽셀의 사이즈로 생성된다. 설정방법에는 두가.. 2023. 3. 17. CSS 애니메이션 CSS 애니메이션 -여러개의 CSS스타일을 부드럽게 전환시켜준다. -그중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들수있다. @keyframes 키워드 -키프레임을 활용하기 위해서는 우선 CSS로 키프레임 블록을 만들어야 합니다. /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다.*/ CSS속성 : 속성값; } }.. 2023. 3. 17. 리플로우와 리페인트 리플로우: 어떤 웹 인터랙션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것. 리페인트: 페인트 과정을 반복해 수행하는 것. const div = document.createElement('div'); document.body.append(div); div.textContent = 'hello world'; 이렇게 JavaScript 조작을 통해 변경이 일어나면, DOM 트리를 다시 구성하는 것을 시작해 CSSOM과 합쳐 새 렌더트리를 생성한다. 그리고 레이아웃과 페인트 과정을 또다시 거쳐 화면에 보여준다. DOM 조작은 리플로우, 리페인트가 일어나는 대표적인 예시이다. -DOM은 변경되면 렌더트리를 다시 구축하기 때문에 변경될때마다 리플로우와 리페인트를 다시 해야 한다. 리플로우는 렌.. 2023. 3. 16. 브라우저 렌더링 #렌더링(rendering): HTML, CSS, javaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미한다. 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 1. 사용자가 브라우저를 통해 웹 사이트에 접속한다. 2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운받는다. 3. 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리를 만든다. 4. 이어서 다운받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만.. 2023. 3. 16. 이전 1 2 다음
