HTML이란?
-
HTML : Hyper Text Markup Language의 약자
- Hyper Text(하이퍼 텍스트) : 문서를 서로 연결해 주는 링크
- Markup Language(마크업(표시하다) 언어)
-
웹에서는 콘텐츠를 하이퍼 텍스트로 생성하는데 이러한 하이퍼 텍스트로
구성된 웹 페이지(HTML 문서)를 만드는데 사용하는 컴퓨터 언어 -
웹 페이지는 HTML태그(tag)로 구성되어 있다.
- 각각의 태그들은 웹 페이지의 디자인, 기능 등을 결정하는 역할을 한다.
HTML태그(tag)
- HTML 태그들은 아래와 같이 한 쌍의 시작태그 와 종료 태그로이루어져 있다.
- 종료 태그는 시작 태그와 동일하나, 태그 앞에 슬래시(/)를 붙인다.
- 종료 태그가 없는 태그도 있다.(empty tag)
<h1>제목</h1>HTML 기본 구조
-
실행 환경 : vs코드(Visual Studio Code)
-
HTML기본 탬플릿 자동완성 : ! + 엔터(enter)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
h1{
color: blue;
}
</style>
<title>HTML 기본 구조</title>
</head>
<body>
<h1>프론트엔드 웹 개발</h1>
<hr>
<h2>공부 목록</h2>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</body>
</html>
-
<!DOCTYPE html>: 현재의 웹 문서가 HTML5임을 알린다. -
<html>: HTML 문서의 시작과 끝을 나타낸다. -
<html lang="ko'>: lang속성은 웹 페이지의 언어를 한국어로 설정한다.
<html lang="en"> 영어
<html lang="ja"> 일본어
<html lang="de"> 독일어
<html lang="fr"> 프랑스어
<html lang="es"> 스페인어
<html lang="bg"> 브라질어
<html lang="zn"> 중국어
<html lang="nl"> 네덜란드
<html lang="da"> 덴마크
<html lang="it"> 이탈리아어
<html lang="in(id)"> 인도네시아어
<html lang="fi"> 핀란드
<html lang="fa"> 이란
<html lang="he(iw)"> 히브리어
그외 : https://www.w3schools.com/tags/ref_language_codes.asp-
<head>: 웹 브라우저 메인 창에는 보이지 않지만 웹 브라우저가 알아야 할 정보를 입력하는 곳이다.(CSS, 자바 스크립트, jQuery등의 프로그램 코드 or 파일연결, 한글 문자셋, 웹 브라우저 제목 설정 등등...) -
<meta>: 데이터를 표현하는 메타 데이터를 설정할 때 사용되며, 문자 세트를 설정하는 것이 중요한 역할 중 하나이다.charset="UTF-8"은 문자 세트를 HTML5의 표준 문자 세트인 UTF-8로 설정한다. UTF-8로 설정되어 있지 않는 경우 웹 브라우저 화면에 한글이 깨질 수 있다. -
<style>: HTML문서를 꾸미는 CSS코드가 삽입된다.<style>태그는<head>태그 내에 삽입되어야 한다. 여기서는<h1>태그의 영역 안에 글자를 파란색으로 설정했다. -
<title>:<head>안에서 설정해야 하며, 웹 문서의 제목을 입력한다. -
<p>: HTML 문서에서 단락에서 표현하는 데 사용된다. -
<body>: 실제 웹 브라우저에 표시할 내용을 입력한다. HTML태그는 대부분<body>태그 안에서 사용한다. -
<h1~6>: HTML문서에서 글 제목을 표현하는 데 사용된다. 숫자가 작아질수록 크기도 작아진다. -
<hr>: 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용한다.
HTML 요소 구조
- HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공한다.
- 속성은 HTML요소 중에서도 언제나 시작 태그 내에서만 정의되며
속성 이름과 속성값(value)으로 표현된다.
<태그이름 속성이름 = "속성값">-
속성 이름은 언제나 소문자로 작성한다.(권장사항)
-
속성값은 언제나 따옴표로 감싼다.
HTML 주석문
- 주석문 : 프로그램 설명을 위해 추가되는 문장이며,
주석 처리된 내용은 브라우저 화면에 나타나지 않는다.
<!DOCTYPE html> <!--현재 웹 문서가 HTML5임을 정의함-->
<html lang="ko"> <!--웹 브라우저 언어를 한국어로 설정-->
<head> <!--웹 페이지의 필요한 정보를 가지고 있음-->
<meta charset="UTF-8">
<title>HTML주석문</title>
</head>
<body>
</body>
</html> 참고
- https://www.w3schools.com/
- Do it! HTML+CSS+자바스크립트 웹 표준의 정석
- HTML/CSS 입문
