Web programing/HTML & CSS

HTML 이미지 삽입 태그

sosal 2014. 7. 26. 11:12
반응형

/*

 * http://sosal.kr/

 * made by so_Sal

 */




웹페이지는 이미지의 천국이죠. 


이번장에서는 웹페이지에 이미지를 첨가하는 코드를 보겠습니다.

<html>
 <head>
  <title>HTML???</title>
 </head>
 <body>
<br><img src="./sky.jpg" alt="김하늘 사진" width="200" height="140">
<br><img src="./sku.jpg" alt="김하늘 사진" width="200" height="140">
 </body>
</html>


<img ~ >가 기본입니다.
src는 source의 약자이고,
여기에 이미지의 주소(URL)을 넣는다면
역시 그 주소에 있는 자원을 가져와
이미지를 출력하게 됩니다.

위 소스는 제 풀더에 있는 그림의 상대경로를 말합니다.
현재 html 창의 위치가 " . " 입니다. /는 디렉토리를 의미합니다.
따라서 상대경로 ./sky.jpg :: html이 위치한
현재( . ) 라는 풀더 ( / ) 에 있는 sky.jpg를 자원으로 하여
width (가로) 200픽셀, height (세로) 140픽셀로 그림을 출력하라
이것을 의미합니다.
그리고 alt="~"는 만약 source의 경로에 자원이 없을때
그때 흔히 말하는 엑빡이 뜨는데
엑빡이 뜰때 들어 갈 말을 의미합니다.
위 예제 그림에서 볼 수 있듯 "김하늘 사진" 이라고 떳네요.
제 풀더 안에는 sku.jpg라는 그림이 없기 떄문입니다.

만약 그림으로 03번에서 배운 하이퍼링크를 응용하고 싶다면
<a> 엘리먼트에 삽입해주면 됩니다.

<a href="http://sosal.tistory.com">
<img src="./sky.jpg" alt="김하늘 사진" width="200" height="140">
</a>

이것을 body 안에 삽입해주면 위와 같은 김하늘 사진이 뜨는데,
그것을 클릭하게 되면 위 경로 (제 블로그)로 가게 되겠죠 ..~!!

'Web programing > HTML & CSS' 카테고리의 다른 글

HTML5 규격 표준 검사기  (0) 2014.12.04
HTML form 태그, input type 종류  (0) 2014.07.27
HTML 하이퍼 텍스트 링크  (0) 2014.07.26
HTML의 기본 구조(2)  (0) 2014.07.26
HTML의 기본 구조  (0) 2014.07.26