HTML은 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language)이다.
- HTML은 웹 페이지를 위한 지배적인 마크업 언어이다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠(<>) 괄호 둘러싸인 "태그"로 되어 있는 HTML 요소(HTML element) 형태로 작성한다.
- 하이퍼텍스트는 사용자에게 내용의 비순차적 검색이 가능하도록 제공되는 텍스트이다. 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다.
- 마크업 언어는 태그(Tag) 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.
- 태그는 어떤 정보에 메타데이터로 부여된 키워드 또는 분류이다.
- 메타데이터는 데이터에 대한 데이터이다.
- 대화형 양식 → 대화형 매체는 텍스트, 그래픽, 애니메이션, 영상, 소리와 같은 콘텐츠를 눌러서 사용자의 동작에 반응하는 디지털 컴퓨터 기반 시스템 상의 제품과 용역을 가리킨다.
- HTML 요소는 HTML 문서의 구문 분석 단계 이후에 HTML 태그로부터 생성된다.
- HTML 문서는 "문서"(document)로 전달되어 구문 분석 과정을 거쳐 웹 브라우저 내에서 문서 객체 모델(DOM) 내부 표현으로 변환된다. 웹 브라우저 표현과 자바스크립트 접근은 문서 객체 모델에서 수행되며 원래의 문서에서 수행되지 않는다.
- 문서 객체 모델은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다. DOM은 또한 W3C가 표준화한 여러 개의 API의 기반이 된다.
HTML5
- HTML5는 2014년에 확정된 차세대 웹 표준으로 다양한 기능들이 추가되었다.
- 다양한 기능은 다음과 같다.
- 멀티미디어 → 플래시와 같은 플러그인의 도움 없이 비디오 및 오디오 기능을 자체적으로 지원한다.
- 그래픽 → SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원한다.
- 통신 → 지금까지의 HTML은 단방향 통신만이 가능했으나 HTML5는 서버와의 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능하다.
- 디바이스 접근 → 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 있다.
- 오프라인 및 저장소 → 오프라인 상태에서도 애플리케이션을 동작시킬 수 있다.
- 시맨틱 태그
- CSS3
- HTML5 문서는 반드시
<!DOCTYPE html>으로 시작하여 문서 형식을 HTML5로 지정한다. - 실제적인 HTML document는 2행부터 시작되는데
<html>과</html>사이에 기술한다. <head>와</head>사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치한다. 이 정보들은 브라우저에 표시되지 않는다.- 웹 브라우저에 출력되는 모든 요소는
<body>와</body>사이에 위치한다.
HTML5 기본 문법
- 요소 → HTML 요소는 여는 태그와 닫는 태그, 그리고 태그 사이에 위치한 content로 구성된다.
- 요소는 중첩될 수 있다. 다시 말해, 요소는 다른 요소를 포함할 수 있다.
- 빈 요소 → content를 가질 수 없는 요소를 빈 요소라 한다.
<meta charset="utf-8">와 같이 HTML 속성(HTML Attribute)만을 가질 수 있다.- 빈 요소 중 대표적인 요소는 아래와 같다.
- br, hr, img, input, link, meta
- HTML 속성은 HTML 요소 유형의 수정자이다. 속성은 태그의 동작을 제어하기 위해 "여는 태그" 안에 사용되는 특수 용어이다. 즉, 속성은 요소 유형의 기본 기능을 수정하거나, 아니면 스스로 기능하지 못하는 특정한 요소 유형에 기능을 제공한다. HTML 속성은 일반적으로 이름-값 쌍으로 나타나며, 구분은
=로 하며 요소의 이름 뒤의 요소의 시작 태그 안에 작성된다. - 전역 특성(HTML Global Attribute) → 전역 속성은 모든 HTML 요소가 공통으로 사용할 수 있는 속성이다. 몇몇 요소에는 효과가 적용되지 않을 수 있다.
- 자주 사용되는 전역 특성은 아래와 같다.
- id, class, hidden, lang, style, tabindex, title
- 주석 → 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.
<!-- 내용 -->와 같은 형식으로 주석을 작성한다.
의미론적인 웹(시맨틱 웹)
- 배경
- 웹 상에 축적된 정보가 방대해 짐에 따라 정보 검색시 무수히 많은 불필요한 정보가 돌출했다. 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있도록 정보 자원의 의미를 이해할 수 있도록 웹 기술을 발전시키는 비전이 필요했다.
- 개념
- 웹 기술의 비전으로 제시된 시맨틱 웹은 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용 등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만드는 것이 목표이다.
- 시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
- 예
<b>와<strong>모두 똑같이 text에 bold체를 지정하지만 strong이 의미론적으로 중요성을 가진다.<i>와<em>모두 똑같이 이탤릭 체로 표기되지만 ㄷ가 emphasized의 준말로 의미론적으로 더 중요하다.
다른 몰랐던 태그들
<mark>→ 특정 내용을 하이라이트 한다.<del>→ 취소선을 긋는다.<ins>→ 밑줄을 긋는다.<sub>/<sup>→ subscripted 와 superscripted의 준말이다. 각각 아래에 쓰인, 위에 쓰인 글자를 지정한다.<pre>→ 형식화(preformatted)된 텍스트를 지정한다. pre 태그 안에 작성된 내용은 작성된 그대로 브라우저에 표시된다.
사용자와의 커뮤니케이션을 위한 폼 태그
- 속성으로 method가 있는데, GET과 POST 중에 선택해야 한다. 이 둘은 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타낸다. 이를 HTTP request method라 한다.
- GET 방식
- URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터에 한계(최대 255자)가 있다.
- REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청한다.
- POST 방식
- 서버로 데이터를 전송한다. 요청 본문의 유형은 Content-Type 헤더로 나타낸다. 유형은 HTML 양식을 통해 결정된다.
- URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.
- REST API에서 POST 메소드는 특정 리소스의 생성을 요청한다.
- input 태그
- 사용자로부터 데이터를 입력받기 위해 사용된다.
- type 속성에 의해 input의 종류가 결정된다. ajax를 사용할 경우 type 속성이 form 태그 내에 존재하지 않아도 된다.
- 서버에 전송되는 데이터는 name 속성을 키로, value 속성을 값으로 하여 key=value의 형태로 전송된다.
공간을 분할하는 태그
- div, span, table 등이 있다. 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모현대에는 주로 div를 사용하여 레이아웃을 구성한다.
- div 태그는 의미론적으로 의미가 없기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이다. 하지만 인터넷 익스플로러(Internet Explorer) 브라우저에서는 작동하지 않기 때문에 주의해야 한다.
- header → 헤더
- nav → 메뉴와 같은 내비게이션
- aside → 웹 사이트의 측면에 위치하는 공간
- section → 본문의 여러 내용을 포함하는 공간
- article → 본문의 독립된 주 내용
- footer → 웹 사이트 하단의 정보를 표시하는 푸터
출처 및 참고 자료
'프로그래밍-학습기록 > Web' 카테고리의 다른 글
| CSS Position 속성 (static, relative, absolute, fixed) (0) | 2021.01.07 |
|---|---|
| CSS display 속성과 block, inline, inline-block, none (0) | 2021.01.07 |
| CSS (개요, 선택자, 속성, 값) (0) | 2021.01.06 |