문서 작성하다가 인용해서 쓸 때 따옴표 붙여서 표시하잖아요? 이런 인용문을 HTML에서는 블록큐브라는 것을 이용합니다.
블록큐브를 사용할 때 다른 거랑 구별 되는게 문장을 나타내는데 차이가 있음.
<p>인용문</p>
<blockquote>인용문</blockquote>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 텍스트 관련 태그 역할 살펴보는 부분 -->
<!-- 문단을 구분할 때 p 라는 태그를 봤고 -->
<p>인용문</p>
<blockquote>인용문</blockquote>
<!-- b가 단순하게 굵게,strong은 스크린 리더기에 읽히게 하고 싶을때 내용은 중요하다고 판단해서 읽어준다는 얘기 웹 접근성으로 표시할 때는 스트롱이라는 태그를 이용해서 굵게 표시를 하는 것. -->
<!-- 단순하게 일반 텍스트랑 구분하기 위해서는 b라는 태그를 사용하기 -->
<!-- 스크린 리더기에서 음성으로 들려주고 싶은 내용이 반드시 있을 때에는 strong을 사용 강조해서 읽어줌 -->
<strong>텍스트를 굵게, 스크린리더</strong><br />
<b>굵게 표시할 텍스트</b><br />
<!-- em 스크린리더에 강조해서 읽어주는 것, i는 단순하게 일반 텍스트랑 구분하는 태그 -->
<!-- cite 인용이랑 비슷한데 웹문서에서 참고 내용을 표시할 때 -->
<em>이탤릭체로 강조할 텍스트, 스크린리더</em><br />
<i>이탤릭체로 표시할 텍스트</i><br />
<p>웹 문서에서 <cite>참고 내용</cite>을 표시할 때</p>
<!-- 웹문서에 소스 코드를 표시하고 싶을 때 코드로 감싸기 -->
<code>function save()</code>
<!-- small 활용 -->
<p>가격: 13,000원 <small>부가세 별도</small></p>
<!-- sub 아래 첨자 사용 -->
<!-- sup 위 첨자 사용 -->
<p>H<sub>2</sub></p>
<p>X<sup>2</sup></p>
<!-- s 취소선 -->
<s>취소선</s><br />
<!-- 목록 -->
<!-- dl안에 dt와 dd가 한싸 ㅇ디스크립션, 설명문이 만약에 여러개가 나온다 사전같은 걸 생각하면됨 -->
<!-- 굵은 글자와 설명이 나오고 단어가 나오는 거 이런 형식으로 목록을 만들고자 할 때는 디스크립션 리스트라는 걸 사용하면됨 -->
<dl>
<dt>HTML</dt>
<dd>html은 이러한 내용이다.</dd>
<dd>웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드</dd>
<dt>CSS</dt>
<dd>마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어</dd>
</dl>
<!-- 표 -->
<!-- table 테이블 tr 로우로 행을 구분하고 td열은 구분한다. -->
<!-- 테이블은 기본적인 행과 열로 나누는 기능도 가지지만 표의 선을 만들어볼까요!? -->
<table border="1">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
<table border="1">
<caption>
표의 제목
</caption>
<thead>
<tr>
<!-- 글자가 굵어지는 t의 헤더 -->
<th>용도</th>
<th>중량</th>
<th>개수</th>
<!-- rowspa="3"으로 인해 비고 밑에 아무것도 없어짐 표가 없어짐 -->
<!-- 영역이 달라서 여기서 합치는 건 불가능 thead 안에서 합치거나 이런 tbody 영역이 다른 거는 못합침 -->
<th rowspan="3">비고</th>
</tr>
<!-- 밑에 단어 종료 -->
</thead>
<tbody>
<tr>
<!-- td 실제 데이터 td로열을 나누기-->
<td>선물용</td>
<td>2kg</td>
<td>2개</td>
<!-- <td rowspan="2"></td> -->
</tr>
<tr>
<!-- td colspan = "2" 좌우 합침 -->
<!-- td rowspan = "2" 상하 합침 -->
<td>가정용</td>
<td>5kg</td>
<td>10개</td>
</tr>
<!-- 이렇게 구조를 나누는 이유는 스크린 리더를 지정 및 읽을 수 있다. -->
<!-- css에서 이렇게 표에 있으면 내가 작성하는 문서의 표의 첫번째 줄하고 마지막 줄 본문에 적용되는 서식을
내가 각각 다르게 지정하고 싶을 때 thead에 적용되는 서식 body에 적용되는 서식 tfoot에 적용되는 서식을 작업할 수 있음 -->
<!-- css에서도 조작하기 편리
자바 스크립트 같은 경우에는 표가 많이 커서 header 부분이 안보이는 경우가 있음 -->
</tbody>
<tfoot>
<tr>
<!-- colspan 세칸을 합침 -->
<!-- style="text-align: center;" 글자를 가운데로 정렬 left 왼쪽 정렬 right 오른쪽 정렬 -->
<td colspan="4" style="text-align: center">비고</td>
</tr>
</tfoot>
<!-- 배경색을 지정 -->
<table border="1">
<caption>
특정 열에 스타일을 지정
</caption>
<!-- 열에다가 간단하게 스타일을 지정하고자 할 때 colgroup이라는 거로 지정할 수 있다. -->
<colgroup>
<col style="background-color: wheat" />
<col />
<!-- <col style="width: 150px" /> -->
<col span="2" style="background-color: beige" />
</colgroup>
<tr>
<td>1행</td>
<td>2열</td>
<td>3열</td>
<td>4열</td>
</tr>
<tr>
<td>1행</td>
<td>2열</td>
<td>3열</td>
<td>4열</td>
</tr>
</table>
</table>
</body>
</html>
'프론트엔드 > HTML' 카테고리의 다른 글
| CSS기초 알아가는 시간 || CSS 선택자의 종류 (0) | 2023.10.16 |
|---|---|
| type 지정(미디어, pdf파일, 이미지 열기, 아이디, 비밀번호) (0) | 2023.10.11 |
| 시메틱태그 연습 실습(로고 사진 및 링크 걸기) (0) | 2023.10.11 |
| html 시멘틱 태그 설명 및 연습 (0) | 2023.10.11 |
| 맞춤훈련센터 소개 홈페이지 따라하기 (실습2) (0) | 2023.10.11 |