[HTML] HTML 개념 / 기본 구조 / 마크업 언어
by mini_min[HTML]
HTML 개념 / 기본 구조 / 마크업 언어
✔️ HTML 이란?
HTML 은 월드 와이드 웹 문서를 작성하는 하이퍼 텍스트 마크업 언어이다.
웹 브라우저를 통해 사용자에게 보여지는 문서의 내부 형식을 규정하는 언어다.
제목, 본문, 목록, 링크, 이미지 등 다양한 컨텐츠를 마크업 할 수 있음 ✨
웹 브라우저는 HTML 태그를 읽고, 분석하여 표현 내용을 화면에 나타낸다.
📓 확장자 : *.html, *htm 등을 사용
✔️ 마크업 언어란?
마크업 언어는 태그 (tag) 등을 이용해 문서나 데이터의 구조를 명시하는 언어의 한 가지다.
태그는 원래 원고의 교정부호와 주석을 표현하기 위한 것이었는데, 용도가 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라한다.
✨ 문장, 그림, 표 배치, 폰트의 모양과 크기, 들여쓰기, 줄간격, 여백 등에 대한 정보를 의미한다.
✔️ 웹 브라우저 (Web browser)
HTML 문서와 그림, 멀티미디어 파일 등을 월드 와이드 웹을 기반으로 한 인터넷 콘텐츠를 검색 및 열람하기 위한 응용 프로그램이다!
✨ 웹 페이지는 아래 3가지 요소로 구성된다!!
| HTML | CSS | Javascript |
✔️ 웹 페이지 구성
✨ HTML : 웹 페이지 상에서 문단, 제목, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 마크업 언어! 표준화된 태그로 웹 페이지를 작성한다.
✨ javascript : 객체 기반의 스크립트 프로그래밍 언어로, 웹 브라우저 내에서 주로 사용한다. 동적으로 컨텐츠를 바꾸거나 멀티미디어를 다루고 , 움직이는 이미지 등 웹 페이지를 꾸며주는 프로그래밍 언어다.
✨ CSS : HTML 문서 내에 서체의 종류, 크기, 색, 여백 등을 지정해 웹 브라우저 환경에 상관없이 일정한 화면을 보여주는 기능이다.
✔️ HTML 문서의 기본 구조
HTML 은 태그(TAG) 로 구성된 마크업 언어로, 계층적인 구조를 가진다.
| HTML (조상) | |
| HEAD (부모) | BODY (부모) |
| TITLE (자식) | P / DIV (자식) |
✔️ HTML 문서의 기본 구조 (2)
- DTD 선언 (Document Type Definition)
문서 첫 줄에 선언한다. DTD 는 정의하는 문서에서 사용되는 언어와 버전 등을 지정한다.
- <html> ~ </html>
HTML 문서의 최상위 요소로 모든 HTML 문서는 하나 이상을 갖는다.
- <head> ~ </head>
HTML 문서의 메타데이터를 정의하며, 메타데이터는 HTML 문서에 대한 정보를 의미한다.
- <body> ~ </body>
웹 브라우저를 통해 보이는 내용 즉, 컨텐츠 부분을 나타낸다.
✔️ 태그의 구성
- 요소
시작과 종료를 나타내는 태그로 이뤄진 모든 명령
- 태그
< 과 > 로 둘러 쌓인 요소의 일부로, 시작 태그와 종료 태그가 있지만, 종료 태그가 없는 태그도 있다.
📓 시작 태그만 있는 경우 : <img> , <br> 등
- 속성
요소의 시작 태그 내에서 사용하며, 명령어를 구체화 시키는 역할을 한다.
- 속성값
속성과 관련된 값으로 태그와 속성은 대소문자를 구분하지 않는다.
<div class="box" style="background: navy; float: left;">A</div>
'HTML' 카테고리의 다른 글
| [HTML] 주요 formatting 태그 / <b> / <em> / <i> / <pre> / <sub> / <sup> (0) | 2022.09.06 |
|---|---|
| [HTML] 공통 속성(Global Attributes) / data-* / contenteditable (0) | 2022.09.06 |
| [HTML] Block-level element / inline element / 특수문자 (0) | 2022.09.06 |
| [HTML] <body> / <h x> / <p> / <br> / <hr> 태그 (0) | 2022.09.06 |
| [HTML] 기본 태그 - http-equiv / <!DOCTYPE> / <html> / <head> / <title> / <meta> (0) | 2022.09.06 |
블로그의 정보
개발자 미니민의 개발로그
mini_min