ㅁ 표 관련 태그
- table, thead, tbody, tfoot, tr, td, th
- 방대한 자료들을 정리할 때 주로 사용
- 행과 열로 구성되어 있고 행과 열이 만나는 지점을 "셀"이라고 표현한다.
ㅁ 태그 종류
(1) <table>
- 표를 생성해주는 태그
(2) <tr>
- 표 내의 한 행을 표현해주는 태그
(3) <th>
- 표 내의 제목 셀을 표현해주는 태그 (글자 가운데정렬, 굵게 표현)
(4) <td>
- 표 내의 일반 셀을 표현해주는 태그
ㅁ 기본 형식
<table border="테두리두께">
<tr>
<th width="셀의너비" height="셀의높이">문구</th>
<th>문구</th>
</tr>
<tr>
<td>문구</td>
<td>문구</td>
</tr>
</table>
- 참고로 테두리 두께를 주지 않으면 테두리가 보여지지 않음.
- 셀마다 가로길이 세로길이를 지정할 수 있다.
크기를 지정하지 않으면 작성한 문구에 맞춰서 가로세로길이가 자동으로 잡힌다.
- 자동으로 셀의 가로 길이가 늘어난다.
- caption태그는 table 태그 안에 둬야 가운데 정렬이 된다.
- <figure>와 <figcaption> 태그는 HTML5에서 추가된 요소로, 주로 이미지, 그래픽, 차트, 다이어그램 등과 함께 설명을 제공하는 데 사용됩니다.
ㅁ 셀 병합
- 셀 태그(th, td) 내의 속성을 이용해서 병합 가능
[봐야함]
- 작성 예시
<td colspan="2"></td> : 좌우 2개의 셀을 병합
<td rowspan="2"></td> : 상하 2개의 셀을 병합
- colspan="3"인 셀은 그 자체로 3개의 열을 뜻함.
- rowspan="2"이면서 colspan="2"인 셀은 그 자체로 2개의 행과 2개의 열(총 4개의 셀)을 뜻함.
ㅁ 테이블 내에 구조 나누기
(1) thead
- 머리부, 주로 제목 행을 표현
(2) tbody
- 몸통부, 주로 내용 행을 표현
(3) tfoot
- 바닥부, 주로 내용들을 가지고 [봐야함]
ㅁ CSS 맛보기
- 태그를 이용해서 요소를 선택
- 3개의 tr요소를 따로따로 다 선택하기엔 번거로운데 하나의 tbody로 묶여있어서 편하다.
- 그런데 이 html 파일에 두 개의 테이블이 있을 경우, tbody는 표를 만들 때 필수라서 내가 만들지 않아도 만들어져 있다.
그래서 두번째 테이블에만 style을 지정하려해도 모든 테이블에 다 지정이 된다.
- 두번째 테이블의 tbody에만 적용하고싶으면 그 tbody태그에 고유한 id를 부여해주면 된다.
- id 태그는 어떤 태그든 다 작성 가능하다.
내가 특정 요소만을 선택하고 싶을 때 부여하는 요소이다.
05. 멀티미디어 관련 태그
ㅁ 멀티미디어는 이미지, 오디오, 비디오를 뜻한다.
ㅁ 멀티미디어 경로 제시
(1) 절대 경로
- 파일이 위치한 전체 경로
- C:\workspaces\04_front-workspace\assets\assets\image\404.jpg
(2) 상대 경로
C:
ㄴ workspaces : 상위/상위 디렉토리( ../.. )
ㄴ 04_front-worspace : 상위 디렉토리( .. )
ㄴ assets : 정적 자원 디렉토리 (../assets)
ㄴ audio : 오디오 디렉토리 (../assets/audio)
ㄴ image : 이미지 디렉토리 (../assets/image)
ㄴ video : 비디오 디렉토리 (../assets/video)
ㄴ 01_html : 현재 디렉토리( . )
- 현재 디렉토리는 점 한 개
- 상위 디렉토리는 점 두 개
- 상위의 상위 디렉토리는 점 두 개하고 슬래시하고 점 두 개
- 현재 디렉토리에서 assets폴더를 가리키고 싶다면
상위디렉토리로 한번 가고(점 두 개) assets 간다.
- 폴더 안에 들어갈 때는 슬래시
- 이렇게 경로를 작성하는 것을 상대경로 방식이라 한다.
- 항상 상대경로 쓴다.
※ src="./image.jpg"와 src="image.jpg"는 사실상 같은 의미입니다.
두 경로 모두 현재 HTML 파일이 위치한 디렉터리를 기준으로 이미지를 참조합니다.
ㅁ 이미지 태그 img
- 인라인 요소
- 형식
<img src="" alt="" width="" height="">
- 주요 속성
src : 이미지 파일의 경로
alt : 이미지를 찾을 수 없을 경우 대체 텍스트 문구. 스크린리더에 읽혀질 문구.
width : 이미지 표현 너비 px(기본값) | %
height : 이미지 표현 높이 px(기본값) | %
- 가로세로 길이를 지정하지 않으면 원본 파일의 길이로 표시된다.
- width와 height 중 하나만 작성해도 나머지도 비율에 맞춰 자동으로 조절된다.
- 단위를 표현하지 않으면 픽셀(px)이다. %로도 표현 가능하다.
- 절대 경로는 이미지가 안 뜸.
웹 브라우저는 로컬 파일 시스템의 경로를 직접 접근할 수 없습니다.
이는 보안상의 이유로 웹 페이지가 사용자의 파일 시스템에 직접 접근하는 것을 방지하기 때문입니다.
ㅁ 오디오 태그 audio
- 인라인 요소
- 형식
<audio controls autoplay loop muted>
<source type="" src="">
브라우저가 audio 태그를 지원하지 않을 경우 대체 텍스트 문구
</audio>
- 주요 속성
src : 오디오 파일 경로
type : 오디오 파일의 content-type (MIME type이라고도 한다)
( audio/wav, audio/mp3, audio/agg // audio 파일에 대한 타입이다.)
autoplay : 자동 재생 여부
loop : 반복 재생 여부
muted : 음소거 여부
controls : 오디오 컨트롤 패널(재생, 중지, 소리조절 등) 노출 여부
ㅁ 비디오 태그 video
- 인라인 요소
- 형식
<video controls autoplay loop muted width="" height="" poster="">
<source type="" src="">
</video>
- 주요 속성
src : 비디오 파일 경로
type : 비디오 파일의 content-type (MIME type이라고도 한다)
( video/mp4, video/webm, video/ogg // video 파일에 대한 타입이다.)
autoplay : 자동 재생 여부
loop : 반복 재생 여부
muted : 음소거 여부
controls : 비디오 컨트롤 패널(재생, 중지, 소리조절 등) 노출 여부
width, hegiht : 비디오 너비, 높이
poster : 썸네일 이미지 파일 경로
※ 유튜브 영상 올리기
- 되는 영상이 있고 안되는 영상이 있다. 막아놨으면 안 됨.
- 영상 우클릭 소스코드 복사.
- 참고로 iframe도 인라인 요소.
ㅁ 링크를 만드는 태그 a
- 인라인 요소
- 클릭시 다른 곳으로 이동할 수 있는 수단 중
- 형식
<a href="" target="">노출시킬내용</a>
어디로 이동시킬지 href속성으로.
href에 #을 쓰면 아무 곳으로도 이동하지 않음.
- 주요 속성
href : 링크 클릭시 이동할 경로를 작성(파일, url, 등)
target : 어느 창에서 이동할 것인지 작성
( _self : 현재 창에서(기본값), _blanck : 새 창에서 )
ㅁ 예제1
ㅁ 예제2
- 무의미한 텍스트가 필요할 때 한글 입숨처럼 무의미한 텍스트를 발생시켜주는 사이트가 있다.
- 맨 위로 올라가고 싶다면 제일 위에 있는 어떤 요소에 id 부여하기. 그리고 href="#id"
- 링크 클릭하면 그곳으로 이동된다.
'03. 웹 표준 기술 > HTML' 카테고리의 다른 글
| 07. 폼 관련 태그 (0) | 2024.08.05 |
|---|---|
| HTML 실습문제 (0) | 2024.08.02 |
| 1. HTML5 - (1) 웹 통신 기초, HTML 개요, 개발 환경 설정 (0) | 2024.08.02 |
