마크업(MarkUp)언어
마크업(MarkUp)언어란?
- 마크업(Markup)이란 어떠한 표시를 뜻하며, 마크업 언어(Markup Language)는 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어를 지칭한다.
표시를 하여 문서를 구조화한다는 말이 와닿지 않을 수 있지만, 이는 우리 주변에서 꽤 흔히 쓰이는 방법이다.
한 가지 예시를 들어보자면 구름으로 택배를 보내려고 한다.
택배를 보내기 위해 필요한 정보를 아래 두 방식으로 정보를 기록하였는데 어떤 정보가 더 보기 편할까?
대부분의 사람들이 아래 방식처럼 각 정보가 어떠한 의미를 가지는지 표시한 것을 더 선호할 것이다.
좀 더 직관적이고 정보를 파악하기 편하기 때문이다.
여기서 주소, 수령인, 연락처 같은 표시가 바로 마크업에 해당한다.
마크업 언어는 문서나 데이터의 구조를 표현한다.
설명을 종합해보면 HTML은 웹페이지의 구조 혹은 데이터 작성을 위한 마크업 언어이다.
태그(tag)
- HTML에서는 몇가지 태그가 미리 정의되어 있으며, 용도에 맞게 태그를 사용할 수 있다.
<html>, <head>, <title>, <body> 등…
닫는 태그가 없는 태그
- 일반 적인 태그는 <태그> 처럼 시작하면 </태그> 처럼 닫아주어야 하나, 일부 태그는 닫지 않는 경우가 있다.
<br>, <img>, <meta>, <link>, <input>, <hr>
위 태그 등은 닫는 태그가 불필요한데, 그 이유는 태그 내부에 넣을 값이 없기 때문이다.
태그의 속성
- 태그는, 태그 내부에 값을 넣을 수 있을 뿐만 아니라, 태그마다 속성을 부여할 수 있다.
태그의 속성은 아래와 같이 <태그 속성="값"> 의 형태로 사용한다.
id, class 속성
- 모든 태그에는 id 속성과 class 속성을 지정해 줄 수 있는데, 이를 이용하면 CSS나 JavaScript에서 태그를 좀더 쉽게 다룰 수 있다.
id는 원칙상 하나의 id당 하나의 태그에만 적용 할 수 있으며, class는 하나의 class를 여러 태그에 적용 할 수 있다.
id 속성
- 고유 영역 식별자
document.getElementId()를 통해 고유 영역을 참조할 수 있습니다.
- Label과 input 컨트롤을 연결하기 위한 식별자
- 표와 표 설명을 연결하기 위한 식별자
class 속성
- 여러 영역에서 중복 정의를 허용하여 재사용이 가능한 식별자
- 한 영역에서 여러개 정의를 허용하여 재사용이 가능한 식별자
name속성
- 폼 전송 이벤트 발생 시, 서버로 데이터를 전송하기 위한 식별자
name속성은 자바스크립트에서 요소를 참조할 수 있게 한다.
javaScript 프로그래밍 코드를 사용하여 <select>요소의 name 속성 값을 식별
아여 사용자가 선택한 값을 가져와 출력할 수 있다.
자주 사용하는 HTML태그
- 기본구조, head 내부에 사용하는 태그
- 콘텐츠로 사용하는 태그 1
- 콘텐츠로 사용하는 태그 2
- 표 태그
- 콘텐츠에 사용하는 태그
- 그룹 부분 전용 블록요소
