HTML 일반적인 구조
HTML Grouping Content 종류
1. <ol> , <ul>, <li> 태그
<!DOCTYPE html>
<html lang="ko">
<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>Grouping Content</title>
</head>
<body>
<ol>
<li>아침</li>
<li>점심</li>
<li>간식</li>
<li>저녁</li>
</ol>
<ul>
<li>아침</li>
<li>점심</li>
<li>간식</li>
<li>저녁</li>
</ul>
</body>
</html>결과
리스트, 메뉴 등을 나열 할때 사용 가능하다 <ol> 태그는 순서가 있는 목록에 사용되며 숫자가 매겨지고 <ul>은 순서가 없는 목록에 사용되며 특수문자가 매겨진다.
<li>는 <ol> 또는 <ul> 요소 안에서만 사용되어야 한다.
<ol type = "I">를 사용하면 로마자로 표기할 수 도 있다.
2. <dl>, <dt>, <dd>
<!DOCTYPE html>
<html lang="ko">
<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>Grouping Content</title>
</head>
<body>
<dl>
<dt>한글</dt>
<dd>대한민국에서 사용하는 언어입니다.</dd>
</dl>
</body>
</html>a는 b이다. 등 정의할 수 있는 정의 할 수 있는 상황에 사용 가능한 태그이다.
<dl>에는 하나 이상의 <dt> 또는 <dd>가 포함되고 있어야 하고 div, dt, dd를 제외한 다른 태그를 포함하면 안 된다.
3. <div>
레이아웃을 나눌 때 사용되지만 태그의 의미를 부여할 수 있다면 다른 태그들을 먼저 고민해보고 적합한 요소를 찾을 수 없다면 사용하는 태그이다.
<div>hello</div>
4. <figure>, <figcation>
자막이나 설명이 있는 이미지를 서로 연결되도록 Grouping 할 수 있는 태그이다.
<!DOCTYPE html>
<html lang="ko">
<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>Grouping Content</title>
</head>
<body>
<figure>
<img src = "images/cherry-blossom-tree-1225186_640.jpg" alt="벚꽃">
<figcaption>
봄에 핀 벚꽃
</figcaption>
</figure>
</body>
</html>
5. <p>
단락을 표시하는 태그이다. <p> 태그 안에 또 <p> 태그를 넣지 않는다.
<p>Lorem ipsum dolor sit,omnis cumque nihil, nostrum quia optio </p>
6. <pre>
HTMl을 작성할 때 컴퓨터 코드를 작성하면 코드로 인식을 해버린다. 이때 <pre> 태그로 감싸면 내용을 그대로 화면에 표현할 수 있다.
<pre>
function 제곱(x) {
return x**2;
}
</pre>
7. <blockquote>, <q>
인용문을 사용할 때 쓸 수 있는 태그이다.
<!DOCTYPE html>
<html lang="ko">
<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>Grouping Content</title>
</head>
<body>
<p><q>나는 아직 배고프다.</q>-거스 히딩크</p>
<blockquote>
<p>붉은노을</p>
<cite>이문세</cite>
</blockquote>
</body>
</html>
8. <main>
HTML 주요 콘텐츠를 Groping 할 때 사용한다.
메인 요소 안에 들어가는 내용은 유일한 내용이어야 한다.
9. <br>
가로 줄을 표시해준다. 요새 잘 쓰이지 않는다.(따른 방법 사용), <p> 태그 내에서 사용하지 않는다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [HTML] Form 태그 종류 및 개념정리 (0) | 2022.04.05 |
|---|---|
| [HTML] Text-level Tag 모음 (0) | 2022.03.31 |
| Node.js 재설치 npm 오류 /npx create-react-app Error: EPERM: operation not permitted오류 (0) | 2022.02.22 |
| [JavaScript] 원하는 조건의 배열값 가져오기(map, filter, find) (0) | 2021.05.19 |
| [JavaScript] 형 변환, 문자형을 숫자형으로 변경하는 법(parseInt, parseFloat) (0) | 2021.05.18 |