HTML(HyperText Markup Language)
: 웹 페이지와 그 내용을 구조화하기 위해 사용하는 표준 마크업 언어로, 웹 페이지의 기본 구조를 담당하며, 텍스트, 이미지, 표 등의 웹 콘텐츠를 구성하고 의미를 부여하는 데 사용된다.
Hyper Text: (다른 텍스트에 대한) 링크가 포함된 텍스트
마크업 언어 : 문서나 데이터의 구조를 명기하는 데 태그를 사용하는 컴퓨터 언어로, 사람이 읽을 수 있는 방식으로 작성되며 프로그래밍 언어와 다르다.
- 태그 (Tags)
- HTML 태그는 요소를 정의하며, 대부분의 태그는 시작 태그와 종료 태그로 이루어져 있다.
- <p>는 단락을 시작하는 태그이고, </p>는 단락을 끝내는 태그이다.
<시작태그 속성="값" 속성="값"...> 태크콘텐츠 </종료태그> <!-- 주석 -->
- 요소 (Elements)
- HTML 요소는 웹 페이지의 다양한 부분을 나타내며, 시작 태그, 종료 태그, 그리고 그 사이의 내용을 포함하는 전체 구조를 의미한다.
- <p>안녕하세요!</p>는 '안녕하세요!'라는 내용을 가진 ‘p’ 요소이다.
- 속성 (Attributes)
- HTML 속성은 요소에 추가 정보를 제공한다.
- <img> 요소의 src 속성은 이미지의 URL을 지정한다.
- 항상 시작 태그에 작성하며 이름=값 으로 구성된다.
- 태그에 따라 지원되는 속성이 다르며 여러 속성을 나열해 지정하는 것이 가능하다.
- DOM (Document Object Model)
- HTML DOM은 프로그래밍 언어가 웹 페이지의 내용, 구조, 스타일을 조작할 수 있게 해주는 인터페이스이다.
- HTML5는 현재 가장 최신 버전으로, 오디오 및 비디오 콘텐츠를 직접 지원하며, 그래픽 및 애니메이션을 위한 Canvas API, 오프라인 웹 애플리케이션 지원, 드래그 앤 드롭, 지오로케이션 등 많은 신기능을 도입했다.
HTML 기본 구조
- <!doctype html> : HTML5 문서를 선언하는 구문. 웹브라우저에게 문서가 HTML5로 작성됨을 명시.
- <html> ... </html> : HTML 문서의 시작과 끝.
- <head> ... </head> : title(문서의 상단 제목을 표시), meta(문서의 정보를 설정)태그 등이 위치.
- <body> ... </body> : 문서 본문에 해당하는 부분으로 실제 화면에 나타나는 메인 부분.
- JavaScript 코드는 head와 body에 위치할 수 있으나 head에 위치 시 웹 페이지의 로딩을 지연 시킬 수 있어서 일반적으로 body에 위치시키는 것이 좋다.
- CSS 코드는 head와 body에 위치할 수 있다.
IT 보안, 관심 있는 것을 공부합니다.