#01 개요
HTML 어렵게 생각하지마세요.
그냥 책을 쓴다고 생각하시면 됩니다!
여러분을 글을 읽으실 때 어떻게 읽으시나요?
긁을 읽으실 때 아래서부터 위로 읽으시나요?
아니죠, 위에서부터 아래로 차근차근 읽게 됩니다.
HTML 또한 마찬가지입니다. 위에서부터 아래로 읽기에 브라우저가 인식할 수 있도록 저희는 표시 해주기만 하면 됩니다.
HTML 태그 들어보셨나요?
사람은 눈으로 보고 인식하지만 컴퓨터는 그렇 수가 없죠, 그렇기에 HTML 태그로 구분을 하여 브라우저가 인식 후 표현을 할 수 있도록 지정하기 위해 사용합니다.
왜 이렇게 주절 주절 설명 해주세요?!
다들 " HTML 이란? ", " HTML 이 무엇인가요? " 검색 해보시면 단순하게 나옵니다.
- HTML(HyperText Markup Language)은 브라우저에서 웹 페이지를 표현하기 위한 마크업 언어다.
- 문서에 표현을 하기 위해서는 <태그> 를 사용한다.
계속 영어만 봐서 머리 아픈데, 저도 이렇게 작성하면 간단하지만 재미없잖아요?
#02 기본 구성
HTML은 다른 태그를 사용하기 전에 필수로 입력하는 태그들이 있습니다.
<html> 태그, <head> 태그, <title> 태그, <body> 태그 등이 있습니다.
쉽게 사람과 동일하게 생각해 볼까요?
사람은 반응하기 전에 생각하는 머리가 있고 반응할 수 있는 몸이 있습니다.
HTML 또한 마찬가지입니다.
반응하기 전에 생각하는 <head> 태그가 있고 반응을 할 수 있는 <body> 태그가 있습니다.
#02-01 <html> 태그란?
텍스트 기반이기에 나는 " HTML 문서다 " 라고 정의를 해줄 때 사용합니다.
최상단에 <html> 을 시작으로 최하단에 </html> 을 작성하여 html 문서라는 것을 알려주죠.
추가로 <html> 시작 전 " <!DOCTYPE html> " 를 작성하여 나는 " HTML5 문서다! " 라고 선언해줍니다.
하단의 사용예제를 참조해 주세요.
#02-02 <head> 태그란?
<html> 태그 바로 아래에 작성을 해주며 <body> 태그 내용을 읽어오기 전에 문서에 대한 정보들을 입력해 주는 곳입니다.
<meta> 태그, <title> 태그, <script> 태그, <style> 태그 등 작성합니다.
#02-03 <title> 태그란?
말 그대로 문서의 페이지 제목(이름)을 나타내줄 때 사용합니다.
브라우저 최상단이나 탭을 보시면 나타나고 있는 이름이 있는데, 바로 이곳에 입력한 내용이 나타나게 됩니다.
#02-04 <body> 태그란?
페이지의 본문 내용을 입력하는 곳으로 이곳에 입력한 모든 내용이 브라우저를 통해 나타납니다.
#02-05 주석 사용 방법
HTML 문서를 작성하는데 메모를 남기고 싶다면 주석을 남겨보세요.
주석의 시작 <!-- 로 시작하여 --> 로 끝나고 이 부분은 브라우저에 표시되지 않습니다.
<!-- 남기고 싶은 메모 -->
#03 사용 방법
<!DOCTYPE html> <!-- HTML5 선언 - "이 문서는 HTML5 구나!" -->
<html> <!-- HTML 문서 시작 -->
<head> <!-- HEAD 태그 시작 - "자, 본문을 불러오기전에 이 문서의 정보를 알아볼까?" -->
<meta charset="utf-8"> <!-- 다양한 메타태그가 존재, 이 부분은 나중에 상세히 다룰게요! -->
<title>블로그</title> <!-- 페이지의 제목 입력 - "이 페이지의 제목은 블로그 구나?!" -->
</head> <!-- HEAD 태그 끝 - "생각이 끝났으니 이제 표시 해볼까?" -->
<body> <!-- 본문 내용 입력 시작 - "자, 내용을 불러와볼까?" -->
<!-- 다양한 태그는 하단 링크 참조! -->
<h1>안녕하세요.</h1>
<p>첫번째 페이지입니다.</p>
<a href="https://kaheal.tistory.com/" target="_blank">클릭하기!</a>
</body> <!-- 본문 내용 입력 끝 - "아 본문 내용이 끝났구나?" -->
</html> <!-- HTML 문서 끝 - "아 이제 다 읽었고 표현 해줬으니, 끝내야겠다." -->
이제 사용 방법을 알았으니 다른 HTML 태그들을 <body> 안에 작성하는 공부를 해볼까요?
#04 무료상담 OPEN
- 이제 막 공부를 시작하신 분
- 하다가 막히신 분
- 궁금하신 것이 있는분
- 모두 무료로 질문에 답변을 드립니다.
- 단, 너무 많은 질문이 발생한 경우 확인하는 대로 답변드립니다!
https://open.kakao.com/o/sGrfpM1c
카힐님의 오픈프로필
풀스택 10년차 프리랜서 카힐
open.kakao.com
'My Room > 사이트 제작 TIP' 카테고리의 다른 글
| Lighthouse 성능 개선 미세 먼지 TIP (0) | 2023.03.13 |
|---|