이미지
TAG의 이름만으로도는 정보가 부족할 때가 있기 때문에 source 줄여서 src 사용하다.
eg.
<img src="beer.jpg" width="100">속성은 아무 위치에나 상관없다.
<img width="100% src="coding.jpg">
<img src="(이미지 파일 경로)" alt="(대체 텍스트)" title="(툴팁 텍스트)">
src : 원본파일 경로
> 절대 경로 : 이미지 링크 / 상대경로 : 이미지 파일 내 주소
alt : 대체 텍스트
> 이미지가 안보일 때 대체할 수 있는 텍스트 노출
title: 툴팁
width : 너비 / height : 높이
맵 기능
이미지 맵 생성 사이트
표
<table> : 테이블
<caption> : 표 설명 또는 제목 (선택 사항)
<tr> : 테이블의 행 (table raw)
<td> : 테이블의 데이터 셀 (table data)
<thead> : 테이블의 헤더 부분 / <tbody> 앞
<tbody> : 테이블의 본문 / 본 내용을 담음
<tfoot> : 테이블의 푸터 부분 / <tbody> 뒤
<th> : 열 또는 행의 헤더 / scope 속성으로 row, col 중 선택 (table header)
copspan : 열 병합
rowspan : 행 병합eg
css는 우선 무시하고,,,
<head>
~~~
~~~~
</head>
<body>
<table>
<caption>1에서 9까지의 숫자들</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
css 우선 무시하고 2,,,
<table>
<caption>웹 개발 공부 기록</caption>
<thead>
<tr>
<th scope="col">과목</th>
<th scope="col">월</th>
<th scope="col">화</th>
<th scope="col">수</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML</th>
<td>60분</td>
<td>60분</td>
<td>0분</td>
</tr>
<tr>
<th scope="row">CSS</th>
<td>0분</td>
<td>30분</td>
<td>60분</td>
</tr>
<tr>
<th scope="row">HTML</th>
<td>0분</td>
<td>0분</td>
<td>60분</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">총 시간</th>
<td>60분</td>
<td>90분</td>
<td>120분</td>
</tr>
</tfoot>
</table>
+++ 08.06
링크 이동
<a href="(연결할 주소)" target="(링크를 열 곳 옵션)">
_self : 현재 창 / 기본
_blank : 새 창 / 텍스타나 내부 이미지의 alt 등으로 명시 필요
건너뛰기 링크
<body>
<a href="#content">내용으로 건너뛰기</a>
<header>…</header>
<main id="content"><!-- 여기로 건너뜀 --></main>
</body>
<address></address> 태그 : 주소 및 연락처 정보를 포함
href 값 앞 부분
* mailto - 이메일링크
* tel - 전화번호 연결+++ 08.06
<table>
<tr>
<th>제목</th>
<td>내용>/td>
</tr>
</table>
tr태그는 표에서 행을 생성한다.
th태그와 td태그는 표에서 열을 생성할 때 사용한다.
th태그는 표에서 제목을 나타내는 열을 생성할 때, td 태그는 표에서 일반적인 데이터를 나타내는 열을 생성할 때 사용
rowspan 속성 : 행과 행을 병합
colspan 속성 : 열과 열을 병합
병합된 셀의 개수만큼 다음 행 또는 열은 비워야 함
웹접근성을 향상 시키기 위해, thead, tfoot, tbody 태그를 사용한다. 사용하게 된다면 반드시 thead, tfoot, tbody 순서여야 한다. thead, tfoot 태그는 한 번만 사용가능하고, thead 태그로 그룹화된 행은 th 태그로 열을 생성 해야 한다.
표에서 열을 그룹화할 때는 col 태그와 colgroup 태그를 사용한다. col 태그는 하나의 열을 그룹화, colgroup 태그는 span 속성과 함께 사용해 2개 이상의 열을 그룹화 한다.
순전히 웹 전근성 향상을 목적으로 표를 생성할 때 사용할 수 있는 속성인 scope가 있다.제목을 나타내는 셀의 범위이기 때문에 표에서 제목을 나타내는 th 태그에만 사용할 수 있다.
링크
< a href="대상 경로" target="링크 연결 방식" title="링크 설명"></a>href는 링크 일수도 있고, 내부 문서 경로
target a태그로 링크를 생성할 때 대상이 연결되는 방식. 새창을 여는 _blank를 자주 사용한다고 한다. target 속성은 생략가능
title 속성 또한 생략이 가능하고, 링크를 설명할수 있는 텍스트를 의미한다.
이미지
<img src="이미지 경로" alt="이미지 설명">src : 이미지의 경로를 입력하는 속성
./ 현재 폴더
../ 상위 폴더
a 태그 아네는 텍스트 뿐만 아니라 여러 요소가 올 수 있다. 그중 img 태그를 a 태그 안에 사용하면 이미지를 클릭 했을 때 특정 링크로 이동할수 있고 이를 HTML에서는 이미지 링크라고 한다.
