태그
브라우저가 웹 문서를 잘 이해할수 있도록 콘텐츠를 목적에 맞게 분류한 규칙
<tag> 내용 </tag><tag>부분이 여는 태그이고 </tag>부분이 닫는 태그 -->닫는 태그는 슬래시를 넣어 구분
부모 태그와 자식 태그
태그는 들여쓰기를 이용하여 중첩 관계로 만들수 있다.
<html>
<head>
</head>
<body>
</body>
</html>여기서<html>이 부모태그 <head>,<body>가 자식 태그라고 보면된다.
자식 태그를 넣을 때는 항상 들여쓰기를 한다.
자식 태그안에도 또다른 자식 태그를 만들수 있다.
HTML의 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
└> 웹 표준 문서라고 선언
<meta charset="UTF-8">
└>웹 문서의 인코딩 방식
<meta name="viewport" content="width=device-width, initial-scale=1.0">
└>디바이스종류별로 화면에출력한방식을 지정
viewport가 있어야 반응형 웹 페이지를 제작할때 모바일 화면에 결과물을 출력가능
<title>Document</title>
└>문서의 제목을 작성, 이 사이에 작성한 내용은 웹 브라우저 상단 탭에 표시
에디터에서 HTML 파일 수정하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
안녕하세요 !!!
</body>
</html><body> 태그에는 웹 브라우저에 출력할 내용을 작성
저렇게 변경한후 Ctrl + s 를 누르고 저장한후 마우스 오른쪽 클릭후
Open with Live Server를 클릭하면
웹 브라우저에 이러한 화면이 뜸
'FE > 인터렉티브 웹' 카테고리의 다른 글
| 목록 태그 - 메뉴를 깔끔하게 정리하기 (0) | 2023.09.18 |
|---|---|
| 서식태그 - 텍스트를 넣어 웹 페이지 채우기 (0) | 2023.09.18 |
| 시맨틱 태그 - 웹 페이지 구조 나누기 (0) | 2023.09.18 |
| 웹 페이지의 필수 재료 (0) | 2023.09.17 |
| 웹 페이지를 만들기 전에 (0) | 2023.09.17 |