태그자료
< 자료공유 < 태그자료
자료실

이미지 태그

페이지 정보

작성자 madalla 작성일13-02-09 08:31 조회1,568회 댓글0건

본문

그림 태그의 기본

<img src="이미지주소" width="숫자" height="숫자" border="숫자" alt="이미지 설명" >

이미지 주소는 말 그대로 이미지가 있는경로를 의미합니다. http:// 로 시작하는 경로입니다.
자신의 컴퓨터에 있는 이미지를 드림위버나 나모로 불러들이시면 <img src=file:/// ~~> 이런식로 시작하게 되는데 이것을 다른 사이트나 블로그나 카페에 그대로 올리시면 이미지가 안보입니다. 소위 엑박이 되는거죠.
내 컴퓨터는 나만이 볼 수 있는 공간입니다. 컴퓨터 전원이 꺼지면 나도 못보고 상대도 못보죠. 그래서 24시간
풀가동하는 호스팅이나 서버가 존재하고 그 곳에 이미지를 올려주시고 http://~ 로 시작하는 이미지 경로를 적어주시면 됩니다.

이미지
<img src="http://madalla.kr/script/img/6.jpg" width="100" height="100" border="0" alt="이미지"> 이렇게 표현됩니다. 이미지 위에 마우스를 올리면 이미지라는 노란 박스의 글자가 보입니다. 이미지에 대한 설명을 해주는 것입니다.

이미지를 배경으로 사용하기

<table background="http://user.chol.com/~jd13952/mul/6.jpg" width="400" height="300">
그 예를 적용한 것이 아래 그림입니다.

배경화면이 움직이지 않고 그 자리, 그 위치에 고정시켜 놓고 싶으시면 bgproperties="fixed"를 넣어 주시면 됩니다<body background="그림파일주소" bgproperties="fixed">스타일로 서식 지정은 여러가지가 있습니다.
<STYLE type="text/css">
body {background:url(그림파일주소);
background-repeat:no-repeat;background-position:right bottom;
background-attachment:fixed}
<style>

background-repeat:no-repeat; 이것은 반복 여부를 나타냅니다.

이해되시죠?
center. right, left 와 top, bottom, middle을 필요하신대로 골라 적용하시면 될 듯싶습니다.

스타일로 서식 지정은 여러가지가 있습니다.
<STYLE type="text/css">
body {background:url(그림파일주소);
background-repeat:no-repeat;background-position:right bottom;
background-attachment:fixed}
<style>

background-repeat:no-repeat; 이것은 반복 여부를 나타냅니다.

이해되시죠?
center. right, left 와 top, bottom, middle을 필요하신대로 골라 적용하시면 될 듯싶습니다.

추가로 배경색 지정에 대해 알려드립니다.
<body bgcolor="red"> 이렇게 표현하시면 됩니다.
그리까 배경색을 지정해 주는 태그는 <body bgcolor="색깔코드"> 가 되겠네요.색상코드는 색상표를 누르시면 보입니다.
    Madalla's Space
    Madalla's Space
    Madalla's Space


    테이블 안을 배경색으로 채운 것입니다. 배경화면과 배경색에 대한 이해가 좀 되셨나요?
    그림 여백 주기

    여백에는 상하여백 : vspace 좌우여백 : hspace 가 있습니다.

    1. 좌우 여백 만들기
    <img src="그림주소"> 안에
    hspace="숫자" 태그를 끼어넣어 그림의 양옆에 여백을 줍니다.(숫자가 커질수록 간격이 커집니다.)
    <img src="그림주소" hspace="숫자">

    2. 상하 여백 만들기
    <img src="그림주소" > 안에
    vspace="숫자" 태그를 끼어넣어 그림의 위아래에 여백을 줍니다.(숫자가 커질수록 간격이 커집니다.)
    <img src="그림주소" vspace="숫자">

    vspace

    hspace
    기타 사용 태그

    border, align, valign

    border은 말 그대로 테두리입니다.
    <img src="경로" border="0"
    alt="마달라 배경">
    border=0은 테두리가 없다는 말입니다. 이미지에 링크를 걸었을 경우 자동으로 테두리가 생기는데 이럴때 저런 식으로 표현을 해주면 테두리가 보이지 않습니다. border="숫자" 로 표현합니다.

    align은 가로 위치를 어디로 할건지 정하는태그입니다.
    align="left, right, center" 등 알아서 적용하시며 됩니다.



    valign=세로 위치를 정하는 태그입니다.
    valign="top, middle, bottom"

    마달라이미지

    border="15"
    마달라이미지

    align="center" valign="bottom"


    • 페이스북으로 보내기
    • 트위터로 보내기
    • 구글플러스로 보내기