📚boostcourse의 웹 UI개발 강의 필기
📑HTML문법
1. 태그(tag)
- 무언가를 표현하기 위한 꼬리표, 이름표
<h1>Hello HTML</h1>
h1 👉태그 이름
<h1> 👉여는 태그
</h1> 👉닫는 태그2. 속성(attribute)
- 태그에 추가로 정보를 제공하거나 동작이나 표현을 제어할 수 있는 설정값을 의미
<h1 id="title">Hello HTML</h1>
👉 속성은 이름="값"으로 이뤄짐, 여기서 이름은 id, 값은 title이다.
<h1 id="title" class="test">Hello HTML</h1>
👉 하나의 태그에 여러개 속성 포함 가능
👉 선언 순서는 중요X
3. 태그 중첩
- 태그 안에 얼마든지 다른 태그 선언 가능
올바른 코드 ex)
<h1>Hello <i>HTML</i></h1>
잘못된 코드 ex)
<h1>Hello <i>HTML</h1></i>
👉 안에 있는 태그는 부모 태그를 벗어나면 안된다
(여기서 안에 있는 태그는_i, 부모태그는_h1 이다)
4. 빈태그
- 닫는 태그가 존재하지 않음
ex) <img>, <br>5. 공백
- 두 칸 이상의 공백과 개행, 심지어 한 줄이 아닌 여러줄의 개행이더라도 모두 무시
👉 이 예시를 보면 한 칸의 공백 말고 모든 공백을 무시하는 것을 벌 수 있다.
✍코드
<h2>Hello, HTML</h2>
<h2>Hello, HTML</h2>
<h2>
Hello,
HTML
</h2>
✍결과Hello, HTML
Hello, HTML
Hello, HTML
6. 주석
- 화면에 노출되지 않음
- 이게 무슨 코드인지 메모하기 위함
👉 이 예시를 보면 주석이 결과에 안보이는 것을 확인할 수 있다.
✍코드
<!--HTML을 배워봅시당-->
<h2>Hello, HTML</h2>
✍결과Hello, HTML
7. HTML 문서 구조
- 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용
✍코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
👉<!DOCTYPE html>
- 이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문
👉<html> 태그의 lang 속성
- 문서가 어느 언어로 작성되었는지를 의미
👉<head> 안의 태그
- 화면에 표시X
- 문서의 기본정보 설정, 외부 스타일 시트 파일 및 js파일 연결
👉<title>
-웹문서 제목(화면의 텝바에 노출됨)
👉<body>
- 화면에 표시O
하루하루 성실하게