수익아이템 안내 Mobile
특허있는 1등부업 드림큐 회원감사! 타부업 200,000원 대박이벤트!
[드림큐 생생후기] 내인생 최고의 전환점이 되어준 드림큐!   
알바 재택부업 글쓰기부업 포장부업 조립부업 전단지배포
수익확인 클릭수익 출석수익 소식받기 상담수익 리셀러수익 제휴사이트 실시간수익 오픈수익
드림큐 가입인사 10,000원 이벤트 진행중!
06월 20일 현재 업계최대 66,280개 드림큐후기 등록완료! 클릭한번에 최대 100,000원 즉시제공! 지금 바로 확인해 보세요!
No.1 재택/부업/창업 드림큐
 
ID 저장
 
아이디/비밀번호찾기
 
  홍보지원실
홍보공지
홍보마법사
왕초보 수익 만들기
대리홍보 서비스
홍보도우미
홍보TIP
Blog 스킨서비스
페이지광고
동영상광고
단축URL 생성서비스
무료자료실
태그교실
Blog 관리방법
카페 관리방법
색상표

  태그교실 홍보지원실 태그교실 

이미지 파일 입력하기
등록일 : 2012-04-09 15:15:21    조회수 : 17110 글쓴이 : 스터디 담당자
안녕하세요. 홍보지원실 입니다.
 
html 태그 명령어 중에서 <img> 태그와 배경으로 이미지 파일 입력하기에 대해서 배워보도록 하겠습니다.
 
아래의 내용을 편집기 또는 메모장에 입력하신 후 저장해서 실행해 보세요.
 
1. <img> 태그를 이용한 이미지 파일 입력하기
 
===== 내용 입력 시작 =====
 
 <html>
  <head>
   <title><img> 이미지 삽입하기</title>
  </head>
  <body>
   <img src="test.gif"><br><br>
   <img src="test.gif" border="3" alt="이미지 삽입 배워보기"><br><br>
   <img src="test.gif" width="100" height="50"><br><br>
   <img src="test.gif" width="300" height="200"><br><br>
  </body>
 </html>
 
===== 내용 입력 끝 =====
 
 

 

 
<img> 태그는 이미지를 삽입할 때 사용하는 태그 명령어 입니다.
 
사용법 : <img src="이미지 삽입할 주소" 속성="속성값">
 
이미지 삽입할 주소는 홈페이지를 만드시는 걸 전제로 하기 때문에 운영중이신
 
서버 저장된 이미지 주소와 파일명을 입력하셔야 합니다.
 
예) http://test.dreamq.net/test.gif
 
<img> 태그의 속성은 다음과 같습니다.
 
src = 이미지 파일 결로 지정
 
alt = 이미지 위에 마우스 올려 놓았을때 간단한 설명글 지정
 
align = 이미지 정렬 방법 지정(left, center, right로 지정)
 
border = 이미지 테두리선 지정 (0을 입력하면 테두리선이 표시 안됨)
 
height = 이미지 높이 지정
 
width = 이미지 폭을 지정
 
보통 이미지 파일들은 jpg, gif, png 파일을 많이 사용 합니다.

 
2. 배경에 이미지를 삽입하기
 
배경 이미지은 바탕 화면에 보여지는 것으로 사이즈가 작은 이미지를 사용할 경우
 
웹 문서 배경에 가득차게 반복적으로 보여지게 됩니다.

아래의 내용을 편집기 또는 메모장에 입력하신 후 저장해서 실행해 보세요.
 
===== 내용 입력 시작 =====
 
 <html>
  <head>
   <title>배경화면 삽입하기</title>
  </head>
  <body background="test.gif">
  </body>
 </html>
 
===== 내용 입력 끝 =====
 
 

 

 
원래 꽃 이미지가 하나이지만, 위에서 설명 드렸듯이 작은 이미지를 사용해서
 
전체 배경으로 보이게 됩니다.
 
사용법 : <body background="배경 이미지 주소></body>
 
body 안에 background를 입력하셔서 사용하시면 됩니다.
 

3. 배경 이미지 테두리 꾸미기
 
배경 이미지의 테두리를 꾸며 보도록 하겠습니다.
 
