html

[HTML] HTML - 31.HTML5 그래픽 - SVG 요소

이번 시간에는 HTML5의 그래픽 요소인 SVG 요소에 대해 알아보도록 하겠습니다. SVG 요소 svg 요소는 Scalable Vector Graphics를 의미하며 XML 기반의 W3C 그래픽 표준 권고안 입니다. 기존에 사용해 왔던 canvas 요소로는 백터(vector) 이미지를 표현할 수 없습니다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 백터 이미지를 표현할 수 없게 해줍니다. 따라서 이 요소로는 도표나 그래프 등 백터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적입니다 svg 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다. 사각형 그리기 다음 예제로는 rect 요소를 사용하여 사각형을 그리는 예제입니다. 이 문장은 사용자가 웹 브라우저..

[HTML] HTML - 28.HTML5 요소 - 오디오

이번 시간에는 HTML5의 오디오와 플러그인 요소에 대해 알아보도록 하겠습니다. 오디오(audio) HTML5 이전에는 웹 페이지에서 오디오(audio)를 들려주기 위한 표준안은 없었습니다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인에 의존해야만 했습니다. 하지만 HTML5에 들어서는 태그를 이용해 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공하고있습니다. 태그를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다. 오디오 요소의 속성 이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다! control 속성은 재생, 정지 및 소리 조절 등 오디오의 기본적인 동작을 조절 할 수 있는 패널을 생성합니다. 웹 브라우저는 여러 개의 태그 중 위쪽..

[HTML] HTML - 27.HTML5 요소 - 멀티미디어 파일 형식과 비디오

이번 시간에는 HTML에 멀티미디어 파일 형식과 비디오 요소에 대해 알아보도록 하겠습니다. 멀티미디어 파일 형식 멀티미디어 파일 형식은 HTML5 이전까지 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리해 왔습니다. 하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이 멀티미디어 파일을 간단히 사용할 수 있게 되었습니다. 웹 브라우저는 파일의 타입(type)을 파일의 확장자로 판단합니다. 만약 확장자가 .html인 파일을 보면 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것 입니다. 비디오(video)나 사운드(sound)와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장됩니다. 이와 같은 멀티미디어 파일도 다음과 같이 다양한 파일 형식으로 저장될 수 ..

[HTML] HTML - 26.HTML5 요소 - input 요소의 속성

이번 시간에는 HTML에 input 요소의 속성에 대해 알아보도록 하겠습니다. input 요소의 속성 HTML에서 input 요소는 다양한 속성을 가질 수 있습니다. HTML에서 자주 사용되는 input 요소의 대표적인 속성은 다음과 같습니다. value readonly disabled maxlength size HTML5 form 요소의 속성 HTML5에서 새롭게 추가된 form 요소의 속성은 다음과 같습니다. autocomplete novalidate HTML5 input 요소의 속성 HTML5에서 새롭게 추가된 input 요소의 속성은 다음과 같습니다. autocomplete autofocus form formaction formenctype formmethod formnovalidate formt..

[HTML] HTML - 25.HTML5 요소 - input 요소의 타입

