웹 문서의 기본 구조

<!DOCTYPE html> 
<html lang="en">

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
</head>
<body>
    
</body>
</html>
  • `<!DOCTYPE html>` : DOCTYPE는 이 문서가 HTML 문서임을 알리는 선언부.
    • 아래에 있는`html` 태그가 사용되어지기 전에 선언되어야함
  • `<html lang="en">` : 이 `html` 태그는 html 문서 영역의 전체를 감싸는 태그
  • `<head>` : 브라우저의 머리 부분에 해당하는 정보를 담당
  • `<meta>` : `meta` 태그를 사용해서 문서에 대한 설명을 작성하거나 파일 정보, 스크립트 정보 등을 작성
    -> 이 정보들은 사용자에게 보여지는 것이 아닌 브라우저나 검색 엔진에게 전달되는 영역
  • `<title>` : `title` 태그는 문서의 타이틀
    -> 즉, 웹 사이트의 이름을 정의함
  • `<body>` : 본문 부분에 해당하는 정보를 담당
    -> 사용자에게 직접적으로 보여지는 영역

태그의 규칙

  1. `<태그이름 속성이름 = "속성값">`의 구조를 가짐 ex) 
  2. 태그는 두 가지로 분류 됨
    1. 짝을 이루는 태그
    2. 혼자 쓰이는 태그
  3. 닫는 태그는 이름 앞에 `/`를 붙임 ex) `<body> </body>`

다른 파일 불러오는 법

// 예시는 이미지를 불러온다는 전제
<body> 
<img src="./img/cat.jpeg" alt="Cat" />
  <!-- 해당 문서와 같은 폴더 경로에 있다면 점 하나, 다른 폴더라면 점 두개 -->
</body>

블록태그 vs 인라인 태그

<!-- 블록 태그 : 항상 전체 너비를 차지하는 덩어리 태그 -->
<!-- 인라인 태그 : 자기 자신의 크기만큼만 자리를 차지하는 태그 -->
<span>인라인</span>
<span>인라인</span>
<div>블록</div> <!-- 줄바꿈이 생김 -->
<span>인라인</span>

<!-- 태그 중첩 규칙 -->
<!-- 1. 블록 태그 내부에는 블록 태그와 인라인 태그 모두 중첩이 될 수 있음 -->
<!-- 2. 인라인 태그 내부에는 인라인 태그만 중첩될 수 있음 -->
<!-- 3. 블록 태그 중에 문단 태그(p태그)는 블록 태그지만 내부에 인라인 태그만 중첩될 수 있음 -->

인라인 태그

- 자신의 내용과 앞뒤 태그의 내용을 같은 라인에 출력하는 태그
- 구성 요소 역할을 함(출력 내용 역할)
- 내용물의 크기가 태그의 영역이 됨

 

대표적인 인라인 태그

`<span>`

- 사용자 정의 영역을 표현

- 정해진 역할이 없음

- 인라인 태그+CSS, JavaScript

 

기타 인라인 태그 종류

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <small>, <script>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var>

 

블럭 태그

- 자신의 내용과 앞뒤 태그의 내용을 다른 라인에 출력하는 태그
- 자신의 내용만으로 한 라인을 독점해서 출력하는 태그
- 영역(구조)을 만들 때 사용 -> 컨테이너 역할 -> 레이아웃 구성(틀만들기)
- 내용물의 크기와 상관없이 너비는 항상 100%, 높이는 내용물의 크기에 맞춰서 변화

 

대표적인 블럭 태그

`<div>`

- 사용자 정의 영역을 표현

- 정해진 역할이 없음

- 블럭태그 + CSS, JavaScript

 

기타 블럭 태그 종류

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video>

'React > HTML & CSS' 카테고리의 다른 글

[HTML/CSS] 자기소개 페이지 꾸며보기  (0) 2025.11.26
[HTML] form태그와 input태그  (0) 2025.11.21
[HTML] div, span 태그 & 클래스와 아이디  (0) 2025.11.21
[HTML] 간단한 자기소개 페이지 만들어보기  (0) 2025.11.20
[HTML] 태그  (0) 2025.11.20

티스토리툴바