DOM/HTML5
-
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 팀과 협의) 웹/모바일 디바이스에 따른 반응형 이미지 동적 로드가 가능한 태그 사용 (웹/모바일간 비율이 상이하며 나타..
-
HTML 오디어 / 비디오 DOM 참조 | W3CDOM/HTML5 2021. 2. 24. 11:44
HTML 오디어 / 비디오 메소드 Method Description addTextTrack() 오디오 / 비디오에 새 텍스트 트랙을 추가합니다. canPlayType() 브라우저가 지정된 오디오 / 비디오 유형을 재생할 수 있는지 확인합니다. load() 오디오 / 비디오 요소를 다시 로드합니다. play() 오디오 / 비디오 재생 시작 pause() 현재 재생중인 오디오 / 비디오를 일시 중지합니다. HTML 오디오 / 비디오 속성 Property Description audioTracks 사용 가능한 오디오 트랙을 나타내는 AudioTrackList 객체를 반환합니다. autoplay 오디오 / 비디오가 로드되는 즉시 재생을 시작할지 여부를 설정하거나 반환합니다. buffered 오디오 / 비디오의 ..