2022 01 06 html <a>,<img>,<map>,목록태그,<table>

<a>태그

a : 이동용태그, Entity에 있는 것을 클릭시 목적지로 이동

herf : 목적지

target : 어디에 띄울지 self가 기본값 ,_blank는 새탭에서 띄운다는 뜻

<a href = "https:www.google.com" target = "_blank">구글</a>

 

경로

절대경로 : 절대적위치

  ex) C:\ ~ \ ~\a.png

  ex) http://~/a.png

 

상대경로 : 현재위치를 기준으로 경로 제공

  ./ 또는 아무것도 없을 때 : 현재 위치

  ../ : 상위폴더

 

예시 

- a.html - 여기서 a.png를 찾아갈 때 : ./img/a.png

- b.html에서 a.png를 찾아갈 때 : ../img/a.png

웹 서비스를 만들 때 상대경로를 더 많이 씀

 

 

<img>태그

  - img : 이미지출력

  - alt : 설명 - 정확한 용도는 TTS( 시각장애인을 위한 )출력용

  - src : 위치 정보

  a 태그를 달 수도 있음

<a href = "https://apple.com"> 
	<img alt = "고양이" src ="cat.png"/>
</a>

 

<map>태그 하나의 이미지안에 링크를 여러개 하고싶을 때 사용

  - map : 클릭 가능한 영역을 만듬

  - usemap : 해시태그로 시작. 이미지와 맵의 관계 생성

  - area : 영역지정

  - shape : 형태 rect circle poly  default 선택가능

  - coords : 좌표값 입력

  - href : 연결하고싶은 주소

  - alt 설명

  - target을 넣어 새페이지에서 열릴지 현재페이지에 열릴지 선택가능 

 

 

usemap과 name으로 해당 맵코드와 이미지가 연관성이 있다는 것을 명시적으로 알 수있다.

rect 한 대각선의 꼭지점 좌표값들을 각각 입력해주면 됨

circle은 중앙좌표값과 반지름을 coords에 입력

 

image-map.net 사용하면 편하게 좌표값 추출 가능

 

<ul> <ol> <li> 태그

ul : 순서없는 목록을 지정하겠다

ol : 순서가 있는 목록을 지정하겠다

li : 목록요소

<br/>
<ul>
	<li>가나다</li>
	<li>라마바</li>

</ul>
<ol>
	<li>가나다</li>
	<li>라마바</li>
</ol>

 

<dl> <dt> <dd> 

dl : 목록지정

dt : 제목

dd : 부제 또는 설명

 

<dl>
	<dt>ABC<dt/>
	<dd>def</dd>
</dl>

<table> : 표

<thead> : 헤더
<tbody> : 내용 만약 thead,tfoot이 없는 경우 생략 가능
<tfoot> : 끝영역
<tr>(table row) : row영역
<td>(table data) : column영역, 여러 row중 td가 가장 많은 개수에 맞추어 크기지정
<th> : colum 헤더영억, 굵게, 가운데정렬

border : 테두리두께

cellspacing : 셀 간격 셀간격이 존재하면 아래 사진과 같이 테이블안에 테이블이 생겨보임

colgroup : td나 th의 간격을 통째로 지정 width만 가능 row는 불가능

rowspan : 해당 내용이 지정된 개수만큼 세로로 영역을 확보, 확보된 다음 로우는 뒤로 밀림

colspan : 해당 내용이 지정된 개수만큼 가로로 영역을 확보, 확보된 다음 컬럼은 아래로 밀림

<table border = "1" cellspacing = "0">
	<colgroup>
		<col width = "100"/>
		<col width = "200"/>
		<col width = "50"/>
	</colgroup>
	<thead>
		<tr>
			<th>1번칸</th>
			<th>2번칸</th>
			<th>3번칸</th>
		</tr>
	</thead>
	
	<tbody>
	<!-- rowspan : 해당내용이 지정된 개수만큼 세로로 영역을 확보 -->
		<tr height = "50">
			<!-- tr은 한줄을 나타내기에 높이지정 -->
			<td rowspan = "2">1-1</td>	  <!-- td는 한칸을 나타내서 너비 -->
			<td colspan = "2">1-2</td>
			
		</tr>
		<tr>
			<td>2-2</td><!-- 같은위치의 td들 중 가장 큰 것의 크기에 맞춤 -->
			<td>2-3</td>
		</tr>
	</tbody>

</table>