HTML

HTML 언어와 태그 정리

yn98 2024. 8. 5. 14:31

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, 가로)