매니의 퍼블리셔 만들기 프로젝트
part1 html편
1. 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>Document</title>
</head>
<body>
</body>
</html>- <DOCTYPE html> : 해당 문서(document)의 타입(type). 어떤 표준안을 쓰는지 웹 브라우저가 알 수 있도록 맨 첫 줄에 선언한다. 안써도 작동하지만 쓰는것을 권장한다. (웹표준성에 부합)
- <html> </html> : html을 선언. 모든 태그는 이 안에 들어가야 함. lang="en"로 언어를 선언. 안써도 무관하지만 영어가 아닌 경우 문자가 깨지는 상황을 방지한다. (한국어 lang="ko")
-
<head> </head> : 메타태그와 타이틀, css스타일, 자바스크립트 등을 넣을 수 있다.
- meta 태그 : 해당 문서의 정보인 메타데이터를 정의할 때 사용된다. [참고문서](https://www.tcpschool.com/html-tags/meta)
- title 브라우저의 최상단 탭부분에 나오는문구
- <body> </body> : 웹문서의 내용이 들어가는 부분.
-
<script> </script> : 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의한다.
2. html 주요태그
태그의 종류는 많지만, 그 중 가장 많이 쓰이며 필수적으로 알아야 할 태그들이다.
문단
- <p> </p> : 문단을 나타낼 때 사용
- <a></a> : 다른 콘텐츠와 연결되는 하이퍼링크를 정의. href속성으로 주소를 정의
<a href="manition.tistory.com">매니의 IT매지션</a>
- <h1> </h1> : 표제부분을 나타낼 때 사용. h1 ~ h6까지 있다.
- <pre></pre> 띄어쓰기나 여백, 줄간격 등을 그대로 나타낸다.
- <br/> : 문단의 줄을 바꾸는 태그
- <hr /> : 콘텐츠의 주제가 바뀔 때 사용하는 수평선
- <img /> : 이미지를 정의. 필수 속성 src(이미지 경로), alt(이미지 설명)를 반드시 명시해야 한다.
목록
- <ul></ul> : unordered list의 약자로 순서가 없는 목록
- ul 자식요소로는 <li></li> 태그만 쓰인다. (li안에는 다른태그 가능)
- <ol></ol> : ordered list의 약자로 순서가 있는 목록
- ol 자식요소로는 <li> 태그만 쓰인다. (li안에는 다른태그 가능)
- <dl></dl> : 정의 목록 태그
- 안에는 <dt></dt>와 <dd></dd> 태그만 새용
- dt : 정의되는 항목의 제목
- dd : 정의되는 항목의 내용
구조
- <div> </div> : html문서에서 특정 영역이나 구획을 정의한다. 블록요소(디아이브이, 디브)
- <span></span> : 문서에서 인라인요소들을 하나로 묶을 때 사용. div와 비슷한 역할
주요 태그들을 정리한 것이고, 더 자세한 내용은 tcpschool사이트에서 확인할 수 있다.
[TCP스쿨 사이트 - HTML 태그](https://www.tcpschool.com/html-tags/intro)
반응형
'공부 > Html & Css' 카테고리의 다른 글
| css기초, css 이론과 글자꾸미기 (0) | 2022.03.12 |
|---|---|
| html이론 3, 구문 b/strong 와 i/em의 차이 - 웹접근성 (0) | 2022.03.12 |
| Html 이론1 ~매니의 퍼블리셔 만들기 프로젝트~ (0) | 2022.03.04 |
| 1줄, 2줄이상 말줄임표 css 코드 (0) | 2021.12.16 |
| html 태그 block , inline, inline-block (0) | 2020.09.03 |
댓글