✏️ 글꼴 태그
<h1> ~ <h6> Heading
웹 페이지의 제목 또는 부제목을 표현할 때 사용하며, 숫자가 작을 수록 큰 제목을 표시하는 데 사용한다.
<p> Paragraph
하나의 문단을 표시할 때 사용한다.
<hr> Horizontal Rule
가로로 선을 긋는 태그이다. (종료태그 없음)
<br> Break
줄바꿈 태그로 HTML에서 개행 역할을 합니다. (종료태그 없음)
<i> Italic
텍스트를 이텔릭체로 표시할 때 사용한다.
<em> Emphasis
텍스트를 이텔릭체로 강조할 때 사용한다.
<b> Bold
텍스트를 진하게 표시할 때 사용한다.
<strong>
텍스트를 진하게 강조할 때 사용한다.
📄목록 태그
<ol> Ordered List
순서가 있는 목록을 표현할 때 사용한다.
type 속성으로 글머리 기호를 변경할 수 있다.
<ul> Unordered Lists
순서가 없는 목록을 표현할 때 사용한다.
<li> Listed Item
목록하위 항목으로 사용되며, <ul>태그 또는 <ol>태그의 하위에 위치한다.
<dl> Definition List
예) A는 B이다. 와 같은 Key = Value로 사용할 때 유용하다.
Definition List(정의 목록)의 약자로, 사전처럼 용어를 설명하는 목록을 만든다.
<dt> Definition Term
Definition Term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용한다.
<dd> Definition Description
Definition Description(정의 설명)의 약자로, 용어를 설명하는 데 사용한다.
주의사항⚠️
<dl>태그는 하나 이상의 <dt>-<dd> 쌍의 태그를 갖고 있어야 한다.
단, <dt>-<dd> 태그가 반드시 하나의 짝으로 지어져야 하는 것은 아니다.
<li>, <dt>-<dd>태그는 밖에서 독립적으로 사용할 수 없다.
<ul> 태그 하위요소로는 <li>태그가 위치해야 한다.
예, 다음과 같은 짝으로도 올 수 있다.
<dl>
<dt>종류<dt>
<dd>벤치프레스<dd>
<dd>(가슴운동)<dd>
</dl>
<dl>
<dt>벤치프레스<dt>
<dt>(가슴운동)<dt>
<dd>헬스의 3대 운동중 하나도 가슴 부위를 발달 시키는 운동이다.<dd>
</dl>
📊 표(Table) 태그
Table 구조
- <table> 태그 - 표
- <tr> 태그 - 행
- <td> 태그 - 열
Table 기본 태그
<table>
표를 만드는 태그로써, 표 전체를 감싸는 데 사용한다.
<caption>
표의 제목이나 설명을 작성하는 태그
<tr>
표의 행을 의미하는 태그. 자식으로 <th>태그나 <td>태그가 반드시 있어야 한다.
<th>
표의 제목 열을 의미하는 태그. 부모 태그인 <tr> 태그 안에 있어야 한다.
<td>
표의 일반 열을 의미하는 태그. 부모인 <tr>태그안에 있어야 한다.
Table 그룹 관련 태그
<colgroup>
열을 그룹으로 묶을 수 있도록 해주는 태그이다.
<col>
<colgroup>태그의 자식으로 열 단위를 나눌 수 있다.
span 속성을 사용하여 열을 그룹으로 묶을지 설정한다.
예) <col span="3"> → 세 개의 열을 그룹으로 묶음
<thead>
표의 제목 열들을 묶는 그룹 태그
<tbody>
표의 일반적인 데이터들을 묶는 그룹태그.
기본적으로 행그룹태그를 사용하지 않으면 크롬브라우저가 자동으로 tbody 태그로 묶어준다.
<tfoot>
표의 하단 영역을 묶는 그룹태그
Table 기본
| 이름 | 취미 | 특기 |
|---|---|---|
| 홍길동 | 도술 | 축지법 |
| 짐코딩 | 헬스 | 코딩 |
Table 그룹 태그
| 반 | 이름 | 국어 | 영어 | 수학 | 코딩 |
|---|---|---|---|---|---|
| 1반 | 홍길동 | 90 | 100 | 90 | 81 |
| 나훈아 | 80 | 90 | 70 | 100 | |
| 나코딩 | 80 | 90 | 70 | 100 | |
| 1반 | 85 | 95 | 80 | 90.5 | |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Table Tag</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 12px;
}
.col1 {
width: 80px;
}
.col2 {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Table 기본</h1>
<table>
<caption>
프로필 테이블
</caption>
<tr>
<th>이름</th>
<th>취미</th>
<th>특기</th>
</tr>
<tr>
<td>홍길동</td>
<td>도술</td>
<td>축지법</td>
</tr>
<tr>
<td>짐코딩</td>
<td>헬스</td>
<td>코딩</td>
</tr>
</table>
<hr />
<h1>Table 그룹 태그</h1>
<table>
<caption>
학급 점수
</caption>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
</colgroup>
<thead>
<tr>
<th>반</th>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
<th>코딩</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1반</td>
<td>홍길동</td>
<td>90</td>
<td>100</td>
<td>90</td>
<td>81</td>
</tr>
<tr>
<td>나훈아</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>나코딩</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">1반</td>
<!-- <td>평균</td> -->
<td>85</td>
<td>95</td>
<td>80</td>
<td>90.5</td>
</tr>
</tfoot>
</table>
</body>
</html>
본 내용은 유튜버 짐코딩님의 웹 개발 강의를 정리한 것 입니다. 하단 링크 참고해주세요!
짐코딩 - 웹 개발 입문부터 실무까지
【실전코딩 짐코딩 클럽 💪🏋️♀️】 👉 https://gymcoding.co (짐코딩 사이트, 강의교안 등등) 【짐코딩 클럽 온라인 강의 🎉】 👉 https://edu.gymcoding.co 👉 모든 유료강의 구독자 할인 쿠폰코드
www.youtube.com
'HTML' 카테고리의 다른 글
| [HTML] 🖼️ 이미지 & 멀티미디어 (0) | 2024.08.12 |
|---|---|
| [HTML] Inline VS Block Element (0) | 2024.08.09 |
| [HTML] Sementic Tag 란? (0) | 2024.08.08 |
| [HTML] Emmet (0) | 2024.08.06 |
| [HTML] HTML 이란? (0) | 2024.08.01 |
