◆ HTML로 텍스트 출력하기
네이버 창에 들어간 후 f12를 눌러본다.
빨간색 박스를 보면 Elements와 Styles라는 단어가 보인다,
Elements는 html, Styles는 css 파트이다.
왼쪽 위에 있는 마우스 모양의 아이콘을 클릭한 후 마우스를 가져다 놓으면 연두색과 하늘색으로 이루어진 박스 모양이 나타난다.
input이라는 보라색 글자가 나타난다.
input은 사용자로부터 정보를 받아들이는 태그이다.
우리가 네이버 검색창에 검색할 수 있는 이유가 input이라는 태그 덕분이다.
◆ HTML로 텍스트 출력하기
<
html의 기본 구성요소는 알아보자.
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>사이트 제목</title>
</head>
<body>
<h1>aaaaa</h1>
</body>
</html>1) <!DOCTYPE html>
html문서에서 가장 먼저 선언되어야 하는 부분이다.
html의 버전을 웹브라우저에 알려주는 역할을 한다.
2) <html>, </html>
모든 html문서는 html 태그로 감싸져 있다.
<html lang = 'ko'> : 주 언어를 한국어로 설정함
3) <head>,</head>
html 문서에서 머리 역할을 담당하는 태그로 문서의 정보가 들어있다.
head 태그에는 웹사이트 제목이나 css 파일 등을 지정해준다.
(<title>,</title>은 웹사이트의 제목이 들어가는 태그)
<meta charset='UTF-8'> : head 태그 안에 UTF-8(유니코드)를 넣어준다.
4) <body>,</body>
html 문서에서 몸 역할을 담당하는 태그로 문서의 내용이 들어있다.
텍스트처럼 사용자가 보는 내용들을 넣을 수 있다. 'aaaaa' 부분에 텍스트를 넣으면 그대로 출력된다.
태그 안에 태그, 태그 안에 태그가 반복되는 형태를 보인다.
태그는 짝을 잘 맞춰야 하며 태그로 감싸는 내용은 들여쓰기 해주는 것이 좋다.
그럼 이제 html 파일에 문구를 출력해보겠다.
<title>에 원하는 제목을 넣는다.
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
</head>
<body>
<h1>hello!</h1>
</body>
</html>
h1부터 h6까지는 기본적으로 글자의 크기, 줄 간격 등이 적용되어있다.
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
</head>
<body>
<h1>hello!</h1>
<h2>hello!</h2>
<h3>hello!</h3>
<h4>hello!</h4>
<h5>hello!</h5>
<h6>hello!</h6>
<h7>hello!</h7>
<h8>hello!</h8>
<h9>hello!</h9>
<h10>hello!</h10>
</body>
</html>
★ 정리하기 ★
✔ 웹 사이트는 개발자 도구로 html, css 구성을 볼 수 있음
✔ html의 기본 구조
- <!DOCTYPE html>
- html 태그 안에 head 태그, body 태그
✔ h1~h6 태그는 기본 속성이 적용되어 있음
'Web 개발 > [HTML,CSS]' 카테고리의 다른 글
| [HTML/CSS] 6. 단위와 위치 (0) | 2022.07.03 |
|---|---|
| [HTML/CSS] 5. 클래스 , 패딩과 마진 (0) | 2022.07.01 |
| [HTML/CSS] 4. css (0) | 2022.07.01 |
| [HTML/CSS] 3. 중요태그 정리 (0) | 2022.06.30 |
| [HTML/CSS] 1. HTML과 CSS (0) | 2022.06.27 |
