반응형
⭐ HTML 기본 문법
- HTML의 기본 단위를 요소(element)라 부른다.
- 요소는 시작 태그, 종료 태그, 그리고 그 사이 내용(content)으로 이루어져 있다.
- 시작 태그는 태그명, 속성명(attrivute), 속성값(value)으로 이루어져 있다.
- 속성은 여러 개가 있을 수 있으며, 띄어쓰기로 구분된다.
- 전체 구조 : <태그명 속성명="속성값">내용</태그명>
🐍 Self closing Tag의 경우
- 내용은 없고 시작 태그만 있다. : <태그명 속성명="속성값 />
- img, br같은 태그들
- html5에서는 끝에 /(슬래시)를 붙여도 되고 안 붙여도 되지만, 4에서는 붙이면 안 되고, xtml에서는 꼭 필요하다.
- 협업시 그 그룹의 코딩 컨벤션에 맞게 하자
⭐ HTML 문서 기본 구조
<!-- 문서 유형을 지정하는 선언문 -->
<!DOCTYPE html>
<!-- 웹 문서의 시작을 알리는 태그, head와 body로 구성 -->
<html lang="ko">
<!-- 브라우저에게 정보를 주는 태그 -->
<head>
<!-- 문서의 정보 -->
<!-- 문자 세트(인코딩) 지정하기 -->
<meta charset="UTF-8">
<!-- 모바일 기기 고려하기 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 브라우저 고려하기 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 문서의 제목 -->
<title>내가 처음 만드는 HTML 문서</title>
</head>
<!-- 실제 브라우저에 표시될 내용 -->
<body>
<p>내가 보려고 정리하는 프로그래밍</p>
</body>
</html>태그들이 모이면 문서(document)가 된다.
각 요소 설명
- <!DOCTYPE html> : 문서 유형 설명, html5임을 알려준다.
- <html> : 웹 페이지의 시작과 끝, <head>와 <body>가 들어있다.
- <head> : html 문서의 메타데이터(metadata)정의, 정보를 넘겨주고(<meta>), 제목(<title>)을 표시, 웹 브라우저에 보여지진 않음
<meta>, <title>, <style>, <link>, <script>, <base> 등으로 구성 - <body> : 문서의 실제 내용, 웹 브라우저에 직접 보여짐!
🐍 그 외 태그들의 종류
- 오늘날의 HTML 태그들은 약 150개가 넘는다!
- 새로 생겨나는 태그들도 많고, 너무 오래되서 사용하지 않는 태그들도
- 하지만 웹 페이지에서 쓰이는 태그 종류는 30개 내외!
가장 많이 쓰이는 html 태그 종류 32개
- 위 그래프은 가장 많이 쓰는 html 태그 32개를 표시한 것
- 이 태그들만 알아둬도 반은 안다!
- 각 태그에 대한 자세한 설명은 아래 표에서 태그명을 클릭해서 볼 수 있다.
| 태그명 | 태그 설명 |
| <html> | 웹페이지 시작과 끝, html 문서의 루트(root) 요소 정의 |
| <head> | html 문서에 대한 정보 |
| <body> | 직접 보이는 내용(content), 문서의 몸통 |
| <title> | 페이지 제목. 툴바에 표시시 탭 이름, 즐겨찾기 이름, 검색엔진 검색시 페이지 이름 |
| <meta> | 웹페이지의 정보. 문자 인코딩, 문서 키워드 요약 정보. |
| <div> | 분할(division)의 약자, 레이아웃을 나누는데 사용. 블록(block) 태그, CSS와 함께 사용. |
| <a> | 닻(anchor)의 약자, 링크. 웹 페이지나 외부 사이트 연결. 링크로 사용할 텍스트나 이미지를 <a>로 묶어 href(hypertext reference) 속성을 이용해 연결 |
| <script> | javascript 코드 삽입을 위한 태그. <head> 태그 안 |
| <img> | 이미지(image)의 약자, 사진. 태그 하나당 1개 이미지 |
| <span> | 인라인(inline) 태그, CSS와 함께 사용 |
| <p> | 단락(paragraph)의 약자, 본문 내용을 표현. 웹 사이트의 중요 내용을 담음. |
| <li> | 리스트(list)의 약자, 리스트의 항목을 나타냄. <ul> <ol> 내부에 사용 |
| <ul> | unordered list의 약자, 순서가 없는 리스트. 메뉴 버튼 만들 때 사용 |
| <ol> | ordered list의 약자, 순서가 있는 리스트. |
| <style> | 스타일 정보를 정의. CSS 입력. <head> 태그 안 |
| <br> | 쪼개다(break)의 약자, 줄 바꿈. |
| <h1~h6> | 제목(heading)의 약자, 문서의 제목, 부제목 표현. 1이 1등으로 가장 크고 중요하다. |
| <footer> | 가장 하단에 들어가는 태그. 제작 정보, 저작권 정보 표시. 시멘틱 태그의 일종 |
| <header> | 웹 사이트의 머리글, 제목을 담음. 시멘틱 태그의 일종 |
| <iframe> | 외부 페이지 삽입 |
| <button> | 버튼 생성. form 안에서 전송 버튼이나 리셋할 때. 클릭시(onclick) 자바스크립트로 행동 만들어줄 수도. |
| <strong> | 중요 내용 강조. <b>는 걍 굵게지만 <strong>은 웹 리더기 사용시 강조해서 읽음 (웹 접근성) |
| <i> | italic, 기울임 |
| <!-- --> | 주석, 웹 페이지에는 표시 안 됨. 위 목록에는 없지만 표시 |
반응형
'⭐ 코딩 기초 > HTML, CSS' 카테고리의 다른 글
| 📝 표를 만드는 HTML 태그들! (0) | 2022.09.20 |
|---|---|
| 📝 목록을 만드는 HTML 태그들! (0) | 2022.09.18 |
| 📝 텍스트를 표현하는 HTML 태그들! (1) | 2022.09.18 |
| 🖥️ HTML 인라인(Inline), 블록(Block) 비교하기! (0) | 2022.09.18 |
| 🖥️ 웹 기초, HTML 기초 초간단 요약! (0) | 2022.09.14 |
댓글