2022. 2. 23. 16:46ㆍ프론트/html
html이란?
- Hyper Text Mark-up Language" 의 약자
- 웹 문서(페이지)를 작성하기위한 언어
- html 문서 버전은 doctype으로 서술한다.
- html문서 시작을 알리는 테그는 html테그이다.
<!-- html 주석 처리 방법 -->
<!DOCTYPE html> <!-- html5 버전 가르킨다. -->
<html> <!-- html문서 시작을 알린다. -->
<head>
<!--
이 페이지의 정보를 서술 하는 공간
눈에 보이지 않는 정보
-->
<title>sample</title>
<meta charset="UTF-8">
</head>
<body>
<!--
사용자의 눈에 보이는 컨텐츠를
나열하는 공간
-->
<h1>HTML</h1>
HTML은 웹 문서(페이지)를 작성하기위한 언어입니다.
</body>
</html>
요소
-구성 내용(시멘틱 테그 및 엘리멘트(테그) 요소등을 포함)
*시멘틱 테그 : 예를 들어, <div> 태그는 non-semantic 태그라고 할 수 있고,
<table>, <article> 등의 태그는 semantic 태그라고 볼 수 있다.
인라인 요소와 블럭 요소
1.블럭 요소(block element)
-모든 인라인 요소를 포함할 수 있고 다른 블럭 요소도 일부 포함(자식요소로 포함)
-자동 줄바꿈
-부모의 크기만큼 가로폭 100%을 가지는 직사각형 형태
-블럭요소는 인라인 요소로도 변경 가능(CSS 속성 display로 가능)
-높이와 넓이 설정 가능
-마진 패딩 설정 가능
-주로 레이아웃을 구성할때 사용
2.인라인 요소(inline element)
-항상 블록 요소안에 포함되어 있음(항상 부모 객체는 블록 요소)
-인라인 요소안에 인라인 요소 포함 가능
-높이설정 불가능
-CSS 속성 중 Line-height로 텍스트(줄) 높낮이를 조절 가능
-CSS 속성 중 text-align로 좌,우,중 정렬가능
-줄 바꿈이 자동으로 없음
●블럭 요소
블럭 요소의 종류
div
-시맨틱 태그 외의 블럭요소 표현 할때 쓰인다.
<div>블럭 요소</div>
header
- 화면의 상단을 감쌀 때 쓰이는 태그<br>
- html5에서 추가
- 사실상 div와 같으나 코드를 보기 편하게 하기 위해 추가됨
<header>
블럭 요소
</header>
footer
- 화면의 하단을 감쌀 때 쓰이는 태그<br>
- html5에서 추가
- 사실상 div와 같으나 코드를 보기 편하게 하기 위해 추가됨
<footer>
블럭 요소
</footer>
nav
- 메뉴를 감쌀 때 쓰이는 태그<br>
- html5에서 추가
- 사실상 div와 같으나 코드를 보기 편하게 하기 위해 추가됨
<nav>
nav 블럭 요소
</nav>
ul, li
- 목록을 주로 나타낼 때 쓰이는 태그
- li는 기본적으로 불릿을 가지고 있다.
- ul 상하 마진(상하 밖여백), 왼쪽 패딩(안쪽 여백)을 가지고 있다.
<ul>
<li>안녕하세요.</li>
<li>공지사항입니다.</li>
<li>[필독] 긴급 사항입니다.</li>
</ul>
<h3>table</h3>
- 표를 구성할 때 쓰이는 태그(열, 행)
- table : 표를 감싸는 태그<br>
- tr : 행을 표현<br>
- th, td : 열을 표현<br>
- thead : 표 상단<br>
- tbody : 표 본문<br>
- tfoot: 표 하단<br>
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>안녕하세요</td>
<td>2022-02-24</td>
</tr>
<tr>
<td>9</td>
<td>안녕하세요</td>
<td>2022-02-24</td>
</tr>
<tr>
<td>8</td>
<td>안녕하세요</td>
<td>2022-02-24</td>
</tr>
<tr>
<td>7</td>
<td>안녕하세요</td>
<td>2022-02-24</td>
</tr>
<tr>
<td>6</td>
<td>안녕하세요</td>
<td>2022-02-24</td>
</tr>
</tbody>
</table>
</body>
</html>
'프론트 > html' 카테고리의 다른 글
| <form></form>태그 (0) | 2022.03.04 |
|---|---|
| <span>태그 (0) | 2022.03.04 |
| <span>태그 (0) | 2022.03.04 |
| html 인라인 요소 (0) | 2022.02.24 |
| 절대경로와 상대경로 (0) | 2022.02.23 |