HTML5 video 태그 정리 📌 video 태그 옵션 정리 0. loading="lazy" 사용자가 페이지를 스크롤할 때 필요한 이미지나 iframe만 로드되도록 하여 초기 로드 시간을 단축하여 검색 엔진 최적화에 중요한 요소 1. src: 비디오 파일의 URL을 지정합니다. 2. controls: 비디오 재생을 위한 기본 컨트롤(재생, 일시 정지, 볼륨 조절 등)을 표시합니다. 3. autoplay: 페이지가 로드될 때 비디오가 자동으로 재생되도록 설정합니다. (사용자가 소리를 듣지 못하도록 하기 위해 일반적으로 음소거와 함께 사용됩니다.) 4. loop: 비디오가 끝난 후 자동으로 다시 재생되도록 설정합니다. 5. muted: 비디오가 음소거 상태로 재생되도록 설정합니다.(autoplay와 함께 사용해야 합니다.) .. 2024. 11. 18. [HTML] 오픈 그래프 (og) 📢 오픈 그래프란? 웹 페이지 공유 시 미리보기 화면을 구성하는것이 오픈 그래프 프로토콜이다. 태그를 사용해서 공유할 제목과 이미지, 요약 정보 등을 구성 📌 오픈 그래프 속성 - og:title : 웹 페이지 제목 - og:type : 웹 페이지 유형(ex : article, movie 등) - og:image : 대표 이미지 - og:url : 링크 주소 - og:description : 웹 페이지 내용 요약 2023. 9. 15. [HTML] meta 태그 📌meta 태그란? 태그는 해당 문서에 대한 정보인 메타데이터를 정의할 때 사용된다. ,,, 요소와 같은 다른 메타데이터 관련 요소들이, 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용 📢 메타태그 속성? - http-equiv 웹 브라우저 서버에 명령을 내리는 속성 name 속성을 대신해 사용할 수 있다. - content = "정보값" meta정보의 내용을 지정 - name = "정보 이름" 몇 개의 meta정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv와 같은 기능 📢 메타태그 종류? 1. Keywords (검색엔진에 의해 검색되는 단어 지정) 2. description (웹 페이지에 대한 설명을 정의) 3. viewport (모든 장치에서 웹 사이트가 잘 보이도록 뷰포.. 2023. 9. 12. 웹 표준 및 웹 접근성 📢웹 표준이란? 어떠한 브라우저 환경에서든지 웹 사이트가 항상 동일하게 보이는것 📌웹 표준을 준수하는 법 - HTML 최상단에 DOCTYPE 선언하여 웹 페이지가 어떤 버전의 HTML, XHTML을 사용하는지 명시 - 시맨틱 태그(header, footer, nav, section 등) 사용하여 웹 페이지의 구조를 더욱 명확하게 표현 할 수 있다. - 웹 접근성을 고려하여 작업해야한다. 📌웹 표준의 장점 - 모든 브라우저에서 일관적으로 표현 되므로 웹 페이지의 호환성이 증가한다. - 검색 엔진 최적화를 할 수 있다. - 유지보수 및 확장성이 좋아진다. 📢웹 접근성이란? 장애인, 고령자 등 모든 사용자가 웹 사이트를 쉽게 접근하고 원하는 정보를 찾을 수 있도록 구현하는것 📌웹 접근성을 준수하는 법 - 이미.. 2023. 7. 28. 무료 아이콘 사용 가능한 사이트 https://thenounproject.com/ 2023. 7. 11. 이전 1 다음