전체 글41 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. HTML5 - 멀티미디어 멀티미디어 파일 형식 HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리해 왔습니다. 하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단하게 사용할 수 있게 되었습니다. 웹 브라우저는 파일의 타입(type)을 파일의 확장자로 판단합니다. 만약에 확장자가 .html인 파일을 보면, 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것입니다. 비디오(video)나 사운드(sound)와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장됩니다. 이와 같은 멀티미디어 파일도 다음과 같이 다양한 파일 형식으로 저장될 수 있습니다. 비디오 파일 형식 파일 형식 파일 확장자 설명 MPEG .mpg .mpeg Moving Pictu.. 2023. 6. 25. HTML5 - input 요소와 form 요소 속성 (2) height and width height 와 width 속성은 이미지나 요소의 크기를 지정합니다. 즉 태그의 속성이 image일 경우에는 height와 width 속성을 사용하여 이미지의 높이와 너비를 명시할 수 있습니다. list list 속성은 해당 input 요소에 대한 미리 정의된 옵션 리스트를 설정하는 datalist 요소와 관련이 있습니다. input 요소의 list 속성값이 datalist 요소의 id 속성값과 일치하면 연결이됩니다. min and max min 과 max는 숫자 입력 요소의 최솟값과 최댓값을 지정합니다. input의 type 중 number, range, date 등과 함께 사용 합니다. multiple multiple 속성은 여러 개의 파일을 한 번에 선택할 수 있는지 .. 2023. 6. 24. HTML5 - Input 요소와 form 요소 속성(1) HTML5 form 요소의 속성 autocomplete novalidate input 요소의 속성 기존 input 요소 value readonly disabled maxlength size HTML5 추가된 input 요소의 속성 autocomplete autofocus form formaction formenctype formmethod formnovalidate formatarget height and width list min and max multiple pattern placeholder required step autocomplete autocomplete 속성은 요소에 대한 자동 완성 기능을 설정합니다. 이 속성은 사용자가 이전에 입력한 값을 기반으로 자동 완성 기능을 제공하며, 브라우저가 .. 2023. 6. 24. HTML5 - input 요소 type 1. 숫자 입력(number) 코드 : 수량: HTML : HTML 삽입 미리보기할 수 없는 소스 2.입력 범위 지정(range) 코드 : 음량: HTML : HTML 삽입 미리보기할 수 없는 소스 3. 색상 입력(color) 코드 : 색상: HTML : HTML 삽입 미리보기할 수 없는 소스 4. 날짜 입력(date) 코드 : 생년월일: HTML : HTML 삽입 미리보기할 수 없는 소스 5. 시간 입력(time) 코드 : 회의 시간: HTML : HTML 삽입 미리보기할 수 없는 소스 6. 날짜와 시간 입력(datetime-local) 코드 : 이벤트 일시: HTML : HTML 삽입 미리보기할 수 없는 소스 7. 연도와 월 입력(month) 코드 : 유효 기간: HTML : HTML 삽입 미리보기할.. 2023. 6. 23. 이전 1 2 3 4 5 6 다음