HTML 이란
: HyperText Markup Language의 줄임말로 하이퍼텍스트를 마크업 하는 언어
하이퍼텍스트 - 웹사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능
마크업 - 태그(tag)를 사용해 어느 문서에서 어느 부분이 제목이고 본문인지 표시하는 것
우리가 자주 들어가는 네이버나 크롬 같은 웹사이트도 HTML과 CSS로 이루어져 있고
실제로 우리가 확인해 볼 수 있다
HTML 기본 문서 구조
태그
- 태그는 < >을 사용하여 작성하며 구분한다
- 태그는 소문자로 작성한다
- 여는 태그와 < > 닫는 태그 </ >를 정확히 입력한다
- 들여쓰기 한다
- 태그는 속성과 함께 사용 가능하다
<!DOCTYPE html> -문서 유형을 지정하는 곳
<html lang="en"> -웹 문서의 시작, 언어 지정
<head> -웹 브라우저에 표시 되지 않는 곳
<meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> 문서 제목 </title>
</head>
<body> 실제 화면에 웹 브라우저 화면에 나타날 내용 태그를 작성하는 곳 </body>
</html> -웹 문서의 끝
위의 기본 구조는 [ ! + Tab 키 ] 단축키로 쓸 수 있고 바꿀 부분만 다시 적어주면 된다
텍스트 관련 태그
- 블록 레벨 태그
<hn> 제목 <hn>
heading
제목 텍스트를 작성할 때 사용, 일반 텍스트보다 굵고 진하게 표시된다
n = 1 ~ 6까지 있으며 숫자가 커질수록 크기가 작아진다
<p> 텍스트 </p>
paragraph
텍스트 단락을 만든다
</p>로 마치면 줄바꿈
<br>
break
줄바꿈
<hr>
horizontal
수평 줄 삽입, 분위기 전환용
닫는 태그 없음
<blockquote> 인용문 </blockquote>
자동 들여쓰기 해줌
<pre> 텍스트 <pre>
preformat
공백 표시
두 개 이상의 공백을 HTML에서 작성하더라도 브라우저에 한 개의 공백만 표시해 주는데
<pre>를 사용하면 그대로 표시해 줌
*접근성(소리를 읽어주거나 점자로 표시할 때 건너뛰어버리는 현상 발생)
- 인라인 레벨 태그
<strong> 굵게 강조할 텍스트(강조) </strong>
<b> 굵게 표시할 텍스트(단순 강조) </b>
<em> 기울임 글씨로 강조할 텍스트 </em>
<i> 기울임 글씨로 표시할 텍스트 </i>
강조와 단순 강조의 차이는 위에서 말한 접근성의 차이
<q> 인용 내용 </q>
줄바꿈 없이 쌍따옴표(" ")로 표시해 줌
<mark> 텍스트 </mark>
형광펜 효과
<span> 내용 </span>
줄바꿈 없이 영역 묶기
일부 텍스트에만 스타일을 넣을 때 사용
기타 텍스트 관련 태그(닫는 태그도 같이 써야 한다)
<abbr> 약자 표시
<cite> 참고내용 표시
<code> 컴퓨터 인식을 위한 소스 코드
<kbd> 키보드 입력이나 음성 명령 같은 사용자 입력 내용
<small> 작게 표시하는 텍스트
<sub> 아래 첨자
<sup> 위 첨자
<s> 취소서
<u> 밑줄
목록을 만드는 태그
<ul>
<li> 내용 1 </li>
<li> 내용 2 </li>
...
<ul>
순서가 없는 목록 만들기
내용 앞에 불릿(●) 생성 - 수정 가능
<ol>
<li> 내용 1 </li>
<li> 내용 2 </li>
</ol>
순서가 있는 목록 만들기
내용 앞에 숫자 생성 - 숫자, 영어, 로마 숫자로 수정 가능
<dl>
<dt> 제목 </dt>
<dd> 설명 </dd>
...
<dl>
설명 목록 만들기
dd - 들여 쓰기로 표시됨
<table>
<tr>
<th> 제목 </th>
<td> 내용 </td>
<td> 내용 </td>
...
</tr>
...
</table>
기본적인 표 만들기
tr - 가로 행의 개수
td - 가로 열의 개수
th - 행 또는 열의 제목(셀의 중앙, 굵게 표시됨)
colspan="합칠 가로 셀의 개수"
rowspan="합칠 세로 셀의 개수"
td, th 옆에 작성
<caption> 표 제목 </caption>
표의 위쪽 중앙에 표시됨
<figcaption> 표 제목 < /figcaption>
표의 위쪽 왼편에 표시됨
<thead> 제목
<tbody> 본문
<tfoot> 요약
표의 구조를 나눠줌
닫힘 태그 작성해야 함
<colgroup>
<col>
...
</colgroup>
여러 열을 묶어 스타일을 지정할 때 사용
caption 뒤 tr 앞에 사용
'코딩 배우는 중 > HTML_CSS_JS' 카테고리의 다른 글
| JS : 객체 (0) | 2023.11.20 |
|---|---|
| JS : 배열 (0) | 2023.11.20 |
| JavaScript 기초 문법 (0) | 2023.02.25 |
| HTML : 폼 만들기 (0) | 2023.02.25 |
| HTML : 이미지 삽입, 링크 (0) | 2023.02.25 |