강좌/자료-홈페이지(html) - img(이미지를 보여줄때)

홈페이지제작

홈페이지제작 > 기초태그

기초태그

글 수 8

img(이미지를 보여줄때)

조회 수 1963 추천 수 0 2010.02.10 12:49:59

똑띠 *.53.232.32 http://jobdahan.net/1246235

화면상에 이미지를 보여주고자 할때는 이미지 태그를 사용한다.

사용법은 아래와 같다.

여기에서 이미지 경로라고 하는것은 웹서버에 올려진 이미지 위치를 뜻한다.

일반으로 우리가 호스팅을 이용하게 되면 호스팅 ftp접속 아이디와 패스워드로 ftp로 접속했을때 처음으로 나오는 폴더를 홈디렉토리라고 하는데 해당 홈디렉토리는 일밙적으로 자신의 URL을 입력했을때의 경로라고 보면 된다.

자신의 계정에 이미지만을 관리하기 위해 images 라는 폴더를 만들어 두고 해당 폴더에 자기가 사용할 이미지를 업로드 했다면 아래와 같은 형태로 이미지를 불러 올 수 있을것이다.

이미지의 절대 경로는 이미지 위에서 마우스 오른쪽 버튼을 눌러 속성 보기를 클릭하면 주소가 나온다.

참고로 현재 잡다한몽상백서 로고타이틀의 속성은 아래와 같다.

http://jobdahan.net/files/attach/images/1229950/logo_main.gif

이 주소를 이미지 태그에 접목시키면 아래와 같다.

이 태그의 결과는 당연히

이렇게 나올것이다.

이 게시물을...

엮인글 :: http://jobdahan.net/index.php?document_srl=1246235&act=trackback&key=1f2

» 편집 도구모음 건너뛰기

하이퍼링크

새 창으로
특수문자 삽입
선택한 기호

칸 수 지정

행
열

표 속성 지정

테두리 굵기
테두리 색
표 배경색

문서 첨부 제한 : 0Byte/ 2.00MB
파일 제한 크기 : 2.00MB (허용 확장자 : *.*)

비밀글 기능

List of Articles