아래의 소스가 조금 복잡해 보이지만, 천천히 따라해 보시기 바랍니다.
 
아래의 내용을 편집기 또는 메모장에 입력하신 후 저장해서 실행해 보세요.
 
===== 내용 입력 시작 =====

 <html>
  <head>
   <title>이미지 테두리 꾸미기</title>
   <STYLE type="text/css">
   <!--
    .reddotted {border-color: red; border-style: dotted; border-width: 2px}
    .bluedouble {border-color: blue; border-style: double; border-width: 5px}
    .solid {border: red solid 7px}
   -->
   </style>
  </head>
  <body>
   <img src="test.gif" class="reddotted"><br><br>
   <img src="test.gif" class="bluedouble"><br><br>
   <img src="test.gif" class="solid"><br><br>
  </body>
 </html>
 
===== 내용 입력 끝 =====
 
 

 


기본 형식 부터 설명을 드리겠습니다.

사용법
  
<STYLE type="text/css">
<!--
.클래스명 {border-style: 테두리 스타일; border-color: 테두리 색상; border-width: 두께} 또는
.클래스명 {테두리 스타일 테두리 색상 테두리 두께}
-->
</style>

 
border-style : dashed(대시), dotted(점선), double(이중선), solid(실전),
                       inset(살짝 들어가 보이게), outset(불록 올라와 보이게)

border-color : 색상 이름, 색상값

border-width : thin(얇게), medium(중간), thick(굵게), 숫자 입력(필셀값)

border : border-style border-color border-width 한번에 지정할때 사용 (순서 꼭 지켜야 합니다.)
 
<head> 태그 안에 클래스를 입력하셔야 하며, 이미지 태그 안에서는 class라는 속성을
 
입력하셔야 합니다.





미래창조과학부 eTrust 인증획득
서비스만족대상 부업 대상수상
초록우산 재단과 캠페인진행
ISO 9001 인증획득
ISO 14001 인증획득
드림큐소개 재택알바/부업 홍보지원실 정회원센터 커뮤니티 쉼터 기타 컨텐츠
드림큐소개/서비스안내
드림큐장점/수익안내
드림큐 생생후기
패러디/연혁/드림큐만화
드림큐 보도자료
인증 및 수상내역
드림큐 리셀러란?
신청방법/신청하기
일반부업 리스트
일반알바/당일지급
주말알바/주부알바
단기/편의점알바
파트타임/인재정보
홍보공지/대리홍보
홍보TIP/홍보도우미
홍보마법사/Blog 스킨
왕초보 수익 만들기
무료자료실/태그교실
Blog 관리/동영상광고
카페/색상표/페이지
정회원공지
입금공지
정책공지
수익금확인
1:1 문의하기
문의자접수
공지사항
가입인사
이벤트/간식
당첨자발표
제휴이벤트
수익금 리스트
유머/동영상
미니게임
일반만화/무협만화
오늘의운세
주간운세/월간운세
토정비결/평생사주
로또운세
재능마켓
창업정보
알짜정보
이야기
개인정보취급방침 입사지원 약관 제휴 광고 이용문의 과장광고 방지센터 이메일 무단수집 거부   
드림큐, dreamq, 드림홈에 대한 대한민국 특허청으로부터 상표신청이 완료 되었습니다. (상표번호 : 41-0248374-0000, 41-0257888-0000, 41-0259108-0000)
상표권 외 독창적인 영업방식 및 서버와 클라이언트의 DB 연결방식등 다양한 비즈니스 모델을 특허 출원중 이므로 드림큐 비즈니스 방식의 모방을 금지합니다.
업체명 : (주)드림컴퍼니 사업자등록번호 : 127-86-53048 통신판매업신고번호 : 경기의정부-0020호 대표 : 이승진
주소 : 경기도 의정부시 호원동 351-6 호원빌딩 4층 직업정보제공사업 신고번호 : 의정부 제2014-2호   
드림큐 고객센터 : 1600-9280  (업무시간 : [평일]10:00 ~ 19:00, [토요일]10:00 ~ 15:00, 공휴일 휴무)
Copyright 2012 ~ 2018 DreamQ Corp. All Rights Reserved.