문서를 지루하지 않게 해주는 IMG
문서를 연결해주는 A 태그
Img 태그는 문자만 있으면 지루할 수 있는 문서에 다양성을 주며 사진을 입력함으로 문자만으로 설명하기 어려운 부분에 시각적 정보를 출력한다.
A 태그는 링크를 걸어서 다른 문서와의 연결되도록 한다.
#. 기본 사용 방법
<img src="경로" />
.
<a href="url"></a>
두 태그 모두 지정해줄 경로가 필요하다.
src 는 입력할 파일의 경로를,
href 는 이동할 url 을 적는다
img 태그는 닫는 태그가 없다.
01. Image (사진 입력)
<img class="" src="../d드라이브/가마우지/helloworld.jpg" alt="home" />
<img class="" src="../../assets/image/headerlogo.png" alt="logo" />
- src 는 어떤 이미지를 불러올지 경로를 적을 수 있다.
- ”../” 로 상위 폴더나 파일을 선택할 수 있고 “/” 로 하위 폴더나 파일을 선택할 수 있다.
- alt 는 불러올 이미지가 어떤 이유로 불러지지 않는 경우에 대체되는 요소이다.
- 집 이미지를 입력하였으나 어떤 이유로 출력이 불가할 시 <alt=”home”> 입력 시 사진 대신에 home 이라는 문자가 출력된다.
📍출력물
위의 입력문을 그대로 출력했을 때 사진파일이 존재하지 않기 때문에 alt=”home” 의 내용대로 “home” 이 출력되었다경로에 사진파일이 있기 때문에 제대로 출력이된 것을 볼 수 있다.
02. A (링크 태그)
<a class="" href="www.digitopia01.github.io">Digitopia01's Blog</a>
- 여닫는 태그가 한쌍이므로 그 사이에 문자 혹은 이미지를 입력하여 그것을 클릭 시 특정 링크로 이동하게 된다.
- [href]는 요소를 클릭시 이동할 주소를 적으면 된다.
📍출력물
Digitopia01’s Blog
위 문자를 클릭하면 블로그 메인으로 들어가진다.
⭐️지난 포스팅에 이어서 html 문서에 정보를 작성할 때 이미지를 삽입하고 문자 혹은 사진 등에 하이퍼링크를 거는 태그들에 대해서 알아보았습니다.
