Tag 태그
HTML의 문법은 딱 한 가지예요. 태그(tag)만 기억하면 됩니다.
태그란 HTML 코드에서 정보(콘텐츠)를 정의하는 형식을 말합니다.
태그는 < > 다이아몬드 기호와 / 기호를 사용해 콘텐츠의 시작과 끝을 표시합니다.
태그는 콘텐츠를 감싸고 있고, 그 안에는 태그명이 기입되어 있습니다.
태그명은 콘텐츠의 성격과 의미를 나타내므로 무척 중요합니다.
태그는 다음과 같은 형태로 사용합니다.
<태그명>여기에 콘텐츠를 기입합니다</태그명>
(여는 태그) (닫는 태그)
주석
HTML 주석의 예)
<!-- 이 사이에 작성한 내용은 주석이 됩니다. 양 상관없이 얼마든지 들어갈 수 있어요. -->
단일 태그< > < />
앞서 보았듯 태그는 < > 과 기호를 사용해 콘텐츠의 시작과 끝을 표시합니다.
하지만 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재합니다.
이를 단일 태그라 하며, 단일 태그의 형식은 다음과 같습니다.
단일태그는 여는 태그와 닫는 태그가 없이 그냥 혼자 씁니다.
< > < />
<hr>은 수평선이라는 뜻이에요.
수평선은 단일 태그로 사용됩니다.
단일 태그는 콘텐츠가 없는 경우 사용합니다. 단일 태그는 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않습니다.
속성 attributes
프론트엔드에서는 속성 두 가지를 구분합니다.
attributes - html 의 속성
property - 자바 스크립트에서의 속성
속성은 태그의 부가적인 기능을 정의하는 것이고, 시작 태그의 내부에 정의합니다.
속성의 개수에는 특별한 제한이 없습니다.
시작태그 안에 기입해야하고, 따옴표로 감싸며, 이름하고 값으로 구성됩니다!
=> 태그명과 속성 정의는 공백(space)으로 구분하며, 큰따옴표를 사용합니다.
자세한 사용법은 이후에 조금 더 살펴볼게요.
<태그명 속성명=“속성값”>내용이 들어감 <태그명 속성명=“속성값”/
속성 값에 기입한 색상 옆의 색은 vscode에서 자동으로 불러오는 색상입니다.
해당 색상이 들어간 아이콘을 클릭하면 팔레트가 뜨고 그곳에서 직접 색을 정할 수도 있습니다.
속성 값을 기입하는 문법은 이후에 배울 예정이니 지금은 <태그명 속성명="속성값"> 으로 구성된 내용만 확인해주세요.
속성 값은 대부분 큰 따옴표를 사용합니다.
속성은 갯수제한이 없기 때문에 한 칸의 공백을 두고 계속 추가합니다.
html 문서의 구조
일반적인 HTML 의 문서의 구조는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UYF-8">
<title> 문서의 제목 < /title>
</head>
<body>
실제 웹 페이지에 표시되는 내용
</body>
</html>
위 코드의 내용들에 대해 하나씩 알아볼게요.
<!DOCTYPE html>
문서의 첫 부분에서 문서의 유형을 지정하는 단일 태그 입니다.
웹브라우저에게 문서의 타입을 전달합니다.
<html> ~ </heml>
문서의 유형을 지정한 후 실제로 문서가 시작되고 끝나는 것을 나타내는 태그 입니다.
태그도 콘텐츠가 될 수 있고 다양한 콘텐츠가 삽입됩니다.
<head> ~ </head>
웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어갑니다.
head 안에 들어있는 내용들을 천천히 확인해볼게요.
<meta charset = "utf-8">
=> 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그입니다.
문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로,
영문과 한글을 모두 사용하기 위해 위의 코드처럼 utf-8 방식을 사용하는 것이 좋습니다.
<title> ~ </title>
=> 문서의 제목을 나타내며, 브라우저의 탭에 표시됩니다.
<body> ~ </body>
실제 브라우저 화면에 표시될 내용을 입력하는 태그 입니다.
여기에는 텍스트, 이미지, 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등) 를 나타내는 태그 등이 쓰입니다.
태그 안에 태그를 포함하는 방식으로 콘텐츠를 다양하게 구성할 수 있습니다
그럼 이제 VSCode 로 실제 코드를 작성하고 웹 페이지로 출력해볼게요.
VSCode 에서는 기본 구조를 쉽게 입력할 수 있게 제공하고 있어요.
입력 창에 ! 을 입력해서 엔터를 누르면 기본 셋팅이 되는 것을 확인할 수 있어요.
그래도 이번에는 연습을 해야하니 직접 하나씩 입력을 해볼게요!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> 나의 첫 기본 구조 </title>
</head>
<body>
기본 구조 토대로 내용을 표시해봅니다.
</body>
</html>
들여쓰기는 html 코드의 가독성을 위해서 활용하는 거예요.
파이썬에서는 들여쓰기가 필수적인 구문의 일부였다면, html는 들여쓰기와 엔터에 관대하기 때문에
간격이 넓거나 들여쓰기를 필요한 곳에 필요한만큼해도 적용이 가능합니다.
VSCode 라이브 서버
위의 화면을 출력할 때, 지금까지는 코드를 입력하고 저장하고 웹페이지를 열어서 확인했지만, VSCode에는 라이브 서버라는 것이 있습니다. 수정 중인 코드의 실시간으로 수정사항의 모니터링을 지원하는 기능이에요.
Extention 창을 열어봅니다. 이곳에는 확장 플러그인들이 있습니다.
여기에서 live server 를 검색하고 해당 플러그인을 설치합니다.
이제 코드를 작성해서 실시간으로 확인해볼게ㅛㅇ!
임시 샘플의 페이지를 작성하는 것이기 때문에 아까 !(느낌표) 로 적었던 기본 셋팅으로
타이틀과 바디 본문만 입력을 하겠습니다.
<!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> 일단은 샘플 </title>
</head>
<body>
오늘 하루는 행복해질 것.
</body>
</html>
코드를 작성한 후 바탕에서 오른쪽 버튼을 클릭하면 Open with Live Server 를 클릭할 수 있습니다.
새로운 창이 뜨면서 실시간으로 기록된 html 의 결과물을 확인할 수 있어요.
이후에 수정을 한 뒤에 바로 라이브 서버를 열어도 수정된 결과물을 볼 수 있어요.
라이브 서버의 주소창에는 로컬 서버가 뜹니다. 실시간으로 수정사항이 반영이 됩니다.
라이브 서버를 끌 때에는 오른쪽 버튼을 클릭하고 Stop Live Server 을 누르면 라이브 서버가 멈춥니다.
라이브 서버는 VSCode의 하단에서도 확인할 수 있어요. ^^
'HTML · CSS > HTML · CSS 입문 공부일지' 카테고리의 다른 글
| 웹 HTML 입문 공부 6. 하이퍼링크 표시 (0) | 2022.11.09 |
|---|---|
| 웹 HTML 입문 공부 5. 컨테이너 요소, 전역 속성 (+ 검색 엔진에 노출 잘 되는 법) (0) | 2022.11.09 |
| 웹 HTML 입문 공부 4. 요소 유형 (블록 레벨 태그, 인라인 태그), 이미지 표시 (0) | 2022.11.09 |
| 웹 HTML 입문 공부 3. 텍스트 입력 (0) | 2022.11.09 |
| 웹 HTML 입문 공부 1. HTML 이란? (0) | 2022.11.09 |