HTML 문서 기본 구조
<!DOCTYPE html>
Doctype은 html 문서 맨 처음에 명시해 버전을 나타내며 반드시 작성해야함
<html lang = "en"></html>
문서가 html로 작성됐음을 브라우저에 알림
문서의 시작과 끝을 알리는 태그이며 lang속성으로 문서의 언어 설정이 가능하다
<head></head>
메타 데이터와 타이틀 작성
메타 데이터는 웹 페이지에서 직접적으로는 보이지 않지만 페이지 인코딩 방식이나 검색엔진에 관한 정보 등 많은 설정 가능
*<title></title> 브라우저 창 제목
➡️헤드에서는 보이는 부분이 아닌 실제로 보이지 않는 부분을 나타냄
<body></body>
주로 브라우저 화면에 보이는 것이 들어감
HTML 문서의 이미지, 리스트, 비디오 등과 같은 모든 콘텐츠를 나타내는데 사용
HTML 문서에 단 하나의 <body> 만 존재
HTML 기본 태그와 역할
1. Heading
<h1>~<h6>까지 존재하며 주로 페이지에 표시하려는 제목으로 사용
<h1>은 하나의 페이지에서 제일 큰 주제를 위한 것으로 한 번만 사용하는 것이 좋음
2. Paragraphs
단락 태그<p>는 문단을 정의할 때 사용
블록 요소이기 때문에 자동으로 줄바꿈 생김
3.Preformed Text
원래라면 단락태그에 띄워쓰기를 여러개하거나 줄바꿈을 해도 가로로 나열되어 출력(공백 하나로 인식)
➡️ 블럭요소들은 줄바꿈을 위해 태그를 두개 사용해야함 <p>hello</p><p>hello</p>
<pre>태그는 미리 정의된 형식의 텍스트를 정의할 때 사용
태그 안에 줄바꿈을 하고 탭을 해도 그대로 출력됨
➡️독특한 서식의 텍스트나 컴퓨터 코드 등을 HTML 문서에 그대로 표현할 수 있음
4. List
HTML에서 목록을 나타내는 태그
다른 태그들을 생각해보면 태그 이름이 <li>이 되어야할 것 같지만 각자 해당하는 리스트 <ol>, <ul>, <dl>태그를 먼저 사용하고 그 안에 리스트를 표현할 때 <li>가 들어감
즉, <li>태그 안에는 리스트에 들어갈 항목을 작성함
(이름, 내용 ...)
1️⃣순서가 있는 목록(Ordered List)
정렬된 HTML 목록에서 모든 목록 항목은 기본적으로 숫자로 표현
<ol> : 목록의 시작 정의
2️⃣순서가 없는 목록(Unordered Lsit)
<ul> : 목록의 시작 정의
3️⃣ 설명 목록(Description List)
<dl> : 목록의 시작정의
<dt> : 용어를 정의
<dd> : 용어 정의를 설명
5. Break(개행)
<br>을 이용해 줄바꿈을 구현
<div>1234<br>5678</div> => div를 두개 사용하지 않아도 줄바꿈이 가능
6. Horizen Rule
<hr> 태그를 이용해 수평선을 구현
7. 텍스트서식
| <strong> <b> |
글씨 굵게, 글씨 강조(의미적 강조) 글씨 굵게(스타일 상의 폰트 굵게할 때 사용) |
| <em> <i> |
글씨 기울게, 글씨 강조(의미적 강조) 글씨 기울게(스타일 상의) |
| <small> | 작은 텍스트 정의 |
| <mark> | 해당 부분 형광펜으로 하이라이트 표시 |
| <sub> <sup> |
아래첨자 텍스트 표시 윗첨자 텍스트 표시 |
8. 인용
<blockquote> 들여쓰기로 표현(블록요소)
<q> 따옴표로 표시(인라인요소)