오랜만에 HTML강좌를 발행하네요. 오늘 HTML강좌는 조금 흥미가 있을 거란 생각이 듭니다. 블로그를 운영하는데 있어서 꼭 필요한 태그이기때문이죠. 영어도 읽기 힘들고 귀찮은데, 영어가 아닌 이상한 단어들만 나열된 제 글을 보면 정말 지루하기 짝이 없거든요.
오늘은 이미지에 관련된 이미지태그에 대해서 알아 보겠습니다. 글을 쓰면서 참고 이미지를 올리거나, 광고 스크립트를 사용하지요? 광고와 아주 밀접한 관련이 있습니다. 이 부분만 확실히 숙지하시면 내 블로그 배너도 만들어 달 수도 있습니다. 또 스킨제작때도 꼭 알아두어야 할 기본중의 기본 태그입니다. 중요도 5점입니다. 꼭 익히세요!
※ 지난 시간 복습 하기:
˚순서를 나타내는 태그들의 종류: <OL>, <UL>, <DL>
˚<ol></ol> : 순서대로 나열하는 태그 ˚<ul></ul> : 순서없이 나열만 하는 태그 속성: type="속성값" (disc, circle, square로 표기)
˚<li></li> : <ol>,<ul>태그와 함께 묶어서 쓰이는 목록태그 속성: type="속성값" (A, a, ⅰ, Ⅰ,숫자로 표기)
˚<dl></dl> : 사전형태로 나열하는 태그 <dt></dt>: <dl>태그에서 제목에 관한 부분 <dd></dd> :<dl>태그에서 설명에 관한 부분
오늘 배울 내용은 이미지태그 그리고 그에 관련된 속성들에 대해서 알아 보도록 하겠습니다. 이 부분 강좌는 필독 하시고 꼭 전부 숙지 하시기 바랍니다.(정말 정말 부탁드리는 거에요.)
| ● HTML,이미지 태그란? | |
이미지를 나타내는 태그는 img( image의 약자)로 표기 됩니다. 이미지는 텍스트처럼 글자로 표현되지 않기때문에 "이것은 이미지다"라고 정의를 해주어야 하는데요. 그것이 바로 이미지태그인 "img"로 정의내릴수 있습니다.
그렇다면 이 이미지를 정의할때 이미지를 표시하는 원칙이 있어야 겠지요? 이미지를 불러오거나 삽입할때 "이것은 ○○이미지다"라고 명령을 해주는데 <img src="파일경로 or URL">로 표시합니다.
이미지 경로에 관한 공식
※ 파일 경로(URL)에 대한 부가 설명 URL은 파일이 들어 있는 경로(주소)를 나타낸다는 뜻입니다.
웹에 게시되었을 경우는 웹에서의 이미지 주소이고, 파일로 표기 할때는 파일 경로를 나타냅니다.
※ 경로 표시 방법 문서가 있는 폴더를 기준으로 표기합니다.
- 같은 폴더에 이미지가 있을때: 파일명을 그대로 써준다(예: 이미지.gif)
- 문서 아래에 이미지가 있을때: 폴더 이름/파일명
- 문서 위에 이미지가 들어 있을때: ../파일명
이미지 경로 표시 방법
| ● HTML, 이미지태그의 속성 | |
이미지를 표시할때도 글자처럼 속성을 정할 수 있습니다. 이전에 배웠던 여러가지 속성에 관한 태그들을 적용 시킬 수 있습니다. 그 외에 추가 속성들이 있습니다.(이미 배운것이니 간단하게 짚고 갈께요.)
※ 이전 시간에 배운 태그 속성들
˚ 위치를 나타내는 태그 : right(오른쪽), center(중앙), left(왼쪽)
˚ 위치를 지정하는 태그 : align="위치"
˚ 크기를 나타내는 태그: width="넓이"(가로 길이) height="높이"(세로길이)
여기서 잠깐 ! :
이미지 정렬태그의 속성값은 left(좌),right(우),middle(가운데),top(위),bottom(아래) 이렇게 5종류 세로의 위치 정렬값을 지정 할 수 있습니다. center가 없어지고, 다른 세가지의 속성값이 나옵니다.
▶ alt="내용(택스트)" : 이미지위에 마우스를 올렸을때 표시되는 문구를 뜻합니다.(여기서는 이해하기 쉽게 말풍선이라고 해두죠.) 이미지위에 마우스를 올려 보세요.
아래의 이미지코드는 다음과 같습니다. 두껍게 표시된 부분의 내용이 마우스를 올렸을때 그대로 나타납니다.
<img src="이미지 URL" alt="alt속성에 대한 설명입니다. 마우스를 올리면 이 글이 보일 거에요. 라스베가스 밤 풍경이군요. 엄마가 미국여행때 라스베가스에서 찍은 호텔 야경인데, 너무 멋있죠?">
alt 속성에 대한 설명_마우스를 올려 보세요.
● 좌우, 상하 여백을 표시 할때 : 좌우의 여백을 줄때: hspace="픽셀값" 상하의 여백을 줄때: vapace="픽셀값" 여기서 align과 다소 혼동되실 거예요. align은 문서를 일괄적으로 양분해서 나누게 됩니다. 위의 hspace나 vspace는 각각의 수치만큼 이동해서 이미지를 배치하는 태그입니다.
예) 문서에서 이미지를 50px만큼 여백을 주고 보여주기 이 경우에 hspace="50px"로 표기하고, 이미지는 50px만큼 떨어져서 위치 합니다. vspace는 hspace처럼 위에서 부터 여백을 지정해 주는 태그입니다. 이해가 잘 안되시죠? 제가 이미지를 예로 올려서 설명 드릴께요.
※ align으로 좌,우로 정렬 할때
아래 코드를 실행해 보겠습니다.(메모장에 직접 작성하면서 익히세요) -
이미지 캡쳐를 위해 테이블로 넓이를 조절 했습니다.
<html>
<head>
<title>이미지 정렬</title>
</head>
<body>
<table width="600">
<tr>
<td width="100%">
<p><img src="이미지경로" width="300" height="225" align="left"></p>
<p>왼쪽 정렬</p>
</td>
</tr>
<tr>
<td width="100%">
<p><img src="이미지경로" width="300" height="225" align="right"></p>
<p align="right">오른쪽 정렬</p>
</td>
</tr>
</table>
</body>
</html>
이미지를 align으로 정렬을 할때는 텍스트가 빈 공간에 표시됩니다.
img 태그_align으로 정렬하기
※ 여백을 지정 할때
아래 코드를 실행해 보겠습니다.(메모장에 직접 작성하면서 익히세요)
<html>
<head>
<title>이미지 여백 주기</title>
</head>
<body>
<p><IMG src="이미지경로" width=300 height=225></p>
<p><IMG src="이미지경로" width=300 height=225 hspace="50"></p>
<p><IMG src="이미지경로" width=300 height=225 vspace="50"></p>
<P align=right>100px만큼 상하 여백주기</P>
</body>
</html>
실행화면
오늘은 이미지 태그에 대해서 알아봤습니다. 새롭게 한 주가 또 시작 되었죠? 힘찬 한주 되시고, 여러번 반복하셔서 이 태그는 꼭 익히시길 바래요. html강좌는 알라딘 창작블로그 "웹디자인과 블로그팁"에 연재중입니다. 제 강좌가 맘에 드셨다면 강의로라 생각하시고 추천 듬뿍 주세요. 그럼 다음 시간에 뵈어요~꾸벅z(_._)z
'Design Tutorial > HTML/CSS' 카테고리의 다른 글
| HTML, 이미지(img)태그에 대해서 알아보자. (22) | 2010/01/18 |
|---|---|
| HTML, 목록(리스트) 태그에 대해 알아보자. (60) | 2009/12/18 |
| HTML, 문서의 기본 구조 복습과 테스트 (24) | 2009/12/12 |
| HTML, 문서 단락 태그에 대해 배워보자. (34) | 2009/12/01 |
| HTML, 글자에 관한 태그_font의 기본속성 알기 (10) | 2009/11/24 |
| HTML문서의 제목과 관련한 태그를 배우자. (26) | 2009/11/22 |
posted by 예스비™
