HTML 이미지 삽입 및 링크 걸기

HTML 이미지 삽입 및 링크 걸기

이번엔 HTML에서 많이 사용하는 태그 중 주석과 이미지 삽입 그리고 링크를 걸어주는 태그입니다.

링크를 걸고싶은 부분의 앞뒤에 <a href = "링크"> 내용 </a>이렇게 넣어주면, 내용 부분에 링크가 걸리게 됩니다.

이미지는 <img src ="이미지 경로">를 적어 주면 삽입이 됩니다.

주석은 <!-- 내용 --> 으로 적어주면, 내용은 주석처리가 되어 화면에 표시 되지 않습니다.

간단한 예제를 통해 보자면,

우선 이미지를 삽입했고, 저는 HTML의 저장 경로와 이미지 파일의 위치가 동일하여 따로 경로 설정을 해주지 않았습니다.

이미지 파일은 위 와같은 '은하수골목'과 확장자는 '.png'입니다.

이미지는 너무 커서 제가 임의로 작게 만들어 주었습니다.

나중에 Style시트에서도 줄이는 것이 가능하지만, 일부는 효과는 바로 적용이 가능합니다.

바로 옆에 초록색으로 주석처리된 것도 있습니다.

원하시는 영역을 설정합니다.

그리고, 마지막 <a>태그는 텍스트에 효과를 줄 예정이니, <p>태그 안에 줘 봅니다.

원하시면 다른 장소에서 주는 것도 가능합니다.:D

결과 값입니다.

이미지는 제가 임의로 준 가로 사이즈가 기준이되어 자동으로 사이즈가 줄어 들어 있습니다.

그리고, 아까 주석 처리한 부분은 화면에 표시되지 않습니다.:D

마지막으로 <a>태그를 준 텍스트엔 밑줄이 그어져 있고, 색이 기본텍스트 컬러와는 조금 색상이 달라 보입니다.

나중에 style 시트도 활용을 하게 되면, 밑줄도 없앨 수 있고, 색상도 변경가능합니다.

클릭을 해보면, 지정해 놓은 사이트로 이동하게 됩니다.

학원에서 계속 새로운 걸 배우고 있다보니, HTML이 벌써 예전에 배웠던거 같습니다.

새로이 복습하고 있는 느낌으로 하나씩 하나씩 배웠던걸 둘러보니 새록새록 기억도 나고,

기본 태그인데도 잊어 버린 태그도 속속들이 있네요.ㅠㅠ

잊어버리고 다시 배우고 하다보면, 

잊어버리지 않는 순간이 오겠지요?:D