DOM
-
Shadow DOMDOM/HTML5 2022. 12. 9. 13:57
[출처: https://javascript.info/shadow-dom] Shadow DOM Shadow DOM은 캡슐화를 위해 사용됩니다. 이를 통해 구성 요소는 고유한 "섀도우" DOM 트리를 가질 수 있으며 기본 문서에서 실수로 액세스할 수 없으며 로컬 스타일 규칙 등을 가질 수 있습니다. Built-in shadow DOM 복잡한 브라우저 컨트롤이 어떻게 생성되고 스타일이 지정되는지 생각해 본 적이 있습니까? (예 ) 브라우저는 그것들을 그리기 위해 내부적으로 DOM/CSS를 사용합니다. 그 DOM 구조는 일반적으로 우리에게 숨겨져 있지만 개발자 도구에서 볼 수 있습니다. 예를 들어 Chrome에서는 개발자 도구에서 "Show user agent shadow DOM" 옵션을 활성화해야 합니다...
-
대체 텍스트 가이드DOM/HTML5 2022. 10. 5. 21:24
구체적이고 간결하다 가능한 한 적은 수의 단어를 사용하십시오. 개체의 색상이 관련이 있습니까? 배경의 날씨가 관련이 있습니까? 사람의 머리색이 중요합니까? 콘텐츠 작성자는 이 정보가 메시지에 추가되거나 삭제되는지 여부를 판단해야 합니다. *문자 제한은 100-150입니다. (권장 125자) 미학이 아닌 정보를 기술하라 "밝은 파랑새의 그래픽"과 같이 그림이 어떻게 보이는지 설명하지 마십시오. "트위터 아이콘"과 같이 이미지 콘텐츠가 무엇이며 어떤 역할을 하는지 설명합니다. 이미지의 기능에 대해 생각하기 콘텐츠 작성자는 이유가 있어 웹 페이지에 이미지를 추가합니다. 내가 왜 이것을 포함하고 있는지 자문해 보십시오. 그것을 포함함으로써 내가 전달하려는 메시지는 무엇입니까? 이 설명을 포함하지 않으면 어떤 추..
-
대용량 이미지 분기 처리DOM/HTML5 2022. 9. 30. 20:34
사용 배경 페이지 로드시 바로 보여지는 화면인 경우 대용량 로드로 인해 흰 화면 노출로 성능 이슈 야기 모니터 해상도 증가 및 retina 디스플레이 등 1920을 훨씬 상회하는 이미지로 인해 PC는 1920, 2560, 3840 각각 해상도에 맞게 지원 필요 사용 범위 메인 이미지나 Stories 등에 배경처럼 전체사이즈로 들어가는 이미지 적용 사항 webP를 활용하여 이미지 용량 개선 (통상적으로 jpg, png 보다 가벼우나 추출 설정상 jpg가 더 가벼운 경우에는 jpg 사용 - DP 팀과 협의) (iOS11 이상 지원이므로 iOS10 이하 브라우저 지원할 지 여부 체크 - DP 팀과 협의) 웹/모바일 디바이스에 따른 반응형 이미지 동적 로드가 가능한 태그 사용 (웹/모바일간 비율이 상이하며 나타..
-
1-7. 도형 합성 - Canvas API | MDNDOM/Canvas 2021. 3. 23. 16:26
이전의 모든 예제에서 도형은 항상 다른 것 위에 그려졌습니다. 대부분의 상황에 적합하지만 도형이 합성되는 순서를 제한합니다. globalCompositeOperation 속성을 설정하여 이러한 동작을 변경할 수 있습니다. 또한 clip 속성을 사용하면 원하지 않는 모양 부분을 숨길 수 있습니다. globalCompositeOperation 기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 특정 영역을 가리고 캔버스의 특정 부분을 지우는 데 사용할 수 있습니다. (clearRect() 메소드처럼 직사각형에 국한되지 않음) globalCompositeOperation = type 새로운 도형을 그릴 때, 도형 합성 방법을 설정합니다. type은 다음 26종류의 합성 방법 중에서 선택할 수 있습니다...
-
1-6. 변형 - Canvas API | MDNDOM/Canvas 2021. 3. 15. 17:16
이 튜토리얼의 앞부분에서는 canvas 그리드와 좌표 공간에 대해 알아 보았습니다. 지금까지는 기본적인 그리드만 사용하고 필요에 따라 전체 canvas의 크기를 바꾸기만 했습니다. Transformation(변형)에는 그리드를 원점에서 다른 위치로 옮기고, 회전하며, 확대·축소까지 하는 더 강력한 방법들이 있습니다. 상태(state)의 저장과 복원 변형(transformation) 메소드를 살펴보기 전에, 더 복잡한 도면을 생성하기 시작하면 반드시 필요한 두 가지 다른 방법을 살펴보겠습니다. save() : canvas의 모든 상태를 저장합니다. restore() : 가장 최근에 저장된 canvas 상태를 복원합니다. Canvas 상태는 스택(stack)에 쌓입니다. save() 메소드가 호출될 때마다 ..
-
1-5. 이미지 사용하기 - Canvas API | MDNDOM/Canvas 2021. 3. 8. 10:02
지금까지 우리는 Canvas를 가지고 도형을 만들고 그 도형에 스타일을 적용해봤습니다. 이미지를 사용하는 기능은 의 가장 흥미로운 기능 중 하나입니다. 이 기능은 게임의 그래픽 배경이나 혹은 동적 사진 합성을 위해 사용할 수 있습니다. PNG, GIF, JPEG 등 브라우저에서 지원되는 형식 형태라면 어떠한 외부 이미지라도 사용할 수 있습니다. 같은 페이지 소스에서 다른 Canvas 요소로 만들어진 이미지 또한 사용할 수 있습니다! 이미지를 캔버스로 불러오는 것은 기본적으로 두 단계를 필요로 합니다. HTMLImageElement 개체를 참조하거나 다른 캔버스 요소를 소스로 사용합니다. URL을 제공하여 이미지를 사용할 수 있습니다. drawImage() 기능을 사용하여 캔버스에 나타난 이미지 위에 그림..
-
1-4. 텍스트 그리기 - Canvas API | MDNDOM/Canvas 2021. 3. 5. 10:45
이전 챕터에서 스타일과 컬러를 적용하는 방법에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다. 텍스트 그리기 캔버스 렌더링 컨텍스트(canvas rendering context)는 텍스트를 렌더링하는 두 가지 방법을 제공합니다. fillText(text, x, y [, maxWidth]) : 주어진 (x, y) 위치에 주어진 텍스트를 채웁니다. 최대 폭(width)은 옵션 값 입니다. strokeText(text, x, y [, maxWidth]) : 주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)합니다. 최대 폭(width)은 옵션 값 입니다. fillText 예제 텍스트는 현재의 fillStyle을 사용하여 채워집니다. function draw() { var..
-
1-3. 스타일과 색 적용하기 - Canvas API | MDNDOM/Canvas 2021. 3. 3. 17:06
도형 그리기 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그라디언트, 패턴 및 그림자를 추가하는 방법을 배우게됩니다. 색상 지금까지는 그리기 메소드만 살펴봤습니다. 도형에 색을 적용하고자 하면, fillStyle과 strokeStyle 두 가지 중요한 속성을 사용할 수 있습니다. fillStyle = color : 도형을 채우는 색을 설정합니다. strokeStyle = color : 도형의 윤곽선을 설정합니다. 여기서의 color는 CSS의 , 그라디언트 객체, 패턴 객체를 뜻합니다. 그라디언트 객체와 패턴 객체는 페이지 아래에서 설명합니다. 윤곽선과 채움 색의 초기 설정값은 ..