[Html] img 태그 / gif, jpg, png 차이 / picture 태그 / a 링크 걸기 / target 속성 /

 

 

 

< img 이미지 >

 

- <img src="이미지 경로" alt="대체텍스트(설명문)>

 

① 이미지 경로 - 절대경로

 

- 전체 웹 주소 URL 사용

- ex) "https://www.google.com"

 

 

 

② 이미지 경로 - 상대경로

 

- 현재 html 문서 위치에 대한 상대경로

- ex) "폴더명/사진명.확장자", "../사진명.확장자"

 

- 현재 웹페이지와 사진파일이 같은 폴더에 있을 땐 "사진명.확장자"만 

- / : 최상위 폴더 아래에 있다는 의미

- ../ : 현재 폴더보다 한 단계 위의 폴더를 의미

 

 

③ Web 이미지

 

- *.gif : 256 색상 표현가능, 투명배경 지원, 움짤 가능 / 주로 로고나 버튼, 아이콘 등 단순한 이미지 

- *.jpg : 트루컬러 표현가능 / 실사 느낌의 사진에 적합

- *.png : 트루컬러 표현가능, 투명 배경 지원 / 위의 두가지 형식의 장점을 결합

 

 

④ 이미지 크기 조절

 

- <img src="이미지 경로" width="가로 길이" height= "세로 길이" >

 

 

1. width="300" <br>
 <img src="img/cafe.jpg" alt="cafe" width="300" >

2. height="300" <br>
 <img src="img/cafe.jpg" alt="cafe" height="300" >

3. width="300" height="300" <br>
 <img src="img/cafe.jpg" alt="cafe" width="300" height="300" >

 

 

· 원본에 대해서 언급안한 길이는 자동으로 나머지 길이 맞게 조정해줌

 

 

⑤ picture 태그

 

- 반응형 웹에서의 이미지 지원 태그

https://www.w3schools.com/html/html_images_picture.asp

HTML Picture Element

 

 

 

<  a 링크 걸기 >

 

- < a href="링크 주소" > 웹에 보여줄 문구 </a>

- 링크 주소는 상대경로/절대경로 가능

 

 

① 경로

 

- 상대경로 : 주로 내부 파일일 경우

- 절대경로 : 주로 외부사이트일 경우

 

 

 

② target 속성

 

- target="_blank" : 새로운 탭으로 열어줌

 

 

③ 링크로 보여줄 수 있는 종류

 

- 웹사이트 주소

  · 절대경로 삽입

 

- 웹페이지

  · 파일명과 확장자 삽입

 

- 이미지

  · 이미지명과 확장자 삽입

 

- 동영상

  · 동영상명과 확장자 삽입

  

- 텍스트파일

  · 메모장파일을 삽입하여 웹브라우저로 보여줌

 

<ul>
 	<li>웹사이트 주소 - <a href="https://www.w3schools.com/">웹다이쏘</a></li>
 	<li> 웹페이지 - <a href="test05.htm">test05.htm</a>  <a href="test04.htm">test04.htm</a></li> 
 	<li> 이미지 <a href="pic_trulli.jpg">photo</a></li>
 	<li> <a href="sky.mp4">동영상</a> </li>
 	<li> <a href="text.txt">텍스트파일</a></li>
</ul>

 

- 압축파일은 웹브라우저로 보여줄 수 없기때문에 링크에 삽입하여 클릭하면 자동으로 다운로드됨