이번에는 CSS를 이용해서 특정 요소를 화면에서 안보이도록 설정하는 것을 해보겠습니다.  

화면을 구성하다보면 화면에 그리기는 그려야 하는데 사용자에게 보여주면 안되는 것들이 있을 수도 있겠죠?

visibility 속성이 바로 그것을 위한 속성입니다. 사용자가 원할 때만 보여주면 되는 그런 요소들을 위해서 사용하시면 되는 속성입니다.

NOTE: 중요한 정보들을 단순히 안보이게끔 하는데는 사용하시면 안됩니다. 화면에 정보가 뿌려는 지지만 사람 눈에만 안보이도록 속여놓은 것이기 때문에 언제든지 사용자가 볼 수 있다는 것을 명심하세요.

이 속성은 다음과 같은 속성값들을 가질 수 있습니다.

다음 예제를 한번 보시죠. 

<p>
This paragraph should be visible in normal way.
</p>
<p style="visibility:hidden;">
This paragraph should not be visible.
</p>

결과는 아래와 같습니다. 

두개의 문단을 출력하는데 두번째 문단은 visibility속성값이 hidden이라서 눈에 보이지는 않겠지만 저기 위에 분명 있습니다.

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

이번에는 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:

결과는 아래와 같습니다.

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