04-1 텍스트 입력하기
<h1> ~ <h6> : 제목을 나타내는 태그
<!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>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</body>
</html>
- h1이 가장 큰 제목, h6이 가장 작은 제목
- 닫는 태그 필요하다
<p> 태그와 <br> 태그
<p> 태그 : 텍스트 단락을 만드는 태그
- 편집기에서 줄 바꿈 해도 웹 브라우저에는 한 줄로 표시됨 → 그야 물론 너무 길면 줄 바꿈이 일어나긴 하죠
- 닫는 태그 필요
→ 줄 바꿈 태그는 없나 ?? → → <br> 태그
<br> 태그 : 줄 바꿈 태그, 단독으로 사용(닫는 태그 ❌)
<blockquote> 태그
- 인용문 쓸 때 사용하는 태그
- 닫는 태그 필요
- 다른 텍스트보다 약간 들여 쓰게 됨
<strong> 태그와 <b> 태그
- 텍스트 굵게 표시
- strong 태그와 b 태그의 차이점 → strong태그는 경고/주의사항 등 중요한 내용 강조 (화면 낭독기에서도 강조하여 읽어줌) , b태그는 단순히 글자만 굵게 표시(화면 낭독기 강조 ❌)
<em> 태그와 <i> 태그
- 텍스트 기울여 표시
- <em> : 문장에서 특정 부분 강조 시 사용
- <i> : 생각, 용어, 관용구 등에 사용
04-2 목록 만들기
<ol> 태그와 <li> 태그
- 순서 있는 목록 만들 때 사용
<body>
<ol>
<li>인사를 합니다</li>
<li>목례를 합니다</li>
<li>다리를 흔듭니다</li>
<li>야호~ 외칩니다</li>
</ol>
</body>
<ol> 태그의 type, start 속성
- ol 태그는 기본적으로 숫자 1~2~ 이렇게 번호 붙이는데, 이걸 바꿀 수 있다!
| type = “1” | 숫자(기본값) |
| type = “a” | 영문 소문자 |
| type = “A” | 영문 대문자 |
| type = “i” | 로마 숫자 소문자 |
| type = “I” | 로마 숫자 대문자 |
<body>
<ol type="a" start="2">
<li>인사를 합니다</li>
<li>목례를 합니다</li>
<li>다리를 흔듭니다</li>
<li>야호~ 외칩니다</li>
</ol>
</body>
<ul> 태그와 <li> 태그
- 순서 없는 목록 만들 때 (항목의 순서가 중요하지 ❌ 때)
<body>
<ul>
<li>인사를 합니다</li>
<li>목례를 합니다</li>
<li>다리를 흔듭니다</li>
<li>야호~ 외칩니다</li>
</ul>
</body>
<dl>, <dt>, <dd> 태그
- 설명 목록 (이름과 값 형태로 된 목록) 을 만드는 태그
- 웹에서 목록 형식 콘텐츠 넣을 때 설명 목록 활용하면 좋음
- <dl> </dl> 사이에 <dt> 태그 하나, <dd> 태그 하나 이상 사용
<body>
<dl>
<dt>튀긴 닭</dt>
<dd>뿌링클</dd>
<dd>네네치킨</dd>
</dl>
<dl>
<dt>구운 닭</dt>
<dd>고추바사삭</dd>
<dd>옛날통닭</dd>
</dl>
</body>
04-3 표 만들기
표는 행(row), 열(colum), 셀(cell)로 이루어짐
<table> 태그와 <caption>태그
- <table> ~ </table> : 표의 시작과 끝
- <caption> : 표의 제목
<tr> 태그와 <td>, <th> 태그
- <tr> 태그는 행을 지정하고 <td> 태그는 셀을 지정
- <th> 태그는 표의 제목 행에 셀을 만들 때 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table 기초</title>
<style>
table{
border: 1px solid gray;
border-collapse: collapse;
}
td,th{
border: 1px solid gray;
padding: 10px;
}
</style>
</head>
<body>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</th>
<th>가격</th>
</tr>
<tr>
<td>선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>47,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</table>
</body>
</html>
표의 구조를 지정하는 <thead>, <tbody>, <tfoot> 태그
• <thead>와 <tbody>, <tfoot> 태그는 table의 ‘t’와 제목(head), 본문(body), 요약(foot)을 각각 합친 말
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
<col>과 <colgroup> 태그
테이블 태그 colgroup 알아보기
테이블 태그에서 사용할 수 있는 태그 colgroup 태그에 대하여 알아보도록 하겠습니다.
webisfree.com
- 특정 열에 배경색 넣거나 너비 바꿀 때
- <col> 태그는 열 1개 지정할 때 사용
- <colgroup> 태그 : <col> 태그를 2개 이상 묶어 사용
반드시 <caption>다음에 써야함
- <colgroup> 태그 안에 <col>태그 포함해 전체 열의 개수만큼 넣어야 함
04-4 이미지 삽입하기
<img> 태그
- 이미지 삽입할 때 사용
<img src="이미지 경로" alt="대체 텍스트">
04-5 오디오와 비디오 삽입하기
07-1 오디오와 비디오
##오디오 웹을 통해 오디오를 표시하기 위해서는 이미지를 나타낼 떄와 마찬가지로 표시하고자 하는 오디오 파일이 실제로 존재해야 합니다. 오디오를 표시하는 태그는 `` 태그입니다.…
wikidocs.net
**<object>, <embed> 태그 → 다양한 멀티미디어 파일 삽입
<object width="너비" height="높이" data="파일"></object>
- data 속성에 보여 줄 멀티미디어 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정할 수 있음
<embed src="파일 경로" width="너비" height="높이">
- HTML의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed> 태그를 사용해서 멀티미디어 파일을 삽입
**<audio>, <video> 태그 →오디오, 비디오 파일 삽입
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>
- 배경 음악이나 효과음 등 오디오 파일을 삽입할 때는 <audio> 태그를 사용하고,비디오 파일을 삽입할 때는 <video> 태그를 사용
→ audio, video 의 여러 속성
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
04-6 하이퍼링크 삽입하기
<a> 태그와 href 속성
- 링크는 <a>태그로 만들 수 있음
→ 텍스트 사용하면 텍스트 링크
→ 이미지 사용하면 이미지 링크
<a href="링크 주소">텍스트 or 이미지</a>
링크 새 탭에서 열고 싶다 → target 속성
<a href="링크~~~" target="_blank">텍스트 or 이미지</a>
- 현재 열려 있는 웹 창에서 새로운 문서가 나타나면 뒤로가기 누르는 게 번거로워짐
→ target=”_blank” 속성을 추가하면 새 탭에서 열리게 됨
'프론트엔드 > HTML&CSS' 카테고리의 다른 글
| Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 [HCJ 챌린지 2일차] (0) | 2023.08.22 |
|---|---|
| Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 [HCJ 챌린지 1일차] (0) | 2023.08.20 |
