HTML 언어란?
HTML(HyperText Markup Language)은 웹 페이지를 구조화하는 데 사용되는 표준 마크업 언어이다.
HTML은 웹 브라우저가 웹 페이지를 렌더링하고 표시하는 데 필요한 구조와 내용을 정의한다.
HTML 문서는 여러 태그로 구성되어 있으며, 각 태그는 웹 페이지의 다양한 요소를 정의한다.
HTML 문서구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
<!-- CSS와 자바스크립트 파일 링크, 메타 정보 등이 포함됩니다. -->
</head>
<body>
<!-- 페이지의 본문 내용이 들어갑니다. -->
</body>
</html>
태그의 분류
- 블록 태그
- Block 태그는 새로운 라인에서 시작 되며, Block 태그 다음에 오는 모든 태그들은 새 라인에서 시작 >> 행렬로 비교하면 행에 해당한다.
- Block 태그들은 css의 속성 중 height, width, margin, padding을 적용할 수 있다.
- 예시) <p> ,<div>
- 인라인 태그
- Inline 태그들은 새라인에서 시작하지 않고 현재 라인에서 시작 >> 행렬로 비교하면 열에 해당
- Inline 태그들은 css의 속성 중 height, width, margin, padding등의 속성을 적용할 수 없다.
- 예시) <span>
- 쌍으로 된 태그
- 태그의 시작과 끝이 따로 있어 시작과 끝 사이에 안에 코드를 넣는 태그 ex) <태그> 코드 </태그>
- 예시) <p> ,<div> 등..
- 쌍이 아닌 태그
- 태그의 시작과 끝이 따로 없는 태그
- 예시) <br>, <input> 등..
주요 HTML 태그
- <!DOCTYPE html>
- HTML 문서임을 선언
- <html>
- <html>과 </html> 사이에 html 문서를 작성한다.
- <head>
- 머리말
- 문서의 메타데이터를 포함하는 부분이다.
- css, javascript, 문서 제목, 문자 인코딩 등이 정의된다. (연결도)
- <meta charset="UTF-8">
- 문서의 문자 인코딩을 UTF-8로 설정한다. 이는 다양한 문자를 지원한다.
- <title>
- 제목 설정
- <link>
- 주로 외부 css 파일을 연결할 때 사용
- <body>
- 본문 내용
- 실제 보여지는 화면
- <h1>, <h2>, ..., <h6>
- 제목 태그
- 숫자가 높아질수록 중요도 ↓ (크기 ↓)
- <p>
- 단락 정의
- 텍스트 블록을 나누는데 사용
- <a>
- 하이퍼링크 정의
- href 속성으로 링크 주소 설정
- 예시 ) <a href = "https://www.naver.com/" >네이버</a>
- <br>
- 줄바꿈
- <hr>
- 선
- <div>
- 주로 콘텐츠를 나누기 위한 컨테이너 역할
- css를 이용하여 스타일 지정함
- <table>
- <tr> 표의 행 (col, 세로)
- <td> 표의 열 (row, 가로)
'HTML' 카테고리의 다른 글
| [실습] HTML, CSS (0) | 2024.08.06 |
|---|---|
| HTML 속성 정리 (0) | 2024.08.05 |