본문 바로가기

웹/HTML510

HTML5 - svg svg 요소 svg 요소는 Scalavle Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안입니다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었습니다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해줍니다. 따라서 svg 요소는 도표나 그래프 등 벡터 기반의 다이어그램을 표현하는 데 매우 효과적입니다. 사각형 그리기 svg 요소를 이용한 사각형 그리기 이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다! HTML 삽입 미리보기할 수 없는 소스 사각형을 그리는데 사용하는 rect 요소의 속성 - width : 도형의 너비를 설정 - height : 도.. 2023. 6. 26.
HTML5 - Canvas canvas 요소 cnavas 요소는 웹 페이지에서 그래픽을 그리기 위해 사용되는 요소입니다. 그래픽만을 위한 컨테이너 역할을 하고 경로, 상자, 원, 텍스트 그리기 및 이미지 추가와 같은 다양한 메서드를 가지고 있습니다. canvas 요소의 폭과 높이는 CSS 픽셀로 정의되며, 명시하지 않을 경우 기본값으로 300x150 픽셀이 설정됩니다. cnavas 요소는 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작, 실시간 비디오 처리등 다양한 용도로 사용될 수 있습니다. canvas 요소의 속성 cnavas 요소는 id 와 style 속성만 존재한다. canvas 그림 그리기 사각형 그리기 이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다! HTML 삽입 미리보기할 수 .. 2023. 6. 26.
HTML5 - 플러그인 플러그인(Plug-in) HTML5 플러그인은 문서의 지정된 위치에 외부 콘텐츠를 임베드하는 데 사용되는 HTML 요소입니다. 이러한 콘텐츠는 외부 응용 프로그램이나 브라우저 플러그인과 같은 대화형 콘텐츠의 다른 소스에서 제공됩니다. HTML5에서는 embed 요소 embed 요소는 플러그인이나 외부 응용 프로그램에 의해 제공되는 외부 콘텐츠를 문서에 임베드합니다. 주로 플러그인을 사용하여 콘텐츠를 임베드하는 데에 사용됩니다. embed 요소는 주로 높이, 폭, URL 및 MIME 타입과 같은 속성을 사용하여 외부 리소스를 지정합니다. 2023. 6. 25.
HTML5 - 멀티미디어(2) Video 요소 HTML5 VIDEO 요소는 웹 문서에서 비디오를 재생할 수 있는 미디어 플레이어를 내장하는 HTML 요소입니다. 요소를 사용하여 비디오 뿐만 아니라 오디오 콘텐츠도 표시할 수 있습니다. Video 요소의 속성 src : 비디오 파일의 경로를 지정합니다. width : 비디오 플레이어의 너비를 지정합니다. height : 비디오 플레이어의 높이를 지정합니다. controls : 비디오 플레이어에 재생, 일시 정지, 볼륨 조절 등의 컨트로를 버튼을 표시합니다. autoplay : 페이지 로딩 후 비디오가 자동으로 재생되도록 설정합니다. poster : 비디오가 로딩되기 전에 보여줄 이미지를 지정합니다. loop : 비디오가 자동으로 반복 재생되도록 설정합니다. track : 비디오가 재생될.. 2023. 6. 25.