웹문서에서 빼놓을 수 없는 이미지 삽입 태그입니다.

<img src='이미지경로'>

아주 간단한 예제죠..

해당 경로에 있는 이미지를 이미지 본래 사이즈 그대로 그자리에 삽입해줍니다.

링크를 걸게되면 원치 않는 테두리가 생기기도 하고 이미지가 너무 크면 있는 그대로 다 보여지다 보니 보기에 좋지않고

옵션을 지정해서 테두리도 없애거나 원하는 색, 원하는 굵기로 지정할 수 있으며, 크기(가로/세로)도 지정할 수 있습니다.

이미지 옆에 텍스트가 같이 있다면 그림을 기준으로 텍스트의 정렬을 어찌할지도 지정할 수 있죠.

로고 <img border='0' width='185' height='67' align='absmiddle'>

 

그 외에 이미지에 여러 효과를 넣을 수도 있습니다.

좌우 뒤집기 
<img src="/images/dev_logo.gif" width="185"  height="67" align="top" style="FILTER: fliph()" />

 style="FILTER: fliph()"

 

상하 뒤집기 
<img src="/images/dev_logo.gif" width="185"  height="67" align="top" style="FILTER: flipv()" />

 style="FILTER: flipv()"

 

흐림효과 
<img src="/images/dev_logo.gif" width="185"  height="67" align="top" style="FILTER: alpha(opacity=90, style=3, finishopacity=0);" />

 style="FILTER: alpha(opacity=90, style=3, finishopacity=0)"

 

흑백효과 
<img src="/images/dev_logo.gif" width="185"  height="67" align="top" style="FILTER:gray()" />

 style="FILTER:gray()"

 

엑스레이효과 
<img src="/images/dev_logo.gif" width="185"  height="67" align="top" style="FILTER:xray()" />

 style="FILTER:xray()"

 

투명효과 
<img src="/images/dev_logo.gif" width="185"  height="67" align="top" style="FILTER: alpha(opacity=90, style=2, finishopacity=30);" />

 style="FILTER: alpha(opacity=90, style=2, finishopacity=30)"

 

opacity 수치에 따라 투명도가 결정됩니다 (0~100)

수치가 작아질수록 투명해지며 이미지 뒤 배경이 보입니다.

 

여기서 잠깐 alpha 효과의 세부 속성에 대해 알아봅니다.

 

투명도 조절

0~100 (0에 가까울수록 투명, 100에 가까울수록 불투명)

opacity(시작하는 부분 투명도)

finishopacity(끝나는 부분 투명도)

 

투명 모양 조절

0~3

0 (opacity값을 끝까지 유지)

1 (왼쪽은 opacity 값에서 오른쪽은 finishopacity 값으로 투명도 변화)

2 (중앙의 opacity 값에서 원형 바깥쪽 finishopacity 값으로 투명도 변화)

3 (x자 대각선의 opacity 값에서 끝부분 변의 finishopacity 값으로 투명도 변화)

 

참고 : DEVHolic 푸터 부분 배경은 style="FILTER:alpha(opacity=90, style=2, finishopacity=70);opacity:0.8;"

이미지 뿐만 아니라 텍스트, 레이어 등에도 적용 가능하지요..

 

이 게시물을..