HTML

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

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

[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..

[Web] 웹 프로그래밍의 기초(HTML)

HTML은 HyperText Markup Language의 약자로, 모든 웹 콘텐츠는 HTML로 이루어져 있다. 크롬과 같은 웹 브라우저는 서버로부터 전달받은 HTML 문서의 구조를 해석해 화면을 구성한다. HTML은 단순한 파일 형태로 서버에 존재할 수도 있고 서버 프로그램을 통해 생성된 형태일 수도 있다. 어떤 형태이든 클라이언트인 웹 브라우저가 서버로부터 수신하는 데이터의 구조는 HTML이다. 하이퍼텍스트 하이퍼텍스트(HyperText)란 다른 정보와 연결된 텍스트를 의미하며 사용자가 관련 문서를 링크를 통해 이동하며 정보를 얻을 수 있다. 예를 들어 구글에 '고양이'를 검색하면 검색 결과 페이지에서 위키백과에 들어갈 수 있다. 위키백과 화면에서 특정 단어를 클릭하면 다시 해당 단어에 대한 설명 페..

[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] [CSS] [Bootstrap] 웹 연습

Logo HOME BAND TOUR New Your The atomsphere in New Your is lorem ipsum. Chicago Thank you, Chicago - A night we won't forget. Los Angeles Even though the traffic was a mess, we had the best time playing at Venice Beac. THE BAND We love music! What if we didn't have no pop If the popsong writers just gave up Popsong supplyment would stop That would be something And the popsong singer might just s..