※ 다음 강좌를 들으며 정리한 내용입니다.
www.edwith.org/boostcourse-ui/joinLectures/19142
[부스트코스] 웹 UI 개발 강좌소개 : edwith
- 부스트코스
www.edwith.org
1) HTML 소개
- HTML은 Hyper Text Markup Language의 줄임말입니다. 이때, Hyper Text는 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 즉, 링크이고, Markup Language는 프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현 가능하다는 특징이 있습니다.
- HTML은 파일 확장자로 .html을 쓰며, 그 파일 안에 html 코드를 작성하게 됩니다.
2) HTML 문법 - 태그
- 문법을 크게 6가지로 태그, 속성, 중첩, 빈 태그, 공백, 주석 순으로 나누어서 설명합니다.
- 각각의 태그들이 모여, 하나의 요소를 만듭니다.
- 태그(Tag)는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어갑니다.
대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙습니다.
시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치하게 됩니다.
ex) <h1>Hello, HTML</h1>
- 내용을 포함한 태그 전체를 요소(Element)라고 합니다.
태그와 요소는 의미가 다르지만 많은 사람이 태그와 요소를 같은 의미로 사용하니 혼동하지 않도록 주의해야 합니다.
3) HTML 문법 - 속성
- 속성(Attribute)은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미합니다.
- 속성은 이름과 값으로 이루어져 있습니다.
시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현합니다.(등호양쪽에 띄어쓰기X)
속성값은 홑따옴표(')또는 쌍따옴표(")로 감싸 표현합니다.
- 의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 속성을 선언할 수 있습니다.
여러 속성을 선언할 때는 공백으로 구분해서 사용합니다.
ex) <h1 id="title" class="main">Hello, HTML</h1>
- 속성의 선언 순서는 태그에 영향을 미치지 않습니다.
- 속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분됩니다.
또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분됩니다.
4) HTML 문법 - 태그 중첩
- 태그 안에 다른 태그를 선언할 수 있습니다.
태그를 중첩해서 사용 시 중첩되는 태그는 부모 태그를 벗어나서는 안 됩니다.
ex) <h1>Hello, <i>HTML</i></h1>
- 때에 따라 정해진 태그만 중첩할 수 있기도 합니다.
태그의 구조 특성으로 인해 중첩할 수 없는 경우에 대해서는 Chpter03의 블록 vs 인라인 부분에서 살펴보도록 하겠습니다.
5) HTML 문법 - 빈 태그
- 태그의 중첩이 불가한 태그도 있습니다. 이런 태그를 빈 태그라고 합니다.
ex) <br>, <img src="">, <input type="">
- 빈 태그(Empty Tag)는 내용이 없어서 종료 태그가 필요하지 않습니다.
- 빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그입니다.
- 빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우입니다. ex)이미지
이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 합니다.
- 실제로 화면에 출력될 내용이 없어 다른용도로 쓰이는 태그도 존재합니다. <br>이 바로 이 경우입니다.
6) HTML 문법 - 공백
- 기본적으로 HTML은 두 칸 이상의 공백과 개행을 모두 무시합니다. 모두 공백 1칸으로 처리합니다.
- 이러한 공백처리 방식에 대해서 CSS로 제어 할 수 있습니다.
7) HTML 문법 - 주석
- 주석의 시작은 <!-- 로 표시하고, --> 표시로 종료합니다.
- HTML 파일 내에 주석으로 표시를 해주면 브라우저는 해당 부분을 인식하여 해석하지 않습니다.
8) HTML 문법 - 문서의 기본 구조
- HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로 크게는 문서 타입 정의와 <html>요소로 구분합니다.
- 문서 타입 정의는 보통 DTD(doctype)라고 부릅니다.
이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 합니다.
ex) <!DOCTYPE html>
- 문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있습니다.
- <html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미합니다.
- <head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않습니다.
대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 합니다.
- <meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정합니다.
- <body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당이 됩니다.
- 아래의 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어가게 됩니다.
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
|
cs |
'웹개발 > [부스트코스] 웹 UI 개발' 카테고리의 다른 글
| 1. HTML&CSS 기초 - (4) CSS 이해하기 (0) | 2020.11.15 |
|---|---|
| 1. HTML&CSS 기초 - (3) 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 (0) | 2020.11.14 |
| 1. HTML&CSS 기초 - (2) HTML 태그 (0) | 2020.11.08 |
