HTML 문서 시작하기
- VS Code에서
파일-폴더 열기(원하는 폴더 생성 후 지정) index.html파일 생성
index.html 파일 보충설명
웹상에서 www.(웹사이트주소)/folder/ 에 해당하는 위치에
index.html 파일과 a.html, b.html 등 다른 이름의 파일들이 있을 시
a.html 등 index.html이 아닌 이름의 파일로 작성된 페이지는
www.(웹사이트주소)/folder/a.html 과 같이
맨 끝에 파일명을 명시해야 진입할 수 있지만
index.html로 작성한 페이지는 해당 폴더의 주소인
www.(웹사이트주소)/folder/만 입력해도 진입할 수 있습니다.
(물론 www.(웹사이트주소)/folder/index.html로도 진입 가능)
즉, index.html는 웹상 특정 폴더의 기본(디폴트) 페이지라고 생각하면 되는거죠.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Emmet 명령어 ! 입력 후 탭 : HTML 기본 틀
lang의en을ko로 수정 (문서의 언어를 명시 - 접근성, 검색최적화, 폰트)<body>안쪽에 페이지 요소들 작성- HTML 파일 우클릭 - Open with Live Server
🛑 VS Code 최근 버전의 emmet 관련 문제
최근 버전의 VS Code에서는 Emmet 관련 기능이
이전 (강의 촬영 당시) 에 비해 제한되어 있는 것으로 확인되었습니다.
강의에서 보여드리는 Emmet 동작 중 실제로 되지 않는 부분이 있을 수 있는 점을 기억해주시고
그러한 코드들은 직접 작성해가며 실습을 진행해주시기 바랍니다.
(오히려 Emmet으로 작성하기 복잡했던 부분들인 것으로 보이므로
실습시 크게 번거러워지지는 않을 것입니다.)
👉 Emmet cheet sheet 보기
자, 이제 body 사이에다가
이걸 복사해서 붙여넣고 브라우저에서 확인해보세요.
여기서는 이렇게 줄바꿈도 되어 있고
이렇게 탭 도 들어가 있고
이 렇 게 길게 띄어쓴 부분도 있지만
브라우저는 쏘 쿨하게 씹어넘깁니다.
🎯 아래의 문서를 분석하고 따라해봅시다.
| 태그 또는 구문 | 설명 | 비고 |
|---|---|---|
<h1> ~ <h6> |
제목 | 숫자가 높을 수록 낮은 단계 |
<p> |
문단 | 각각 줄바꿈이 됨 (기본 스타일일 때) |
<br> |
줄바꿈 | 닫는 태그 필요 없음. <br/>, <br />와 혼용되기도 함 |
<hr> |
가로줄 | 닫는 태그 필요 없음 |
|
공백 (스페이스) | 스페이스를 강제할 때 사용 |
주석
개발자에게만 보이는 텍스트
<!-- 한 줄 주석 -->
<!-- 여러 줄 주석
여러 줄 주석
여러 줄 주석 -->
주석으로 처리할 부분을 선택한 뒤
- 윈도우:
Ctrl+/(한컴 입력기로 되어있을 때 동작하지 않음) - 맥:
Command+/