태그(Tag)
HTML은 태그들의 집합이며, 기본이 되는 규칙이다
태그란 '무언가를 표시하기 위한 꼬리표, 이름표'를 의미하며 우리가 다양한 태그들을 이용해 코드를 작성하면 브라우저가 이를 인식해 내용을 표현 한다.
사용하는 방법
태그는 <,> 기호로 표현하며 "<태그이름>" 이렇게 사용한다.
대부분의 태그는 시작 태그와 종료태그로 이루어지며 종료 태그는 태그 이름 앞에 '/'기호가 붙는다.
<h1> Hello World </h1>요소(Element)
내용을 포함한 태그 전체를 요소(Element)라고 한다.
태그와 요소는 의미가 다르지만 많이들 같은 의미로 사용하니 혼동하지 말아야 한다.
속성(Attribute)
우리가 원하는 태그의 동작이나 표현을 조절할 수 있는 설정 값이다.
속성은 이름과 값으로 이루어져 있으며 시작 태그 안에 선언을 한다.
공백으로 구분 후 이름="값" 으로 표현 한다.
<hi id="title"> Hello World </h1>속성 값은 ',"으로 표현하며 하나의 태그에 여러 속성 선언이 가능하고 순서도 상관없음
종류
글로벌 속성: 모든 태그에 사용할 수 있는 속성
특정 속성: 특정 태그에서만 사용할 수 있는 속성
또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분 된다.
태그 중첩(Nesting Tags)
태그는 중첩이 가능하여 얼마든지 가능
단, 자식 태그가 부모태그를 벗어나면 안됨
경우에 따라 정해진 태그들만 중첩이 가능한 경우가 있음
빈 태그(Empty Tag)
<br>
<img src="">내용이 들어갈 수 없어서 '빈 태그'라고 불림
속성을 통해서 화면에 나타내거나 표시되지 않더라고 다른 용도로 사용함
ex) 브라우저가 화면에 직접 내용을 그릴 경우
1. 이미지나 비디오처럼 외부리소스를 삽입하는 경우
우리가 직접 이미지를 그릴 수 없기 때문에 브라우저에 이미지의 경로를 전달하여 화면에 나타냄
이러한 태그들은 브라우저가 내용을 대체한다고 하여 "Replacement Tag" 라고도 함
ex) 문서 내부적으로 부가적인 정보를 제공하는 경우
1.
공백 처리
HTML은 기본적으로 두 칸 이상의 공백을 모두 무시해버림
<h1>Hello, Html </h1>
<h1>Hello, Html </h1>
<h1>Hello,
Html </h1>
위 코드같이 두 칸 이상의 공백과 개행을 무시하고 한 칸의 공백만 인식함
개행을 다루기 위해선 별도의 태그를 사용하여야 함
주석(Comment Tags)
<!-- 내용 -->사용자를 위한 것이 아닌 협업이나 남에게 코드를 보여줄 때 도움을 주기 위해 작성
문서 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>html - lang속성은 문서가 어느 언어로 작성되었는지 나타냄
head - 태그에 위치한 태그들은 화면에 표시되지 않는대신 문서의 기본 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할 수행
meta - charset 속성은 문자의 인코딩 방식을 지정함
body - 실제 브라우저 화면에 나타내는 내용이 들어감
