-
HTML - 1. HTML 이해하기공부일기/부스트코스 2020. 9. 12. 20:36
1. HTML이란?
HTML은 웹 페이지를 만들 때 사용하는 프로그래밍 언어이며, 웹 사이트들은 모두 HTML을 사용하여 만들어진다.
HTML은 Hyper Text Markup Language의 줄임말이며, Hyper Text는 링크를 의미한다. 정보를 구조적이고 계층적으로 표현 가능하다.
2. HTML 문법
- 태그
HTML내에서 가장 중요하고 기본이 되는 규칙. 무언가를 표시하기 위한 꼬리표, 이름표 코드로 작성시 브라우저가 인식을 하고 내용을 표현하게 된다. <,> 기호를 사용해 표현하며, 각 <,> 사이에 태그 이름이 들어간다. 시작 태그와 종료 태그로 이뤄져 있으며 종료 태그는 태그 이름 앞에 / 기호가 붙는다. 내용을 포함한 태그 전체는 요소라고한다.
<h1> Hello, HTML </h1>- 속성
태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값. 이름과 값으로 이뤄져 있으며 시작 태그 안에 선언할 수 있다. 하나의 태그에 여러개의 속성을 사용할 수 있고 공백으로 구분한다.
<h1 id='title' class='test'> Hello, HTML </h1>- 태그 중첩
태그 안에 다른 태그를 선언할 수 있나 중첩해서 사용할 경우 중첩되는 태그는 부모 태그를 벗어나서는 안 된다.
<h1> Hello, <i>HTML</i></h1>- 빈 태그
빈 태그들은 입력하는 내용만 비어있을 뿐 ,속성을 통해 화면을 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용할 수 있다.
<br> <img src=''>- 공백
기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다. 아래의 3가지 태그는 모두 같은 Hello, HTML을 출력한다
<h1>Hello, HTML</h1> <h1>Hello, HTML</h1> <h1> Hello, HTML </h1>- 주석
주석은 화면에 노출되지 않고 목적으로만 사용하는 것. <!--로 표시하고, -->로 종료한다.
<!-- 여기에 작성되는 내용들은 모두 주석 처리가 됩니다. --> <!-- 주석은 여러 줄로 작성할 수도 있습니다. <h1>Hello, HTML</h1> 위 <h1>태그는 브라우저가 해석하지 않습니다. -->3. 문서의 기본 구조
<!DOCTYPE html> <html lang='ko'> <head> <meta charset='UTF-8'> <title>HTML</title> </head> <body> <h1>Hello, HTML</h1> </body> </html><!DOCTYPE html>: 해당 문서가 어떤 버전으로 작성되었는지 알려주는 선언문. 현재는 html5 버전의 타입을 사용한다. 대소문자 상관없음
<html>: 해당 문서가 어느 언어로 작성되었는지 나타내주는 속성으로 lang이 들어가있다.
<head>: 브라우저 화면에 표시되지 않고 문서의 기본정보, 설정이나 외부 자바스크립트파일 등을 연결하는 역할을 한다.
charset : 인코딩 형식
<title>: 브라우저 탭바에서 찾아볼 수 있는 제목
<body>: 실제 브라우저 화면에 나타나는 내용들이 나타나는 태그
'공부일기 > 부스트코스' 카테고리의 다른 글
CSS - 3. 폰트, 텍스트 (0) 2020.09.19 CSS - 2. 단위, 배경, 박스모델 (0) 2020.09.17 CSS - 1. CSS 이해하기 (0) 2020.09.16 HTML - 3. 콘텐츠모델, 시멘틱마크업, 블록&인라인 (0) 2020.09.13 HTML - 2. HTML 태그 (0) 2020.09.12