/*

 * 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 하이퍼 텍스트 링크  (0) 2014.07.26
HTML의 기본 구조(2)  (0) 2014.07.26
HTML의 기본 구조  (0) 2014.07.26
Posted by sosal sosal

댓글을 달아 주세요