<hn> 태그 - 제목표시
기본형 : <h1> 제목 </h1>
각 웹 콘텐츠 영역에서 제목을 표시할 때 사용
크기 : h1 > ~ > h6
<p> 태그 - 본문
텍스트 단락
기본형 : <p> 텍스트 </p>
입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 생성됨
<br> 태그 - 줄바꾸기
기본형 : <br>
줄을 바꿀 위치에 <br>태그를 사용.
닫는 태그가 없음
<hr> 태그 - 분위기 전환
기본형 : <hr>
수평 줄이 생성됨
주제가 바뀔 때 분위기를 전환하기 위해 사용
<span>, <div> 태그 - 영역 묶기
<span> 텍스트 </span> : 줄 안에서 (인라인) 묶기
-> 외부에서 보여지지는 않지만 구분을 할 수 있도록 블록을 지정해주는 것
<div> 텍스트</div> : 줄을 바꿔 (블록) 단락으로 묶기
<blockquote> 태그 - 인용문 넣기
기본형 : <blockquote> 인용문 </blockquote>
인용문을 들여쓰기
<q> 태그 - 인용 내용 표시
기본형 : <q> 인용 문구 </q>
줄바꿈 없이 다른 내용과 한 줄에 인용문을 표시
인용 내용 앞뒤에 쌍따옴표(" ")가 추가
<pre> 태그 - 입력한 그대로 표시
기본형 : <pre> 텍스트 </pre>
프로그램 소스를 표시할 때 사용
표시한 공백 따위가 그대로 표시됨
<strong>, <b> - 굵게 표시
<strong> 텍스트 </strong>은 중요한 내용이라 강조해야 할 때
<b> 텍스트 </b> 는 단순히 굵게 표시
<em>, <i> - 이탤릭체로 표시
<em> 텍스트 </em>은 흐름에 따른 특정 부분을 강조해야 할 떄
<i> 텍스트 </i> 는 단순히 이탤릭체로 표시
<mark> - 형광펜 효과
<mark> 텍스트 </mark> 태그로 묶은 부분은 배경이 노랑색으로 표시됨
<ul>, <li> - 순서가 없는 목록
<ul>
<li>..</li>
<li>..</li>
</ul>각 항목 앞에 불릿이 붙여진다.
css에 list-style-type: none; 속성으로 불릿을 없애거나, 다른 항목으로 불릿 모양을 수정할 수 있다.
<ol>, <li> - 순서가 있는목록
<ol>
<li>..</li>
<li>..</li>
</ol>각 항목 앞에 숫자와 같은 순서가 있는 불릿이 붙여진다.
css 속성으로는 type(숫자조정), start(중간번호부터 수정), reserved(역순으로 표시하기) 등이 있다.
<dl>, <dt>, <dd> - 설명 목록
'제목'과 그에 대한 '설명'으로 이루어진 목록
<dl>과 <dt>,
<dl>과 <dd>가 사용
표를 만드는 태그
<table> ~ </table> : 표 전체
<tr> ~ </tr> : 행
<td> ~ </td> : 셀
<th> ~ </th> : 제목 셀
<caption> ~ </caption> : 표 제목 (위쪽 중앙에 표시)
<figure>, <figcaption> : 표 제목 (위치에 따라 표의 위나 아래에 제목이 표시)
colspan, rowspan 속성 : 행 혹은 열 합치기
<thead>, <tbody>, <tfoot> : 표 구조 정의하기 (각각 제목부분, 실제 본문, 요약 본문)
<col>, <colgroupt> : 열끼리 묶어 스타일 지정 (합치는 것이 아니다. 부분적으로 지정하여 꾸미기 위해 사용)
<caption>태그 뒤에, 그리고 <tr>과 <td>태그 전에 사용해야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="EUC-KR">
<title>표만들기</title>
<style>
table, th, td {
border: 1px solid #ccc;
}
td, th {
padding: 10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
</style>
</head>
<body>
<figure>
<figcaption>
<p>
국내에서 자주 사용하는 <b>모던 브라우저</b>
</p>
</figcaption>
<table>
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<td>Google</td>
<td>https://www.google.com/chrome/</td>
</tr>
<tr>
<th>파이어폭스(Firfox)</th>
<td>Mozilla</td>
<td>https://www.mozilla.org/ko/firefox/</td>
</tr>
<tr>
<th>엣지(Edge)</th>
<td>Microsoft</td>
<td>https://www.microsoft.com/ko-kr/windows/microsoft-edge/</td>
</tr>
</table>
</figure>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="EUC-KR">
<title>표 만들기 예제</title>
<style>
table, td {
border: 1px solid;
}
td {
width: 80px;
height: 20px;
padding: 10px;
}
</style>
</head>
<body>
<table border="1">
<caption>colgroup 연습</caption>
<colgroup>
<col>
<col span="2" style="background-color: lime;">
<col style="background-color: green;">
</colgroup>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<style>태그 - css
<style> ~~~ </style>태그 안에는 css 코드를 넣으면 된다.
꾸며주는 공간이라고 생각하면 된다.
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS : 버튼 만들어보기 실습 (0) | 2022.12.13 |
|---|---|
| HTML & CSS #04 : 폼, input태그 (0) | 2022.12.13 |
| HTML & CSS #03 : 이미지 & 하이퍼링크 (0) | 2022.12.13 |
| HTML & CSS #01 : 기본 (0) | 2022.12.13 |
| HTML & CSS : 구글 웹 폰트 사용하기 (0) | 2022.12.07 |
댓글