● HTML 학습을 함께 하신다면 VS Code 혹은 Eclipse를 설치하거나, 프로그램 설치가 부담스럽다면 https://www.w3schools.com/사이트를 통해 실습을 하면 큰 도움이 됩니다. * 저는 Front End 개발 시 VS Code가 프로그램이 가볍고 편해서 주로 사용합니다.
● Hyper Text Markup Language의 약자로 간단히 말해서 웹 문서를 만드는 언어이다. -웹 페이지의 문서를 담당한다. (구조) - 마크업 언어로 웹 문서를 작성하며, tag를 사용하여 문서의 구조를 표현한다. - 1990년도 이후 웹에서 사용하는 국제표준 언어(W3C 공식 지정)이다. - HTML 문서의 확장명은 .html 혹은 .htm이다. - Hyper Text : "텍스트를 뛰어넘다"라는 의미를 가진다. - Markup : "표시한다"라는 의미를 가진다.
●Web Application - 인터넷으로 연결된 웹 환경에서 사용자들 간의 연결을 통해서 서비스를 제공받는 것이다.
HTML의 특징
1. 문서를 작성할 수 있는 곳 어디든 작성이 가능하다. * 메모장, 한글, html 파일 등 2. tag(태그) 형태로 사용한다. (아래 참고) 3. 대소문자 구별이 없다. * 가독성을 위해 소문자 사용 권장 4. 띄어쓰기(space)와 줄 바꿈(enter)의 구별이 없고, 띄어쓰기는 1칸까지 인정해준다. * 띄어쓰기 특수문자( ) 혹은 줄바꿈 tag(<br>)를 사용하거나 <pre> tag를 사용하면 해결 가능하다. (다음 게시물 참고) 3. 따옴표의 구분이 없고(" ", ' '), 생략도 가능하다. * 가독성을 위해 가급적 "" 사용을 권장
- 아래는 모두 같은 코드다.
<INPUT TYPE = "TEXT">
<input type = "text">
<input type = 'text'>
<input type = text>
HTML5
HTML은 HTML → HTML4.0 → XHTML → HTML5 순으로 다양한 형태로 발전되어 왔다.
● HTML 개발 배경 - 기존의 Web Browser에 많은 플러그인이 설치되면서 많은 문제점이 발생했고, 이를 해결하기 위한 방안으로 W3C에서 Web Application 1.0을 HTML5로 수용했다. 2014년에 정식으로 배포되었으며, 계속 업그레이드되고 있다.
● HTML5 특징 1. 멀티미디어 요소 재생 - 과거 브라우저는 멀티미디어를 재생하기 위해 별도의 외부 플러그인을 사용해야 했으나, HTML5에서는 멀티미디어 요소를 별도의 플러그인 없이도 재생 가능하다. 2. 서버와 통신 - 서버와 클라이언트 사이에 소켓 통신이 가능 3. Semantic tag 추가 - 웹 사이트를 검색엔진이 좀 더 빠르게 검색할 수 있도록 하기 위해 특정 tag에 의미를 부여하는 방식이다. - 예를 들어 웹문서의 모든 내용을 검색하는 것이 아닌 semantic tag로 등록된 태그만을 검색해서 보다 빠르게 검색을 진행할 수 있다. [HTML5 구조/표현의 분리]
● 구조/표현의 분리로 얻을 수 있는 이점 - 웹 표준을 준수함으로써 웹 문서 파일의 용량을 줄일 수 있다. - 트래픽의 감소 효과를 얻을 수 있다.
웹 표준이란?
- W3C(World Wide Web Consortium)에서 HTML5를 웹 표준으로 권고하고 웹 브라우저는 표준 권고안을 기반으로 웹을 개발한다.
●웹 접근성 - 인터넷 접속 환경이 다른 모든 브라우저에서 웹 서비스가 정상적으로 보일 수 있도록 하는 것이다. - 신체적, 기술적 여건과 차별 없이 누구나 인터넷에 접속해서 서비스 이용 가능하고 견고한 콘텐츠 접근을 보장받는다.
Web & HTML 작동원리
- 서버는 클라이언트의 요청을 내용 분석하여 결괏값을 HTML로 전송 - 서버는 결괏값을 전송한 후 클라이언트와 연결 종료 - 클라이언트는 서버로부터 전달받는 HTML을 Web Browser에 표시 - 각 Web Browser는 브라우저 엔진이 내장되어 있고, 이 엔진이 tag를 해석하여 화면에 표현
[HTML 작동원리]
HTML 문서 구조
● <!DOCTYPE> 태그 선언의 변화 - DOCTYPE 태그는 <html> 태그를 정의하기 전에 가장 먼저 선언하는 태그로 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문이다. - HTML 4.01에서는 SGML을 기반으로 하기 때문에 DTD를 참조해야 하지만 HTML5부터는 DTD를 참조할 필요가 없다. - HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 5
<!DOCTYPE html>
● 시작 tag(<tagname>)와 종료tag(</tagname>)가 있으며, tag 사이에 문서 내용을 정의한다. ● 각 tag는 고유의 의미를 가지고 있으며, Web Browser는 이 의미에 따라 문서를 화면에 표시한다.
댓글