번호	제목
기초태그 - Tag ABC순 정렬 태그는 기본적으로 < 와 > 사이에 작성이 됩니다. ex> <table> : 테이블을 표시 <img src="> : 이미지를 표시 <a href="> : 하이퍼링크를 처리할때 태그에 대한 정리를 하기에 앞서 HTML 문서의 기본구조에 대해서 알아보도록 하자. <html> <head> <title>문서의 제목이 들어가는 곳</title> </head> <body> 웹프라우저에서 보여지게 되는 부분 </body> </html> html문서는 위와 같은 형태로 구성이 되어 있으며 html 태그는 흔히 말하는 열고,닫고 형태로 구성이 된다. <head> 라고 열어주었으면 </head> 이런식으로 닫아 주어야 하는것이다. <body> 태그로 이렇게 여러주면 </body> 이런식으로 닫아주어야 한다. 모든 태그는 기본적으로 닫아주는것을 원칙으로 하는데 <br> 태그와 같은 형태는 그냥 단독으로 사용해도 상관없다. 그리고 <> 사이에 들어가지 않아도 되는 태그로는 공백을 처리하는   태그이다. 이 태그는 문서와 문서사이에 작성을 하게 되며 독립적으로   형태로 입력해서 사용할 수 있다. A B ...
img(이미지를 보여줄때) 화면상에 이미지를 보여주고자 할때는 이미지 태그를 사용한다. 사용법은 아래와 같다. <img src="이미지경로"> 여기에서 이미지 경로라고 하는것은 웹서버에 올려진 이미지 위치를 뜻한다. 일반으로 우리가 호스팅을 이용하게 되면 호스팅 ftp접속 아이디와 패스워드로 ftp로 접속했을때 처음으로 나오는 폴더를 홈디렉토리라고 하는데 해당 홈디렉토리는 일밙적으로 자신의 URL을 입력했을때의 경로라고 보면 된다. 자신의 계정에 이미지만을 관리하기 위해 images 라는 폴더를 만들어 두고 해당 폴더에 자기가 사용할 이미지를 업로드 했다면 아래와 같은 형태로 이미지를 불러 올 수 있을것이다. <img src="자신의홈페이지URL/images/이미지명"> 이미지의 절대 경로는 이미지 위에서 마우스 오른쪽 버튼을 눌러 속성 보기를 클릭하면 주소가 나온다. 참고로 현재 잡다한몽상백서 로고타이틀의 속성은 아래와 같다. http://jobdahan.net/files/attach/images/1229950/logo_main.gif 이 주소를 이미지 태그에 접목시키면 아래와 같다. <img src="http://jobdahan...
href 특정한곳으로 이동을 시켜주는 태그이다. 하퍼링크 또는 링크 라고도 불리우는 이 태그는 아래과 같은 방법으로 사용이 된다. <a href="http://jobdahan">잡다한몽상백서</a> 즉, 잡다한몽상백서라는 텍스트를 클릭했을때 http://jobdahan.net 으로 이동하는 태그이다. 아래 택스트를 클릭해 보자.! 잡다한몽상백서
style 속성들 (bgcolor,font,background,bold, nowrap,...) 테이블(table)이나 div 등을 레이아웃을 구성하는 뼈대라고 한다면 해당 뼈대에 옷을 입히는것을 스타일 적용이라고 보면 된다. <table> <tr> <th><td>내용</td></th> </tr> </table> 이와 같은 기본 테이블에 테이블 스타일 속성을 지정해서 자신이 원하는 테이블로 만들수있다. 전체폭 : 650px 테이블 선 두께 : 1px 테이블 제목부분 폭 : 150px 테이블 내용부분 폭 : 500px 테이블 제목부분 색깔 : 붉은색 테이블 제목 부분 배경색깔 : 옅은 회색 (#f2f2f2) 테이블 제목 부분 글자크기 : font-size: 12pt 테이블 제목 개행금지 : nowrap 이러한 값들을 테이블 속성값이라고 이야기 하고 이 속성값은 style에서 지정 할 수가 있다. 스타일 지정은 여러가지 방법이 있는데 구체적인 방법은 css 강좌에서 다룬다.
table 과 기본 속성 (tr,th,td,width, align, cellpadding,cellspacing) 테이블은 기본적으로 아래와 같은 형태로 구성이 된다. <table border="1" width="650px" align="center" cellpadding="5px" cellspacing="2"> <tr> <th>제목부분</th> <td>내용부분</td> </tr> <tr> <th>제목부분</th> <td>내용부분</td> </tr> </table> 이렇게 작성된 부분은 아래와 같이 표현이 된다. 제목부분 내용부분 제목부분 내용부분
body html에서 본문을 구성하는 태그이다. <body> 내용</body> 이런식으로 사용되며 기본적으로 본문의 상단여백과 좌측 여백은 아래와 같이 조정한다. <body topmargin="0px" leftmargin="0">내용</body>
html html은 Hyper Text Markup Language 의 약자이다. 웹페이지를 구성할때 <html> 로 시작해서 </html>로 끝난다. 기본적으로 태그는 시작이 있으면 끝이 있는데 우리가 사용하는 일반적인 말로는 열어 주었으면 닫아 주어야 한다고 표현을 한다. 홈페이지 제작위해 가장 기본적인 사항으로 ftp에 접속하여 홈디렉토리에 html파일을 업로드 하게 되면 해당 파일은 절대경로(URL) 값을 가지게 되며 해당 파일은 브라우저(익스플로어, 파이어폭스, 크롬,,,)를 통해서 보여지게 된다. 메모장을 열어서 "Hello" 라는 문구를 입력한다음 index.html 이란 이름으로 저장한다음 해당 파일을 ftp로 올려보자. 그다음 자신이 보유한 홈페이지 URL 다음에 index.html 파일을 입력해 보면 "Hello"라는 문구를 확인 할 수 있을것이다. Hello 대신 여러분이 만들고 싶은 내용을 하나씩 구성을 하면 그것이 홈페이지가 되는것이다. 그럼 html 로 작성된 가장 기본적인 웹페이지 소스를 하나 소개해 보면 <html> <head> <title> 홈페이지 제작 기초...
maxlength <input type="text" name="LGD_PRIVATENO" value="" maxlength="7" size="7" /> 입력값을 받을때 최대 글자수 제한을 정하고 싶을 경우 이와 같은 형태로 사용할 수 가 있다. 주민등록번호의 경우 앞자리 6자리와 뒷자리 7자리로 입력값이 지정이 되어 있다 보니 이런식으로 활용 활수가 있겠다.

번호

제목

기초태그 - Tag ABC순 정렬

태그는 기본적으로 < 와 > 사이에 작성이 됩니다. ex> <table> : 테이블을 표시 <img src="> : 이미지를 표시 <a href="> : 하이퍼링크를 처리할때 태그에 대한 정리를 하기에 앞서 HTML 문서의 기본구조에 대해서 알아보도록 하자. <html> <head> <title>문서의 제목이 들어가는 곳</title> </head> <body> 웹프라우저에서 보여지게 되는 부분 </body> </html> html문서는 위와 같은 형태로 구성이 되어 있으며 html 태그는 흔히 말하는 열고,닫고 형태로 구성이 된다. <head> 라고 열어주었으면 </head> 이런식으로 닫아 주어야 하는것이다. <body> 태그로 이렇게 여러주면 </body> 이런식으로 닫아주어야 한다. 모든 태그는 기본적으로 닫아주는것을 원칙으로 하는데 <br> 태그와 같은 형태는 그냥 단독으로 사용해도 상관없다. 그리고 <> 사이에 들어가지 않아도 되는 태그로는 공백을 처리하는   태그이다. 이 태그는 문서와 문서사이에 작성을 하게 되며 독립적으로   형태로 입력해서 사용할 수 있다. A B ...

img(이미지를 보여줄때)

화면상에 이미지를 보여주고자 할때는 이미지 태그를 사용한다. 사용법은 아래와 같다. <img src="이미지경로"> 여기에서 이미지 경로라고 하는것은 웹서버에 올려진 이미지 위치를 뜻한다. 일반으로 우리가 호스팅을 이용하게 되면 호스팅 ftp접속 아이디와 패스워드로 ftp로 접속했을때 처음으로 나오는 폴더를 홈디렉토리라고 하는데 해당 홈디렉토리는 일밙적으로 자신의 URL을 입력했을때의 경로라고 보면 된다. 자신의 계정에 이미지만을 관리하기 위해 images 라는 폴더를 만들어 두고 해당 폴더에 자기가 사용할 이미지를 업로드 했다면 아래와 같은 형태로 이미지를 불러 올 수 있을것이다. <img src="자신의홈페이지URL/images/이미지명"> 이미지의 절대 경로는 이미지 위에서 마우스 오른쪽 버튼을 눌러 속성 보기를 클릭하면 주소가 나온다. 참고로 현재 잡다한몽상백서 로고타이틀의 속성은 아래와 같다. http://jobdahan.net/files/attach/images/1229950/logo_main.gif 이 주소를 이미지 태그에 접목시키면 아래와 같다. <img src="http://jobdahan...

href

특정한곳으로 이동을 시켜주는 태그이다. 하퍼링크 또는 링크 라고도 불리우는 이 태그는 아래과 같은 방법으로 사용이 된다. <a href="http://jobdahan">잡다한몽상백서</a> 즉, 잡다한몽상백서라는 텍스트를 클릭했을때 http://jobdahan.net 으로 이동하는 태그이다. 아래 택스트를 클릭해 보자.! 잡다한몽상백서

style 속성들 (bgcolor,font,background,bold, nowrap,...)

테이블(table)이나 div 등을 레이아웃을 구성하는 뼈대라고 한다면 해당 뼈대에 옷을 입히는것을 스타일 적용이라고 보면 된다. <table> <tr> <th><td>내용</td></th> </tr> </table> 이와 같은 기본 테이블에 테이블 스타일 속성을 지정해서 자신이 원하는 테이블로 만들수있다. 전체폭 : 650px 테이블 선 두께 : 1px 테이블 제목부분 폭 : 150px 테이블 내용부분 폭 : 500px 테이블 제목부분 색깔 : 붉은색 테이블 제목 부분 배경색깔 : 옅은 회색 (#f2f2f2) 테이블 제목 부분 글자크기 : font-size: 12pt 테이블 제목 개행금지 : nowrap 이러한 값들을 테이블 속성값이라고 이야기 하고 이 속성값은 style에서 지정 할 수가 있다. 스타일 지정은 여러가지 방법이 있는데 구체적인 방법은 css 강좌에서 다룬다.

table 과 기본 속성 (tr,th,td,width, align, cellpadding,cellspacing)

테이블은 기본적으로 아래와 같은 형태로 구성이 된다. <table border="1" width="650px" align="center" cellpadding="5px" cellspacing="2"> <tr> <th>제목부분</th> <td>내용부분</td> </tr> <tr> <th>제목부분</th> <td>내용부분</td> </tr> </table> 이렇게 작성된 부분은 아래와 같이 표현이 된다. 제목부분 내용부분 제목부분 내용부분