본문 바로가기
반응형

IT/Web106

HTML 그래픽 - SVG (Scalable Vector Graphics) SVG svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안입니다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었습니다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해줍니다. 따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적입니다. 사각형 그리기 다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제입니다. 이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다! 사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같습니다. 속성 설명 width 도형의 너비를 설정함.. IT/Web 2020. 2. 11.
HTML 그래픽 - Canvas canvas 요소 canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공합니다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행합니다. 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 합니다. canvas 요소의 속성 canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간입니다. 그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 합니다. canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용하면 됩니다. 이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다! CSS .. IT/Web 2020. 2. 4.
HTML 멀티미디어 멀티미디어 파일 형식 HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리해 왔습니다. 하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있게 되었습니다. 웹 브라우저는 파일의 타입(type)을 파일의 확장자로 판단합니다. 만약에 확장자가 .html인 파일을 보면, 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것입니다. 비디오(video)나 사운드(sound)와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장됩니다. 이와 같은 멀티미디어 파일도 다음과 같이 다양한 파일 형식으로 저장될 수 있습니다. 비디오(video) 파일 형식 대표적인 비디오 파일 형식은 다음과 같습니다. 파일 형식 파일 확장자.. IT/Web 2020. 2. 4.
HTML5 에서 추가된 input 요소의 타입 및 속성 전화번호 입력 : ​ 타입(Type) HTML5에서 추가된 input 요소의 타입 HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같습니다. 숫자 입력(number) 입력 범위 지정(range) 색상 입력(color) 날짜 입력(date) 시간 입력(time) 날짜와 시간 입력(datetime-local) 연도와 월 입력(month) 연도와 주 입력(week) 이메일 입력(email) URL 주소 입력(url) 전화번호 입력(tel) 검색어 입력(search) 숫자 입력(number) 태그의 type 속성값을 "number"로 설정하면, input 요소는 사용자가 숫자를 입력할 수 있도록 해줍니다. number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수.. IT/Web 2020. 2. 4.
HTML5 의미 요소 의미 요소(semantic element) 의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다. 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다. 하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다. HTML5에서 추가된 의미 요소 HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같습니다. header 요소 nav 요소 main 요소 section 요소 article 요소 figur.. IT/Web 2020. 1. 31.
반응형

티스토리툴바