HTML5의 기본 구조를 알아보자
5가지 태그만 알면 기본 문서를 만들 수 있다.
<html> 태그 : html문서의 시작과 끝을 알린다.
<head> : 웹 브라우저 화면에서는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들을 표기한다.
문서에서 사용할 외부 파일 링크도 노출한다
- 주로 쓰이는 태그 :
<title> 문서 제목을 입력
<meta> 문자 인코딩 및 문서 키워드, 요약 정보를 입력
<body> : 문서의 몸통, 실제 브라우저에 보이는 정보를 입력
<img> : 이미지를 삽입하는 태그, 이번엔 src 속성을 이용할 것이다.
그럼 이제 HTML의 기본 문서를 만들어보자
1. html 문서 타입 지정 및 head와 body 태그 만들기
<! doctype html>로 문서 형식을 지정하고 head와 body를 만들어 주었다.
이때 html태그 먼저 입력 후, 탭으로 들여 쓰고 head와 body를 입력해야 한다.
2. title 만들기
head에서 탭을 눌러 인코딩 방식을 입력한다
<meta charset="utf-8">은 한글과 영어를 모두 지원하는 인코딩 방식이다.
제일 많이 쓰니까 쓰겠지 모를 땐 외우자
인코딩 방식 입력 후 title 지정한다
나의 기분을 표현하였다.
3. body에 웹브라우저에 표시할 이미지와 텍스트 입력
body에 이미지 src 태그를 통해 사용할 이미지 파일 제목과. 형식을 입력한다
이때 html5 저장하는 문서와 같! 은! 폴더에 이미지가 있어야 제대로 이미지가 로딩된다.
텍스트는 p 태그를 이용해 표시할 텍스트를 입력한다.
4. 저장 후 확인하기
html 문서로 저장 후 폴더에서 해당 문서를 열면 적용된 화면이 나온다
이렇게 다섯 가지 태그를 활용하여 기본적인 문서를 만들어 보았다.
'HTML5&CSS' 카테고리의 다른 글
| html5 : <video> <audio> 태그 이용해서 동영상 넣기 (0) | 2021.03.29 |
|---|---|
| html5 : <ul> <ol> <li> 자주 쓰이는 목록 태그 (0) | 2021.03.26 |
| css : border, margin, padding 정리 (0) | 2021.03.24 |
| html 5 : <input> 입력태그, 자주 쓰이는 속성 정리 (0) | 2021.03.24 |
| html5 : <hn> <p> <br> <b> <i> <img> <a> / 자주 쓰는 기본 태그 (0) | 2021.02.25 |