이번 시간에는 HTML에 Input 요소의 타입에 대해 알아보도록 하겠습니다. input 요소의 타입 html에서 form 요소는 다양한 타입의 input 요소를 포함할 수 있습니다. HTML에서 자주 사용되는 input 요소의 대표적 타입으로는 다음과 같습니다. text password submit radio button checkbox button HTML5 에서 추가된 input 요소의 타입 HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같습니다. 숫자 입력(number) 입력 범위 지정(range) 색상 입력(color) 날짜 입력(date) 시간 입력(time) 날짜와 시간 입력(datetime-local) 연도와 월 입력(month) 연도와 주 입력(week) 이메일 입력(ema..

[HTML] HTML - 24.HTML5 요소 - input 요소

이번 시간에는 HTML에 다양한 타입의 input 요소에 대해 알아보도록 하겠습니다. 다양한 타입의 input 요소 HTML에서는 다양한 타입의 input 요소를 이용해 사용자로부터 입력을 받을 수 있습니다. 대표적으로 사용하는 HTML input 요소는 다음과 같습니다. 텍스트 입력 비밀번호 입력 라디오 버튼 체크박스(check box) 파일 선택 박스 선택(select) 입력(drop-down 리스트) 문장 입력 버튼(button) 입력 전송 버튼(submit) 필드셋(fieldset) HTML5에서 추가된 다양한 타입의 input 요소 HTML5에서 새롭게 추가된 다양한 타입의 input 요소는 다음과 같습니다. datalist 요소 keygen 요소 output 요소 datalist 요소 data..

[HTML] HTML - 23.HTML5 요소 - 의미 요소

이번 시간에는 HTML의 의미 요소에 대해 알아보도록 하겠습니다. 의미 요소(semantic element) 의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다. 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 어떠한 목적으로 사용되었는지 코드를 살펴봐야만 알 수 있습니다. 하지만 의미 요소 중 하나인 table 요소는 코드를 직접 보지 않아도 해당 요소가 표를 만드는 태그라고 인식한다는 것을 이름 그 자체만 보아도 알 수 있습니다. HTML5 에서 추가된 의미 요소 HTML5에 새롭게 추가된 대표적인 의미 요소로는 다음과 같습니다. h..

[HTML] HTML - 22.HTML5 시작

이번 시간에는 HTML의 완전한 5번째 버전으로 월드 와이드 웹의 핵심인 HTML5에 대해서 알아보도록 하겠습니다. HTML5는 무엇인가? HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안으로 HTML5에서는 HTML 4.01,XHTML 1.1등을 대체하는 매우 혁신적인 HTML의 차세대 표준입니다. HTML5는 XML이나 XHTML과는 달리 문법적으로 매우 유연하게 대처하는 언어로써 다음과 같은 사항들을 모두 문법적으로 허용하고 있습니다. 태그 이름에 대문자 사용 속성값에 따옴표 생략 속성값 생략 빈 태그의 종료 태그(/) 생략 HTML5 문서의 기본 구조 HTML5에서는 DOCTYPE 선언이 매우 간단해졌습니다. 또한, 문자셋(character ..

[HTML] HTML - 21.HTML과 XHTML

이번 시간에는 HTML과 거의 비슷한 XHTML에 대해 알아보도록 하겠습니다. XHMTL(EXtensible HTML) XHTML이라는 것은 EXtensible HTML의 약자로 HTML과 거의 비슷하나 문법의 적용이 조금 더 엄격한 특징을 가지고 있는 언어입니다. 좀 더 엄격한 XHTML을 사용하는 이유 오늘날 웹 콘텐츠는 기존의 PC 위주 환경에서 벗어나 다양한 플랫폼이 더욱 많이 이용되고 있습니다. 따라서 부정확한 HTML 문법을 지원하는 데 필요한 자원이 부족한 환경이 점차 생겨나기 마련이기에 XHTML 문서는 하나의 XML 문서로 문법적으로 정확하기 떄문에 표준 XML 라이브러리를 이용한 자동화된 처리가 가능합니다. XHML에 변경사항 문서의 구조적 측면 XHTML DOCTYPE을 반드시 명시 ..

[HTML] HTML - 20.HTML과 자바스크립트

이번 시간에는 자바스크립트에 대해 알아보도록 하겠습니다. 자바스크립트란? 자바스크립트(Javascript)란 객체(Object)기반의 스크립트 언어 입니다. 웹 개발의 단계는 3가지가 있습니다. HTML로 웹의 내용을 작성하면 CSS로 작성된 웹을 디자인하고 자바스크립트를 통해 웹의 동작을 구현해주는 단계입니다. 자바스크립트는 주로 웹 브라우저에 사용되나 Node.js(노드JS)와 같은 프레임워크를 사용하면 서버 측 프로그래밍 에서도 사용할 수 있습니다. 현재는 컴퓨터나 스마트폰 태블릿 등에 포함된 대부분의 웹 브라우저에서는 자바스크립트 인터프리터가 내장되 있습니다. script 요소 script 요소는 해당 웹 페이지에서 사용할 스크립트(script)를 정의하기 위해 사용합니다. script 요소 내부..

[HTML] HTML - 19.HTML과 CSS

이번 시간에는 HTML에 스타일을 더해줄 CSS에 대해 알아보도록 하겠습니다. CSS란? css란 Cascading Style Sheets의 약자로 HTML 요소들의 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML4부터 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능하게 되었습니다. 오늘날 대부분의 웹 브라우저들은 무도 CSS를 지원하고 있습니다. CSS 적용법 HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같습니다. 인라인 스타일(inline style) 내부 스타일 시트(Internal style sheet) 외부 스타일 시트(External style sheet) 인라인 스타일(Inline style) 인라인 스타일이란 HTML..

[HTML] HTML - 18.Input 요소의 속성

이번 시간에는 input 요소 속성에 대해 알아보도록 하겠습니다. input 요소의 속성 input 요소의 여러 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있습니다. value 속성 value 속성은 input 요소의 입력 필드(input field)에 나타나는 초기값을 설정합니다. 이름: 학번: 학과: readonly 속성 readonly 속성은 사용자가 입력 필드를 볼 수는 있으나 수정할 수는 없도록 설정합니다. disabled 속성과 다를 점은 전송 버튼(submit)을 누를 시 초기값이 서버로 전송됩니다. 이름: 학번: 학과: disabled 속성 disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정합니다. disabled 속성이 설정된 입력 필드는 사용..