프론트 엔드/HTML

[HTML] HTML - 32. 마무리

이로써 HTML5는 모든 기초 요소를 알아보았습니다. HTML5는 굉장히 오랜 역사를 지녔고 HTML5를 이어 프론트엔드 백엔드 언어들이 무수히 많이 등장했습니다. 여러분이 HTML로 내가 사이트의 레이아웃을 을 태그로 구성할 수 있다면 구성 후 레이아웃을 꾸며줄 언어가 필요하겠죠? 그것을 이어주는 것이 바로 다음 언어인 CSS입니다. CSS는 다소 평범한 태그로만 구성된 HTML을 조금 더 섬세하게 구며주는 언어라고 보시면 됩니다. CSS를 이어서 Scss와 Styled-components등 무수히 많은 css 라이브러리가 탄생했습니다. CSS를 배운 뒤 최종 단계는 Javascript입니다. javascript는 HTML로 레이아웃을 CSS로 스타일을 작성후 최종적으로 동작을 구성하는 언어입니다. 이..

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

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

[HTML] HTML - 30.HTML5 그래픽 - Canvas 요소

이번 시간에는 HTML5의 그래픽 요소인 Canvas 요소를 알아보는 시간을 가져보도록 하겠습니다. Canvas 요소 HTML5의 canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공하는 요소입니다. 이 요소로는 그래픽을 위한 컨테이너(container)만 수행합니다. 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(Javascript) 등의 스크립트 언어를 이용해야 합니다. canvas 요소를 지원하는 주요 웹 브라우저 버전은 다음과 같습니다. canvas 요소의 속성 canvas 요소는 테두리(border)도 콘텐츠(content) 도 없는 웹 페이지 내의 단순한 사각형의 공간으로 반드시 style 속성을 이용해 캔버스의 크기를 설정해야 합니다. 또한 canvas 요소를 스크..

[HTML] HTML - 29.HTML5 요소 - 플러그인

이번 시간에는 HTML5의 플러그인 요소에 대해 알아보도록 하겠습니다. 플러그인(Plug-in) HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해주는 프로그램을 의미합니다. 가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Rdf Reader 등이 있고 이러한 플러그인은 object 요소는 embed 요소를 사용해 HTML 문서에 추가할 수 있습니다. object 요소 HTML 에서 object 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용합니다. 이 요소로는 모든 웹 브라우저에 동작하며, 객체 뿐 아니라 또 다른 HTML 문서를 삽입할 수 있습니다. 또한, object 요소는 이미지를 삽입할 때도 사용할 수 있습니다. embed 요소 embed ..

[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을 반드시 명시 ..