요소(시작 태그 < + 웹콘텐츠 + 끝 태그 >) 유형은 세가지가 있다.
1. 블록형(block) 요소
너비값이 100%로 줄바꿈한다. 레이아웃 스타일시트 적용이 잘 된다.
ex) <img>, <a>, <input>, <label>, <span> 외 나머지
2. 인라인-블록형(inline-block) 요소
요소가 좌에서 우로 배치된다. 레이아웃 스타일시트 적용이 된다.
ex) <img>
3. 인라인형(inline) 요소
요소가 좌에서 우로 배치된다. 레이아웃 스타일시트 적용이 안된다.
ex) <a>, <input>, <label>, <span>
제목 태그 <hn>
<h1>제목</h1>
제목을 뜻하는 heading의 줄임말인 'h'와 제목 크기를 나타내는 숫자(1~6)을 사용하여
<h1> <h2> <h3> <h4> <h5> <h6> 으로 표현한다.
<h1> 이 가장 큰 제목, <h6> 이 가장 작은 제목 이다.
단락 만들기 <p>
<p>텍스트</p>
텍스트를 표시할 때 가장 많이 사용하는 태그
paragraph의 줄임말로 텍스트 단락을 만드는데 너비값에 따라 자동으로 줄바꿈 처리 된다.
줄 바꾸기 <br>
<br>
줄 바꿀 위치에 <br>태그를 사용, break의 줄임말로 닫는 태그가 없다. (단일태그)
줄바꿈 없이 영역묶기 <span>
<span>내용</span>
텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용
그 외 수평줄 넣기 <hr>태그, 인용문 넣기 <blockquote>태그, 입력하는 그대로 화면에 표시하기 <pre>태그,
굵게 표시하기 <strong>태그와 <b>태그, 이탤릭체로 표시하기 <em>태그, <i>태그, 인용 내용 표시하기 <q>태그,
형광펜 효과내기 <mark>태그, 동아시아 글자 표시하기 <ruby>태그, 아래 첨자 <sub>태그, 위 첨자 <sup>태그 등이 있다.
순서 없는 목록을 만드는 태그 : 목록태그 <ul>, 항목태그 <li>
<ul>
<li>내용</li>
<li>내용</li>
</ul>
순서가 필요하지 않은 목록(unordered list)를 만들 때 <ul> 태그를 사용
<ul> 태그 안에 <li> 태그(list item)를 사용해 각 항목을 표시
순서 있는 목록을 만드는 태그 : 목록태그 <ol>, 항목태그 <li>
<ol>
<li>내용</li>
<li>내용</li>
</ol>
항목을 나열하되 순서가 필요한 목록(ordered list)을 만들 때 <ol> 태그를 사용
속성값을 이용해 목록의 숫자와 순서를 지정해 줄 수 있음
표를 만드는 태그 <table>, 행 <tr>, 열 <td>와 <th> 태그
<table>
<tr>
<td>내용</td>
<td>내용</td>
. . . . . .
</tr>
. . . . . .
</table>
<table> 태그로 표 자리를 만듬 (stylesheet 적용O)
<tr>태그로 행을 만듬 (stylesheet 적용X)
<td>태그로 각 행마다 열을 만듬 (stylesheet 적용O)
<th>태그는 <td>대신 사용하여 칼럼의 제목을 굵게 표시할 수 있음
표 구조 정의 <thead>, <tbody>, <tfoot> 태그
table의 t와 제목 부분(head), 본문(body), 요약 부분(foot)이 합쳐진 태그이며,
표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문
그리고 요약 부분이 있는 부분으로 표의 구조를 나누어 놓는 것이 좋다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI 요소 - 테이블</title>
<style>
table {border:3px dotted blue;}
th {border:3px dashed orange;}
td {border:3px solid red;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
</tr>
<tr>
<td>1</td>
<td>제목 테스트01</td>
<td>작성자01</td>
<td>2023-08-10</td>
</tr>
</table>
</body>
</html>'Front-end > HTML5' 카테고리의 다른 글
| HTML5 - 폼 관련 태그들 (0) | 2024.02.11 |
|---|---|
| HTML5 - 이미지와 하이퍼링크 (1) | 2024.02.10 |
| HTML이란? (0) | 2024.02.09 |