HTML를 사용하여 웹페이지에 링크와 이미지를 삽입할 수 있습니다. 링크는 다른 웹페이지로 이동하거나 특정 부분으로 스크롤 할 수 있는 텍스트 또는 이미지입니다. 이러한 링크는 태그를 사용하여 작성됩니다. 이미지는 웹페이지에 그래픽 요소를 추가하는 데 사용됩니다.태그를 사용하여 이미지를 삽입할 수 있으며, 이미지의 경로를 지정하여 원하는 이미지를 표시할 수 있습니다. 또한, HTML을 통해 링크와 이미지에 대한 속성을 추가할 수 있으며, 이를 통해 툴팁이나 이미지 크기 조정 등의 기능을 설정할 수 있습니다. HTML을 사용하여 웹페이지에 링크와 이미지를 삽입하는 방법.
- a태그 (HTML에서 내부나 외부 링크를 생성합니다. a태그 대상 경로를 의미하는 href 속성 필수사용, 그외 target, title속성 선택 사용)
- img태그 (HTML에서 이미지 객체를 삽입하고 싶을 떄 사용, img태그는 src속성과 alt속성으로 구성)
- 이미지 링크 (a태그 안에는 텍스트 뿐 아니라 여러 요소가 올 수 있음. 그중 img태그를 a태그 안에 사용 하면 이미지 클릭 시 특정 링크로 이동하게 할 수 있음)
<예제코드> – a태그
<!--형식 <a href="대상 경로" target="링크 연결 방식" title="링크 설명"></a> -->
<!--target속성 a태그로 링크생성시 연결되는 방식지정 속성값으로 _blank,_parent,_self,_top을 사용할 수 있지만,
새창으로 열리는 방식인 _blank방식 말곤 사용 안함-->
<!--title속성 링크를 설명할 수 있는 텍스트를 작성, a태그 콘텐츠만으로 표현하지 못한 설명을 적으면 됨.-->
<a href="#" target="_blank" title="#링크로 이동">#링크로 이동</a>
<예제코드> – img태그
<!--형식 <img src="이미지 경로" alt="이미지 설명" -->
<!--src속성 삽입하려는 이미지의 경로를 입력하는 속성 HTML파일의 위치가 기준 ./(현재폴더) ../(상위폴더)-->
<img src = "이미지 경로">
<!-- alt속성 삽입한 이미지 객체를 설명할 수 있는 텍스트 -->
<img src = "이미지 경로" alt = "코드스토리 로고">
<예제코드> – img태그, a태그 응용
<!-- <a href = "대상경로"> <img src = "이미지 경로" alt = "대체 텍스트"> </a>
<a href = "https://kgo-lifelogs.com/" target = "_blank">
<img src = "이미지 경로" alt = "코드스토리 로고">
</a>