이번에 공부해 볼 내용은 링크와 이미지 태그이다.
* 앵커태그
<h1>Welcome!</h1>
<a href="https://harry99.page.com/" target="_blank">
<p>
Hi! </br>
I'm Harry. </br>
Welcome to my blog. </br>
</p>
</a>
<a href="mailto:harry99@kakao.com">MAIL</a>
- 앵커태그 <a> 는 링크를 삽입하기 위한 태그이다.
- <a> 태그는 속성으로 반드시 href가 주어져야하며 값으로는 4가지가 들어갈 수 있다.
1. 웹 URL
2. 페이지 내 이동 ( #섹션)
3. 메일쓰기 ("mailto : 메일주소")
4. 전화걸기 ("tel : 전화번호")
- target 속성으로 _blank를 삽입하면 새탭에서 열리도록 설정할 수 있다.
따라서 위의 코드는 다음과 같이 표현된다.
* 이미지태그
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="꽃"/>
<img src="./images/keyboard01.jpg" alt="키보드"/>
- 이미지 태그는 <img> 를 사용하며 열고닫음 없이 바로 닫으며 이미지를 보여주는 태그이다.
- 반드시 src속성을 주어야 한다. src는 소스이며 상대경로나 절대경로를 삽입할 수 있다.
※ 절대경로 : 고유한 경로를 의미하며 http로 시작하며, 인터넷에 치더라도 이미지를 볼 수 있다.
※ 상대경로 : 이미지를 삽입할 파일 기준으로 경로를 인식한다. 위의 코드에서는 '.'이 현재 파일을 의미하며 images 폴더로 가서 파일을 찾도록 하였다.
위의 코드는 다음과 같이 표현된다.
참고
이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.
모든 내용과 코드 및 이미지는 직접 재구성하였습니다.
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
이미지 경로 - 절대경로와 상대경로 - HTML 기본 강좌
이미지의 경로를 지정하는 방법은 절대경로와 상대경로가 있습니다. 이 절대경로와 상대경로는 이미지 삽입뿐 아니라 링크를 걸때도 똑같이 적용되는 부분이므로 아주 중요합니다. 1. 절대경로
www.homejjang.com
'Language > HTML' 카테고리의 다른 글
| <HTML 기초> 06. 인풋 · 레이블 (0) | 2020.10.22 |
|---|---|
| <HTML 기초> 05. 태그 : 인용 (0) | 2020.10.20 |
| <HTML 기초> 04. 태그 : 리스트 (0) | 2020.10.17 |
| <HTML 기초> 02. 태그 : 제목 · 문단 · 강조 (0) | 2020.10.15 |
| <HTML 기초> 01. 코드 에디터 환경 설정 (0) | 2020.10.14 |
