Language

[HTML] 웹페이지 구성하는 기본 태그

문서 형식 정의 tag 문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와 같다. html tag html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야한다. 단는 예외이다. 화면에 표시할 모든 콘텐츠는 이곳에 기술한다. html은 글로벌 어트리뷰트를 지원한다. 특히 lang 어트리뷰트를 사용하는 경우가 많다. 다음은 한국어를 주언어로 사용하는 경우의 예이다. head tag head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 ..

[HTML] 시맨틱 웹(Semantic Web)

대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google이나 Naver와 같은 검색사이트를 이용한다. “나는 검색된다. 고로 존재한다”는 말이 있을 정도로 웹사이트는 검색엔진에의 노출이 매우 중요하다. 당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. 검색엔진은 이 시대의 가장 강력한 권력 중의 하나라고 말할 수도 있겠다. SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다. 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이..

[HTML] HTML 기본 문법

HTML5 HTML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다. HTML5 는 2014년 10월 28일 확정된 차세대 웹 표준으로 아래와 같은 기능들이 추가되었다. 멀티미디어(Multimedia) : 플래시와 같은 플러그인의 도움없이 비디오 및 오디오 기능을 자체적으로 지원한다. 그래픽(Graphics & Effects) : SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원한다. 통신(Connectivity) : 지금까지의 HTML은 단방향 통신만이 가능하였으나 HT..

[HTML] SVG

svg 요소 svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안이다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다. 따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적이다. 사각형 그리기 다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제이다. 이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다! 사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같다. 속성 설명 width 도형의 너비를 설정함. hei..

[HTML] Canvas

canvas 요소는 웹 페이지에 그래픽을 그려주는 방법을 제공한다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행한다. 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 한다. canvas 요소의 속성 canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간이다. 그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 한다. canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용하면 된다. 이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타난다. CSS 좌표 체계 HTML 그래픽 요소에서 사용하는..

[HTML] Canvas vs SVG

Canvas vs SVG canvas 요소와 svg 요소는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소이다. 어떤 경우에는 canvas 요소를 사용하는 것이 더 나으며, 어떤 경우에는 svg 요소를 사용하는 것이 더 나은 경우가 있다. 작업 환경에 따른 선택의 기준 다음 그림은 화면 크기 및 픽셀 수에 따른 렌더링 시간(rendering time)을 보여준다. 렌더링(rendering)이란 프로그램을 사용하여 모델로부터 영상이나 화면을 만들어내는 과정을 가리킨다. 따라서 렌더링 시간이란 코드를 실행하여 그 결과가 화면에 표시되는 시간을 의미한다. canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋다. svg 요소의 성능은 화면이 크거나, 픽셀 수가 적을 경우(