이미지
이번에는 이미지를 삽입하는 태그에 대해서 살펴보도록 하겠다.
이번에 배우는 태그들 또한 당연히 <body> 태그에서만 사용할 수 있다.
<img>
웹 문서에 이미지를 삽입할 때 <img> 태그를 사용한다.
<img>는 속성 없이 단독으로 사용할 수 없는 태그이다.
우리가 어떤 이미지를 불러오는지 컴퓨터에게 따로 알려주지 않았기 때문이다.
그러므로 이미지를 웹 문서에 넣기 위해선 src 속성을 사용하여 정확한 파일 경로를 지정해야 한다.
<img src="경로">
<img src="dlacked.jpg">
<img src="files/dlacked.jpg"><img>의 다양한 태그 속성
- src 속성: 이미지의 경로를 지정할 때 사용하는 속성이다.
- alt 속성: 이미지를 설명하는 텍스트를 설정할 때 사용하는 속성이다. 이미지를 제대로 표시할 수 없는 상황에서 이미지 자리에 alt 속성이 쓴 내용이 표시되어 어떤 이미지가 사용되었는지 짐작할 수 있다.
- width, height 속성: 이미지의 크기를 조정할 때 사용하는 속성이다. 각각 너비, 높이를 지정한다.
<img src="경로" alt="설명" width="너비" height="높이"><a>
링크를 만들 때 사용하는 태그이다.
<a> 태그 역시 <img>와 비슷하게 속성 없이 단독으로 사용할 수 없는 태그이다.
우리가 어떤 링크를 불러올 것인지 컴퓨터에게 따로 알려주지 않았기 때문이다.
그러므로 링크를 웹 문서에 넣기 위해선 href 속성을 사용하여 정확한 파일 경로를 지정해야 한다.
<a href="링크 주소"> 텍스트 </a>
<a href="링크 주소"> <img src="경로"> </a><a>의 다양한 태그 속성
- href 속성: 문서나 사이트의 주소를 입력한다.
- target 속성: 링크한 내용이 표시될 위치를 지정한다.
- _blank 속성: 링크 내용이 새 창이나 새 탭에서 열리도록 한다.
- _self 속성: target 속성의 기본 값으로 링크가 있는 화면에서 열리도록 한다.
- download 속성: 링크한 내용을 보여주는 것이 아니라 다운로드를 한다.
한 페이지 안에서 점프하는 앵커 만들기
지금까지 특정 요소를 클릭해 다른 페이지로 이동하는 링크를 살펴보았다.
그런데 다른 페이지 말고 한 페이지 내에서도 링크를 만들 수 있다.
앵커라고 하는 이 기능은 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와준다.
<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>
<a href="#앵커 이름"> 텍스트 또는 이미지 </a>앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만들고 각각 다른 이름을 지정해야 한다. 이렇게 붙여 놓은 앵커 이름들은 마치 링크를 만들 때처럼 <a> 태그를 사용해 링크한다. 다만 앵커 이름에 #을 붙여 앵커를 표시한다.
@dlacked