글
IMG 태그, 링크, 경계선
HTML
2011. 7. 8. 18:38
안녕하세요?
저번에는 IMG소스의 기능에 대해 알아봤습니다. 이번에도 IMG에 대해 알아보겠습니다. 오늘은 이미지파일을 링크로 연결하는 것을 하도록 하겠습니다. 쉽게 말해서 네이버 초기화면에 가보면 초록색으로 NAVER라고 적혀있지요. 이렇게요.
예제를 보시죠.
<html>
<head><title>IMG링크걸기</title>
</head>
<body>
<a href="http://www.naver.com"><img src="naver.gif"></a>
</body>
</html>
여기서 <a href="http://www.naver.com"><img src="naver.gif"></a> 이것이 가장 중요한 키포인트가 되겠습니다. 뜻은 a href로 링크를 겁니다. http://www.naver.com 으로요. 근데 이전에는 문자로 했죠. <a href="www.naver.com">네이버</a>이렇게요. 근데 이제는 그림으로 하는 겁니다. 그래서 그림태그인 <img>태그를 넣습니다. 두개가 합쳐지는 거죠. src에는 그림이 있는 곳의 경로를 적어주셔야 합니다. 지금은 같은 폴더에 있으니깐 그냥 이름만 적었는데 만약에 c:\pic에 있다면 src="c:\pic\naver.gif"이렇게 적어주셔야 합니다. 아셨죠? 그럼 실행하면 어떻게 될까요? 먼저 위의 그림처럼 그림이 하나 뜨겠죠. 그런다음 그 그림을 클릭하면 네이버로 들어가게 됩니다. 아래처럼요.
이렇게 네이버라는 그림이 뜨지요?
클릭하면 아래와 같이 네이버 홈피로 이동합니다.
자 이제까지 잘 이해하셨죠? 그럼 다음으로 넘어갑니다. 이번에는 그림에 테두리를 설정하는건데요. 위의 네이버라는 글자가에 붉은색 테두리가 있지요? 이런식으로 테두리의 두깨를 조절할수 있습니다. BORDER의 속성을 주면 되는데요. border의 뜻은 경계선이라는 뜻이지요. 그래서 이미지(그림)의 경계선을 0으로 주면 경계선이 없고 12로하면 1픽셀이 되겠죠. 10으로하면 10픽셀이 될것이고...그럼 이것도 다음 예제를 통해서 알아보도록 하겠습니다.
<html>
<head><title>IMG링크걸기</title>
</head>
<body>
<img src="char1.jpg" border=0> 경계선이 없는 그림 BORDER=0 <p>
<img src="char1.jpg" border=1> 경계선이 1인 그림 BORDER=1 <p>
<img src="char1.jpg" border=5> 경계선이 5인 그림 BORDER=5 <p>
<img src="char1.jpg" border=10> 경계선이 10인 그림 BORDER=10 <p>
</body>
</html>
위에서 img태그의 border속성만 보시면 되겠습니다. 아래 결과를 보면 금방 이해하실겁니다.
'HTML' 카테고리의 다른 글
| 글자색바꾸기, <BODY TEXT>, <FONT COLOR> (0) | 2011.07.12 |
|---|---|
| 페이지 배경색을 내맘대로 (0) | 2011.07.10 |
| img태그1 (0) | 2011.07.06 |
| marquee태그 움직이는 글자 (1) | 2011.07.04 |
| <a href></a>, 새창으로 문서이동하기 (0) | 2011.07.01 |
