오궁 가족들이 쓴 글들을 모아둔 곳입니다.

 로그인

태그 강좌(4) - 그림태그
BOF  2005-01-17 18:34:00, 조회 : 1,642, 추천 : 101

자 이번에는 그림 태그를 한 번 배워 볼까요?

자 이번에는 그림 태그를 한 번 배워 볼까요?
그림 태그는 넘넘 간단합니다.
그림태그 명령어는
<image src="그림주소>입니다.

참 간단하죠?
이 태그 역시 시작과 끝이 따로 있는 것이 아니고 그림이 있는 주소 하나만 적어 넣으면 됩니다.

여러분들이 각 사이트에 돌아다니다 보면 여러가지 맘에 드는 그림들이나 사진들이 있을겁니다(지금 홈페이지 오른쪽 상단에 있는 '필우 로고' 그림 파일 위에 마우스를 갖다대고 한 번 해 보세요).
그럴때 마우스를 자신이 원하는 그림위에 놓고, 마우스 오른버튼을 누르시면 메뉴가 나옵니다.거기서 보면 하단 쪽에
'등록정보'라는 메뉴가 있습니다.
그것을 클릭하시면 주소가 나옵니다. 그러면 그 주소를 마우스로 '드르륵' 긁어서 복사를 하시고 위에 말한거와 같이 명령어 뒤에 그 주소를 붙여넣기를 하면 됩니다.

어때요? 넘 간단하죠?

물론 이것도 몇가지 조건식을 붙힐 수 있습니다.

1) 크기 바꾸기

원본 그림보다 크게 또는 작게 만들 수 있습니다. 만약 1/2크기로 올리고 싶다고 가정해 보겠습니다.

먼저 원본 그림에서 마우스 오른쪽 버튼을 눌렀을 때 뜨는 정보를 잘 보세요. 주소 아래에 보면 해상도라고 나오죠? 거기에는 그 파일이 몇개의 픽셀로 되어 있나를 나타내 주고 있습니다. 이 해상도를 메모해 놓으십시오.

필우 로고는 해상도가 200X87 이군요. 이것은 가로, 세로가 200픽셀 X 87픽셀짜리 크기의 그림이라는 말입니다.
주소는 http://fanmusic.co.kr/images/fillwoo_logo.gif 이구요.

이 그림 일단 한 번 가져와 보고 또 반으로 크기를 줄여 볼까요?

이 그림을 가져 오려면

<image src="http://fanmusic.co.kr/images/fillwoo_logo.gif ">

이렇게 하면 되구요, 또 크기를 반으로 줄일려면

<image src="http://fanmusic.co.kr/images/fillwoo_logo.gif " width="100" height="44">

요렇게 하면 됩니다.

그러면

요런 그림이

요렇게 된다 이겁니다.

크기를 키울려면 반대로 수치를 크게 해 주면 됩니다. 그런데 한가지 중요한 것은 수치를 조정할 때는 가로 세로의 비율을 유지하려면 정확한 비율로 수치를 조정해 주어야 한다는 것입니다.

2) 그림의 위치 조절

특별한 말이 없이 그림만 넣으면 그림은 하나의 문자처럼 취급이 됩니다. 하나의 문자처럼 취급이 되니까 그림이 클 경우 꼭 아주 큰 글씨가 가운데 들어가 있는 것과 비슷하게 되죠.

예를 들면 이렇게 된다는 것이죠.

그러나 그림의 위치를 지정해 주면 좀 달라집니다. 위치를 지정해 주는 명령어는 'align'입니다. 정렬이라는 뜻이죠.

예를 들어 <IMG src="http://fanmusic.co.kr/images/fillwoo_logo.gif" width="100" height="44" align="left">라고 적어 넣으면

요렇게 나타납니다. 그림이 그 줄의 가장 왼편에 갑니다. 뿐만 아니라 글자들이 그림의 오른쪽으로 찍히면서 다음 줄로 넘어가도 가장 윗부분부터 아래로 채워 집니다. 차이가 느껴지죠?

마찬가지로 <IMG src="http://fanmusic.co.kr/images/fillwoo_logo.gif" width="100" height="44" align="right">라고 적어 넣으면

요렇게 나타날 거구요.
줄을 바꾸어도
요렇게 될 겁니다.

align="middle" 이라고 집어 넣으면 요렇게 될 거구요

align="top" 이라고 집어넣으면 요렇게 되겠죠.

align="bottom" 이라고 집어넣으면 요렇게 됩니다. 아무것도 안한 것과 별 차이 없죠?

3) 테두리

그림의 테두리를 만들 수 있습니다.

<IMG src="http://fanmusic.co.kr/images/fillwoo_logo.gif" width="100" height="44" align="left" border="1">라고 적어 넣으면

요렇게 되겠죠?
그림에 테두리가 생긴다는 말이죠.

그림 태그는 별로 어려운 것 없죠?

