■ HTML : HyperText Markup Language의 줄임말로, 웹 문서를 만드는 기본 언어.
- 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크한다.
[태그] : 웹 브라우저가 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있도록 하는 꼬리표
<h1>, <table></table>, <p></p> 등..
[HTML의 기본 구조]
□ 보통 <!DOCTYIE html>로 시작하여 <html>, <head>, <body> 3개의 영역으로 구성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 문서</title>
</head>
<body>
<h1>프론트엔드 웹 개발</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
</body>
</html>□ VS 코드에서 ! 입력 + [Tab]키 시 기본 구조 자동 생성
① <!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻
- 문서 유형을 지정하는 태그
② <html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그.
- HTML 파일의 시작과 끝을 나타냄. </html> 태그 위에는 아무 내용도 없어야 함
③ <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분 ("웹 문서의 정보")
- 웹 브라우저가 알아야 할 정보로, 대부분 웹 브라우저 화면에 보이지 않음.
- <meta> 태그 : 웹 문서와 관련된 정보를 지정할 때 사용. 어떤 인코딩을 사용할지 지정한다. & 반응형 웹 만들 때 사용
- <title> 태그 : 문서 제목을 나타낸다.
④ <body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용
[시맨틱 태그]
□ HTML 태그는 이름만 봐도 의미를 알 수 있어 '시맨틱 태그'라고 한다.
- <nav>, <footer>, <header> ..
- 웹 브라우저가 HTML 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있다.
- 문서 구조가 정확히 나뉘어져 다양한 화면에서 웹 문서 표현이 쉬움
| 1 | <header> 태그 | 헤더 영역. 검색 창이나 사이트 메뉴를 삽입한다. |
| 2 | 네비게이션 영역. 보통 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다. - 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드바 또는 독립적으로 아무데서나 사용이 가능하다. |
|
| 3 | <article> 태그 | 웹에서 실제로 보여주고 싶은 내용 넣음. 독립된 웹 콘텐츠 항목. 문서 안에 여러 개 사용 가능하며,
|
| 4 | <section> 태그 | 웹 문서에서 콘텐츠 영역을 나타냄. <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 쓴다. |
| 5 | <aside> 태그 | 본문 외 왼쪽, 오른쪽, 혹은 아래쪽에 사이드 바를 만든다. 필요할 경우만 사용 |
| 6 | <footer> 태그 | 맨 아래쪽에 있는 영역. 사이트 제작 정보, 저작권 정보, 연락처 등을 넣음. - <header>, <section>, <article> 등 다른 시맨틱 태그를 사용할 수 있다. 푸터 안에 다양한 정보 삽입 가능 |
| 7 |
<div> 태그
|
id나 class 속성을 이용하여 문서 구조를 만들거나 스타일을 적용할 때 사용함. => 영역 구별, 스타일로 문서를 꾸밈. |
※ 네비게이션 예제
<div id = "logo">
<a href = '#'><h1>Dream Jeju</h1></a>
</div>
<nav>
<ul id = "topMenu">
<li><a href ="#">단체여행</a></li>
<li><a href ="#">맞춤여행</a></li>
<li><a href ="#">갤러리</a></li >
<li><a href ="#">문의하기</a></li>
</ul>
</nav>
</head>
<body>
다르게 적용되는 것을 볼 수 있다. 보통의 네비게이션은 HTML에 CSS까지 추가로 적용하여 옆으로 목록을 나열한다.
+) 라이브 서버 설치 : VS 코드에서 작성한 파일을 웹 브라우저에서 바로 확인할 수 있는 기능. VS 코드 - 확장 기능에서 Live Server 선택 후 설치. 저장한 폴더에 들어가 클릭할 필요 없이 VS코드에서 바로 실행할 수 있다.