티스토리 뷰

나는 오늘도 공부한다/HTML&CSS

HTML 이미지 띄우기

realMarketing 2014. 9. 13. 21:32

오늘 소개할 내용은 HTML를 활용한 이미지 띄우기 이다. 본론부터 바로 말하자면 이미지 태그는 다음과 같다. 

일반적으로 HTML은 항상 시작과 끝이 있다. 예를들어 <head>로 시작한 태그는 </head>로 닫아주는 것이 일반적이다. 하지만 오늘 소개하는 이미지 태그의 경우는 '단독태그'이므로 </head>와 같이 끝을 가지고 있지 않다. 하지만 맨 마지막에 /처리를 해줌으로써 태그를 마무리한다.


<img src = "이미지의 주소" alt = "이미지의 설명"/>

src 명령어의 경우는 이미지의 주소를 입력하여 준다. 일반적으로 파일의 위치를 태그걸어 주어도 되고, 이미지의 URL주소를 입력하여 주어도 된다.(단, URL주소가 아닌 파일의 위치를 태그걸어줄 경우는 경로를 정확히 입력하여 주어야 한다.) alt명령어의 경우는 이미지에 대한 설명을 표시하여 주는데 생략하는 경우도 많다.

또한 이미지 태그에 직접적으로 가로 세로 그리를 적용시켜줄 수 있다.

가로의 길이는 width = "숫자(단위는 픽셀 또는 %)"

세로의 길이는 height = "숫자(단위는 픽셀 또는 %)"를 입력하여주면 된다. 둘 줄 하나만 입력하여 주었을 경우에는 알아서 비율을 맞추어 출력하여준다. 

가로, 세로의 비율을 둘다 입력해주는 방법도 좋지만, 둘다 입력할 경우 이미지가 깨지는 경우가 많아 한쪽만 입력해 주는 경우가 많다. 또한 픽셀단위가 아닌 %로 입력을 할 경우 비율에 따라 크기를 조정할 수 있다.

이미지 태그의 경우는 이미지를 출력하는 경우에도 많이 사용하지만, 하이퍼링크 태그와 함께 사용하는 경우가 많다. 그래서 해당 이미지를 클릭할 경우 특정한 사이트로 이동하는 경우가 이 경우이다.

비슷한 예를 들자면 현재 블로그에 많이 게재하고 있는 애드센스 광고또한 마찬가지 이다. 해당 이미지를 출력하고 클릭할경우 특정한 사이트로 하이퍼링크가 걸려 있는 원리이다.

이미지에 하이퍼링크를 거는 것은 매우 간단하다. 앞서 설명한 하이퍼링크 태그 안에 이미지 태그를 삽입하여 주면된다.

<a href = "하이퍼링크 주소"><img src = "이미지의 주소" alt = "이미지의 설명"/></a>

이런식으로 구현하여 주면된다. 아래의 구글 이미지를 클릭하게 되면 구글 홈페이지로 이동하게 된다.

Google

기타 궁금한 점이 있으면 언제든지 물어봐주세요^^

저작자표시

'나는 오늘도 공부한다 > HTML&CSS' 카테고리의 다른 글

메타태그(Meta Tag)와 메타데이터(Meta Data)  (0) 2016.10.26
즐겨찾기/주소창 아이콘 적용하기(파비콘 적용하기)  (0) 2016.04.20
HTML & CSS 메뉴만들기  (7) 2014.09.12
HTML 리스트 만들기 & 하이퍼링크  (0) 2014.06.22
HTML(H태그)+스타일태그  (0) 2014.06.22
공유하기 링크
댓글