※ 그림 파일은 여러 가지 형식이 있지만 인터넷 상에서 사용되는 형식은 거의 대부분 확장자가 gif이거나 jpg인데 gif는 사용할 수 있는 색깔의 제한이 있어서 미묘한 칼라의 표현이 많은 사진에 는 jpg 파일이 많이 이용됩니다. 반면에 gif 파일은 표현할 수 있는 색깔 수는 제한되어 있지만 움직이는 그림이나 투명한 바탕 등의 기능이 지원되는 장점이 있습니다. 또한 같은 그림인 경우 gif 포맷이 파일 크기가 조금 작아서 메모리를 아낄 수 있는 장점도 있습니다.



  수정하기   추천하기   목록보기

번호 제목 작성자 작성일   추천 조회
215  제임스 이야기    BOF 2009/01/13 145 2119
214  부석사의 소국(小菊)    BOF 2008/11/17 176 2188
213  오궁 부부의 일본 여행기(2)  [2]  BOF 2008/09/12 136 2416
212  오궁 부부의 일본 여행기(1)  [2]  BOF 2008/09/11 133 1884
211  영주의 벚꽃    BOF 2008/04/21 157 1878
210  광양 매화 마을 꽃놀이  [1]  BOF 2008/04/17 227 2726
209  늦게 올리는 여름 휴가 사진 여행기(6) - 시드니 관광  [2]  BOF 2008/02/16 174 2295
208  늦게 올리는 여름 휴가 사진 여행기(5) - 헌터벨리,뉴카슬  [1]  BOF 2008/02/16 147 1998
207  늦게 올리는 여름 휴가 사진 여행기(4) - 헌터벨리  [1]  BOF 2008/02/15 173 2558
206  늦게 올리는 여름 휴가 사진 여행기(3) - 포트 스티븐스    BOF 2008/02/15 130 1963
205  늦게 올리는 여름 휴가 사진 여행기(2) - 뉴카슬 주변 배회하기  [2]  BOF 2008/02/13 135 1845
204  늦게 올리는 여름 휴가 사진 여행기(1) - 출발  [1]  BOF 2008/02/12 133 1945
203  가을 사진 몇 장 더...    BOF 2007/11/27 116 1727
202  가을이 깊어가는 부석사    BOF 2007/11/26 128 1749
201  하늘로 올라간 천상의 목소리    BOF 2007/09/07 201 1948
200  얼굴 큰 가족    BOF 2007/07/06 115 1653
199  최근의 재한이 집 사진들    BOF 2007/07/06 95 1515
198  여름 부석사, 그 넉넉함으로...    BOF 2007/06/25 102 1752
197  첨성대 야경    BOF 2007/04/24 104 1819
196  주말 형섭이 학교 방문    BOF 2007/04/11 106 3085
195  형섭이의 첫 귀가  [1]  BOF 2007/03/27 126 2784
194  민사고 입학식 참관기  [3]  BOF 2007/03/06 185 6581
193  오궁 패밀리의 홍콩 여행기 (3)  [1]  BOF 2007/01/05 107 2036
192  형섭이와 기타  [2]  BOF 2007/01/05 157 2054
191  홍콩 여행기 (2)  [1]  BOF 2007/01/03 103 1702
190  홍콩 여행기 (1)  [1]  BOF 2007/01/02 101 1706
189  민사고 학부모 간담회  [4]  BOF 2006/12/15 156 4936
188  윤섭이의 2006 GLPS 여름 캠프    BOF 2006/12/15 112 2617
187  눈이 왔네요 - 요즘 오궁 가족 소식    BOF 2006/11/07 169 1884
186  백암 나들이    BOF 2006/05/24 84 1003
185  윤섭이의 피아노 학원 발표회    BOF 2006/05/16 90 1410
184  주말 대게 먹기    BOF 2006/05/16 83 1629
183  오궁 가족 무비데이 '게이샤의 추억'    BOF 2006/05/05 81 1307
182  오궁 패밀리의 크리스마스 보내기    BOF 2006/02/21 141 1395
181  호주 여름 휴가기(6) - 마지막 날    BOF 2005/10/06 82 1089
180  호주 여름 휴가기(5) - 뉴카슬(Newcastle), 둘째날    BOF 2005/10/05 69 1029
179  호주 여름 휴가기(4) - 뉴카슬(Newcastle), 첫째날    BOF 2005/10/04 83 1129
178      소감: 후훗 ^^;    노윤섭 2005/10/04 119 975
177  호주 여름 휴가기(3) - 헌터 벨리(Hunter Valley)    BOF 2005/09/29 70 1034
176  호주 여름 휴가기(2) - 포트 맥쿼리(Port Macquarie)    BOF 2005/09/27 82 1138
175      소감: 호주 여름 휴가기(2) - 포트 맥쿼리(Port Macquarie)    crystal 2005/09/28 158 1133
174  호주 여름 휴가기(1)    BOF 2005/09/23 94 991
173      소감: 호주가 벌써 그리워지네요...    노윤섭 2005/09/24 143 1011
172  4자성어로 풀어본 17기 동기모임    BOF 2005/09/07 93 2138
171  잘된건지, 못된건지......    BOF 2005/07/15 135 1246
170  요즘 이런 것 드셔보셨는지?    BOF 2005/07/14 84 1304
169  제임스 가족과 함께 한 주말 이야기(2)    BOF 2005/07/08 76 1048
168  제임스 가족과 함께 한 주말 이야기(1)    BOF 2005/07/08 69 1075
167  주말에 비가 안와야 할텐데......    BOF 2005/06/30 149 1221
166  양평서 온 넥타이    BOF 2005/05/18 62 1355
165  오궁 가족 답사기 - 수원 화성    BOF 2005/04/22 71 1069
164  재흔이 돌잔치    BOF 2005/04/08 66 1399
163  광선총 오프    BOF 2005/03/29 80 1226
162  형섭이 겨울 캠프 면회 (2)    BOF 2005/01/24 121 1311
161  형섭이 겨울 캠프 면회 (1)    BOF 2005/01/24 66 1005
160  PA comment(3) from GLPS    BOF 2005/01/21 81 1327
159  형섭이 겨울 캠프 사진들(5)    BOF 2005/01/20 82 1152
158      Re: 형섭이 겨울 캠프 사진들(5)    큰외삼촌 2005/01/21 61 1037
157  Debate Comments from GLPS    BOF 2005/01/17 91 1102
156  Advisor letter from GLPS    BOF 2005/01/17 88 1200
155  PA comment(2) from GLPS  [1]  BOF 2005/01/17 80 1189
154  PA comment(1) from GLPS  [2]  BOF 2005/01/17 71 1288
153  형섭이 겨울 캠프 사진들(4)    BOF 2005/01/17 81 1099
152  형섭이 겨울 캠프 사진들(3)    BOF 2005/01/13 96 1119
151  형섭이 겨울 캠프 사진들(2)    BOF 2005/01/07 69 1237
150  형섭이 겨울 캠프 사진들(1)    BOF 2005/01/03 76 1262
149  백암 나들이    BOF 2006/05/24 96 1001
148  윤섭이의 피아노 학원 발표회    BOF 2006/05/16 89 1133
147  주말 대게 먹기    BOF 2006/05/16 95 1444
146  오궁 가족 무비데이 '게이샤의 추억'    BOF 2006/05/05 61 1475
145  오궁 패밀리의 크리스마스 보내기    BOF 2006/02/21 119 1075
144  호주 여름 휴가기(6) - 마지막 날    BOF 2005/10/06 79 1172
143  호주 여름 휴가기(5) - 뉴카슬(Newcastle), 둘째날    BOF 2005/10/05 84 1050
142  호주 여름 휴가기(4) - 뉴카슬(Newcastle), 첫째날    BOF 2005/10/04 82 1028
141      소감: 후훗 ^^;    노윤섭 2005/10/04 142 1158
140  호주 여름 휴가기(3) - 헌터 벨리(Hunter Valley)    BOF 2005/09/29 85 1139
139  호주 여름 휴가기(2) - 포트 맥쿼리(Port Macquarie)    BOF 2005/09/27 81 1159
138      소감: 호주 여름 휴가기(2) - 포트 맥쿼리(Port Macquarie)    crystal 2005/09/28 140 1181
137  호주 여름 휴가기(1)    BOF 2005/09/23 95 1055
136      소감: 호주가 벌써 그리워지네요...    노윤섭 2005/09/24 135 1053
135  4자성어로 풀어본 17기 동기모임    BOF 2005/09/07 80 1627
134  잘된건지, 못된건지......    BOF 2005/07/15 188 1328
133  요즘 이런 것 드셔보셨는지?    BOF 2005/07/14 218 1396
132  제임스 가족과 함께 한 주말 이야기(2)    BOF 2005/07/08 100 1149
131  제임스 가족과 함께 한 주말 이야기(1)    BOF 2005/07/08 79 1032
130  주말에 비가 안와야 할텐데......    BOF 2005/06/30 151 1179
129  양평서 온 넥타이    BOF 2005/05/18 77 1179
128  오궁 가족 답사기 - 수원 화성    BOF 2005/04/22 88 1349
127  재흔이 돌잔치    BOF 2005/04/08 92 1329
126  창원 집들이    BOF 2005/03/29 85 1209
125  광선총 오프    BOF 2005/03/29 89 1215
124  태그 강좌(10) - 맺는말    BOF 2005/01/17 80 1230
123  태그 강좌(9) - RGB 색상표    BOF 2005/01/17 86 1608
122  태그 강좌(8) - 테이블 태그    BOF 2005/01/17 133 1821
121  태그 강좌(7) - HTML 문서와 기본 태그    BOF 2005/01/17 79 1698
120  태그 강좌(6) - 마퀴 태그    BOF 2005/01/17 88 1256
119  태그 강좌(5) - 글씨 태그    BOF 2005/01/17 56 1571
 태그 강좌(4) - 그림태그    BOF 2005/01/17 101 1642
117  태그 강좌(3) - 어디서 연습할까요?    BOF 2005/01/17 87 1258
116  태그 강좌(2) - 음악 태그    BOF 2005/01/17 83 1090

    목록보기   이전페이지   다음페이지 [1] 2 [3][4]
       

Copyright 1999-2024 Zeroboard / skin by zero