/*
웹페이지는 이미지의 천국이죠.
이번장에서는 웹페이지에 이미지를 첨가하는 코드를 보겠습니다.
<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 |