<table> 추가 설명
<colgroup> p94
열 묶음 처리, 사전정의를 해주는 것이기 때문에 table 아래 작성
<col>
보조 적으로 사용하는 태그, 열과 매칭되어서 지정할 수 있다.(열의 개수만큼)
하나만 작성하면 첫 줄에만 적용된다.
td(th)에 적용할 스타일을 미리 정의하여 적용
열의 개수만큼 <col> 태그를 사용하여 각 열별로 스타일을 정의할 수 있다.
정의할 스타일이 없는 경우 <col> 태그만 작성한다.
두 열 이상을 묶어서 스타일을 정의할 경우 span 속성을 사용한다.
네 줄이 있는 칸에서 세 번째만 적용하고 싶다면 <col>만 쓰고 적용하고 싶은 곳에만 적용시키면 된다.
<col>에 적용할 수 있는 CSS
border, background, width로 한정된다.
글자 가운데 정렬
td {
기본은 left 정렬이다.
left / center / right
셀 간격 조정
셀 안의 글씨 크기의 비율에 따라서 셀 간격을 자동으로 잡아 준다.
셀마다 지정해야 한다면
공통적으로 들어가야 하는 같은 속성을 중복해서 적용시켜야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>열 묶음 처리</title>
<style>
table {
width: 600px;
}
table,
th,
td {
border: 1px solid gray;
border-collapse: collapse;
}
td {
text-align: center;
}
tr {
height: 50px;
}
</style>
</head>
<body>
<h2 style="color: red;">colgroup 예제</h2>
<table>
<colgroup>
<col span="2" style="background-color: #bff1c3;">
<col>
<col style="width: 150px;">
<col style="width: 150px; background-color: aliceblue;">
</colgroup>
<thead>
<tr>
<td>용도</td>
<td>중량</td>
<td>개수</td>
<td>가격</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>오디오와 비디오 삽입
<object> p160
pdf 등 파일 개체를 삽입하는 태그형식
이미지나 동영상을 제외한
<object width="너비" height="높이" date="파일"></object>
주의사항
1. 웹 브라우저 별 파일 지원 여부를 알아 두어야 한다.
그 이유는 다른 사람이 사용할 것을 만드는 것이기 때문에
어떤 환경에서 사용하는지 알 수 없기 때문에
어떤 환경에서든지 사용가능할 수 있도록 개발을 하는 것이 필요하다.
버전에 따라서 다르기 때문에 최신버전을 사용하지 않는다.
최신버전은 구버전에서 돌아가지 않는다.
호환성이 필요하기 때문에 이전 버전으로 작업을 한다.
따로 만들 경우 시간과 비용이 소요된다.
2. 저작권
동영상, 오디오에 모두 저작권이 있기 때문에
저작권이 있는 영상이나 음악파일은 사용하지 않아야 한다.
<audio>
문서에 오디오 파일을 삽입하기 위한 태그
주요 속성
- src : 오디오 파일의 경로와 파일명을 지정
- control : 재생 제어기 표시
- loop : 반복 재생 설정
- autoplay : 페이지 오픈 시 자동 시작 (브라우저 보안 정책으로 처리 안됨!)
- muted : 음소거 상태로 시작
- preload : 재생 전 미리 다운로드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오디오 파일 삽입</title>
</head>
<body>
<h2>오디오 재생</h2>
<audio src="audios/bear.mp3" controls loop muted preload />
</body>
</html>* 파일 경로 잘 설정하기!
오디오만 작성하면 화면에 나오는 것이 없기 때문에
속성 control을 작성해 주어야 한다.
단축태그로 사용할 수 있으면 사용법은 />로 합쳐서 사용하면 된다.
비디오 태그
<video>
문서에 비디오 파일을 삽입하는 태그
파일종류 : mp4, webm, ogg
오디오의 속성을 똑같이 사용
추가속성
- width/height : 영상의 너비/ 높이 지정
- poster : 영상이 재생되기 전에 보일 이미지 지정
loop 나 autoplay는 동영상의 크기에 따라서 인터넷이 느려질 수도 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>영상 보기</title>
</head>
<body>
<h2>간단한 영상 보기</h2>
<video src="videos\small.webm" controls muted width="300"
poster="images/child.jpg" />
</body>
</html>
특수 문자 처리
escape
형식 '&' + 키 값 + ' ; '
공백문자(스페이스바) -
< , > 비교연산자 - < >
HTML Standard
HTMLLiving Standard — Last Updated 6 February 2023 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are sup
html.spec.whatwg.org
데이터가 계속 바뀌기 때문에 바뀐 것을 보고 사용하자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>특수 문자 활용</title>
</head>
<body>
<h2><특수문자></h2>
<p>4 > x </p>
<p><p>태그는 단락을 작성하는 태그입니다.</p>
<p><h1>태그는 제목 태그이다.</p>
<p>여기와 저기 사이에 공백이 많아요.</p>
<p>©ICIA ®2019</p>
</body>
* 삽입하고 하고자 하는 동영상과 오디오 파일이
위치를 파악하고 넣어야 한다.
상대경로/ 절대경로
'공부기록 > HTTP' 카테고리의 다른 글
| 2월 16일 (1) HTML - 공간 분할 (0) | 2023.02.16 |
|---|---|
| 2월 15일 (2) HTML - 하이퍼 링크 (0) | 2023.02.15 |
| 2월 14일 (2) HTML - table (0) | 2023.02.14 |
| 2월 14일 (1) HTML - 목록 (0) | 2023.02.14 |
| 2월 13일 (2) HTML - 웹 문서 만들기 (0) | 2023.02.13 |
