[CSS 팁] 테이블에서 2n번째 부분만 회색백그라운드 처리 (격자)

table tr:nth-child(2n) td {
  background: rgba(0,0,0,0.01);
}

브라우저 크기에 따라 이미지 리사이징

모바일, 웹의 브라우저의 크기에 따라 유동적으로 삽입된 이미지가 함께 리사이징 되는 효과.

<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>  
<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div> 

여기서 58.536585%는 알아서. 나는 가로사이즈가 꽉 차있어야 하는 상황이었기때문에 100%으로 변경했다.


출처 : http://stackoverflow.com/questions/4572621/auto-image-resize-based-on-browser-window-dimensions

img태그 이미지 위에 또 이미지를 올릴때

아래와 같은 예시를 참고

<html>
<head>
<title>test</title>
<style type="text/css">
#chk {
position:absolute;
left:10;
top:10;
}
</style>
<script language="JavaScript">

</script>
</head>
<body>
<img src="http://dummyimage.com/600x400/a34653/342433"> <!-- bg 그림 //-->
  <div id="chk"><a href="#"><img src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png"></a></div>  <!-- X 그림 //--> 
</body>
</html>

* 결과 보기 http://jsbin.com/qigikumipo