2026년 8월 12일 (수)
(녹) 연중 제19주간 수요일 그가 네 말을 들으면 네가 그 형제를 얻은 것이다.

자유게시판

[컴배우기-53 ⑤]그림 불러오기 1과~6과

스크랩 인쇄

신희상 [shinada] 쪽지 캡슐

2006-06-08 ㅣ No.100556

      +찬미예수님

 

      안녕하세요..형제자매님.

      오늘은 그림을 불러오는 방법과 여러가지 배우세요.

      좋은 그림은 컴에 저장하시고 사용하시면 더욱 좋고요.

      이것도 저것도 귀찮으시면 남의것 불러와서 사용하세요.

      여기 굿뉴스에 이미지가 상당히 많은데 활용하시기 바랍니다.

      복음을 전하는데 도움이 되시길 바랍니다...샬롬!

 

   







▒요약

그림 주소 알아내기

인터넷 페이지들은 거의 대부분이 그림으로 되어있지요.
웹 페이지에 그림을 뜨게하려면, html 문서에 그림을 불러오는 태그를 쓰면된답니다.
그림을 일정 장소에 저장해 놓고 그림 불러오는 태그로 그 주소를 호출하면
그림이 뜨게 되는 것이지요. 그림마다 모두 주소가있습니다.^^

원하는 그림 위에 마우스를 올려놓고 오른쪽 버튼을 누르면 주르륵~ 메뉴가 뜨지요?
그 메뉴들 젤 아래 "등록정보" 가있습니다. (윈도우XP인 경우는 "속성")
등록정보를 누르시면 "주소(URL)" 이 있고 "http://!~~~#~$@#~~@$^%#^^%*~~" 이런 주소가있죠?
그게 바로 그 그림이 저장되어있는 주소입니다 ^^*

무지하게 자주쓰는 것이니 꼭 익혀두세요.
예) 조 위에 만화 두번째 페이지 주소는
"http://www.herjaherja.com/image/contents/hj_21_01.jpg"

 

====================================================================================================

 

 







▒요약



자, 그림을 불러와 볼까요?
태그는 그림을 불러오는 태그입니다.
앞서 배운, "그림주소"를 넣어주면 됩니다.


<소스>











그림주소 예제;

1.다음 로고


2.네이버 로고


3.허자허자 배너

 

====================================================================================================

 

 







▒요약

그림 크기조절

그림을 불러 문서를 만들다가 그림이 너무 크거나 작아서 문제가 된적 없으세요? ^^
그림의 사이즈를 맘대로 조절할 수 있다면 이런 문제가 없겠죠?
자 사이즈를 내맘대로!
그림불러오기 기본 태그안에
width="숫자" height="숫자" 를 끼어넣어, 숫자를 바꿔주면 됩니다.



<소스>














 

 

====================================================================================================

 

 







▒요약

그림 위치조절, 그림과 글자 위치조절

1.그림 위치조절
그림을 왼쪽으로 오른쪽으로 혹은 가운데로....위치를 정하면,
페이지 타이틀로도 쓸 수 있고 심볼로 쓸 수 있고 참 좋겠죠?



태그를 사용하여
위치를 바꿔 정렬을 조절합니다.
위치 : align= left / right / center

left : 왼쪽으로 그림 정렬
right : 오른쪽으로 그림 정렬
center : 가운데로 그림 정렬



2.그림과 글자 위치조절
그림과 글자를 함께 쓸 때 그림과 글자의 정렬을 조절해보세요.
그림불러오기 기본 태그안에 align="위치"를 끼어넣어



태그를 사용하여
위치를 바꿔 정렬을 조절합니다.
위치 : align= top / middle / bottom / right / left

top : 그림 위에 글자를 위치
middle : 그림 중간에 글자를 위치
bottom : 그림 아래에 글자를 위치
right : 글자 오른쪽에 그림을 위치
left : 글자 왼쪽에 그림을 위치




■ 소스 ■

1.그림 위치조절




 




 








2.그림과 글자 위치조절


그림 위에 글자를 위치


그림 중간에 글자를 위치


그림 아래에 글자를 위치


글자 오른쪽에 그림을 위치









글자 왼쪽에 그림을 위치




(^_^)/ 퍼가셔도됩니다만 꼭 출처를 명시해 주세요.
인터넷 강국 대한민국! 전국민이 컴인(人)이 되는 그날까지!
(http://cafe.daum.net/herjaherja)


 

 

====================================================================================================

 

 







▒요약

그림 테두리 만들기

1.그림 테두리
얇은 테두리~ 두꺼운 액자같은 테두리~ 그림에 테두리를 만들어보죠 ^^

안에
border="숫자" 태그를 끼어넣어 그림의 테두리를 나타나게합니다.(숫자가 커질수록 굵기가 두꺼워집니다.)






2.그림테두리 색깔넣기

안에
style="border-color:색깔" 태그를 끼어넣어 테두리의 색깔을 바꿉니다.(색상표에서 다양한 색상을 찾아, 넣어보세요)







■ 소스 ■







1.그림 테두리 조절







2.그림 테두리 색깔 조절




 




 

======================================================================================================

 

 







▒요약

그림 여백 만들기

그림 주위에 여백을 만듭니다.
그림과 글사이의 간격, 그림과 그림사이의 간격을 두어 깔끔한 편집을 해보아요

1.좌우 여백 만들기

안에
hspace="숫자" 태그를 끼어넣어 그림의 양옆에 여백을 줍니다.(숫자가 커질수록 간격이 커집니다.)






2.상하 여백 만들기

안에
vspace="숫자" 태그를 끼어넣어 그림의 위아래에 여백을 줍니다.(숫자가 커질수록 간격이 커집니다.)







■ 소스 ■








1.좌우 여백 조절




영희야 놀자 철수야 놀자 바둑아 놀자

영희야 놀자 철수야 놀자 바둑아 놀자





영희야 놀자 철수야 놀자 바둑아 놀자

영희야 놀자 철수야 놀자 바둑아 놀자





영희야 놀자 철수야 놀자 바둑아 놀자

영희야 놀자 철수야 놀자 바둑아 놀자














2.상하 여백 조절





영희야 놀자 철수야 놀자 바둑아 놀자



영희야 놀자 철수야 놀자 바둑아 놀자











영희야 놀자 철수야 놀자 바둑아 놀자



영희야 놀자 철수야 놀자 바둑아 놀자














영희야 놀자 철수야 놀자 바둑아 놀자



영희야 놀자 철수야 놀자 바둑아 놀자






<퍼온거 다 아시니 알아서 배우세요...>



199 4

추천 반대(0) 신고

 

페이스북 트위터 핀터레스트 구글플러스

Comments
Total0
※ 500자 이내로 작성 가능합니다. (0/500)

  • ※ 로그인 후 등록 가능합니다.

번호 제목 등록일 작성자
100558 영혼의샘터(직장 사목부)|6| 2006-06-08 허선
100557 James Galway/플롯 연주곡 모음|2| 2006-06-08 김근석
100556 [컴배우기-53 ⑤]그림 불러오기 1과~6과|4| 2006-06-08 신희상
100555 불루 마운틴(Blue Mountains)|39| 2006-06-08 배봉균
100554 - 구 들 -|2| 2006-06-08 유재천

리스트