[CSS] 9. Image ( 이미지 관련 설정 )

 

이번에는 CSS 를 이용한 이미지 관련 속성을 설정하는 방법에 대해서 알아보도록 하겠습니다. 

• The border property is used to set the width of an image border.

• The height property is used to set the height of an image.

• The width property is used to set the width of an image.

• The -moz-opacity property is used to set the opacity of an image.

image border 속성

The border property of an image is used to set the width of an image border. This property can have a value in length or in %.

A width of zero pixels means no border.

Here is the example:

<img style="border:0px;" src="/images/css.gif" /> <br /> <img style="border:3px dashed red;" src="/images/css.gif" />

결과는 아래와 같습니다.

 

 

image height 속성

The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.

Here is the example:

<img style="border:1px solid red; height:100px;" src="/images/css.gif" /> <br /> <img style="border:1px solid red; height:50%;" src="/images/css.gif" />

결과는 아래와 같습니다.

 

 

image width 속성

The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.

Here is the example:

<img style="border:1px solid red; width:100px;" src="/images/css.gif" /> <br /> <img style="border:1px solid red; width:100%;" src="/images/css.gif" />

결과는 아래와 같습니다.

 

 

-moz-opacity 속성

 -moz-opacity 속성은 이미지의 opacity를 설정하기위한 속성입니다. 이 속성은 Mozilla에서 이미지의 투명도를 설정하기 위한 것입니다. IE 는 filter:alpha(opacity=x) 를 사용하죠.

Mozilla에서 (-moz-opacity:x) 속성을 사용할 때 x 값은 0.0 에서 1.0 을 지정할 수 있습니다. 숫자가 낮을 수록 더 투명해지죠.  

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

Here is the example:

<img style="border:1px solid red;-moz-opacity:0.4;filter:alpha(opacity=40);opacity:0.4;" src="/images/css.gif" />

결과는 아래와 같습니다.

 

 

 

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_images.htm