투명한 border 가 있는 img 만드는 법
***
일단 방법이야 여러가지고
브라우저별 지원현황은 각자 알아서 ....
***
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bib</title>
<style>
* {margin: 0; padding: 0;}
.sec1:after, .sec2:after {content:""; display:block; clear:both;}
/* top, left 에 마진이나 패딩이 생겨도 문제없는 구조 */
.sec1 .imgbox {position:relative; float:left; padding-left:50px; padding-top:30px;}
.sec1 .imgbox > img {vertical-align:top;}
.sec1 .imgbox_border {position:absolute; width:200px; height:200px; border:10px solid rgba(255,0,0,0.4); bottom:0; right:0; box-sizing:border-box;}
/* 가상선택자 + img 크기가 변해도 문제없는 구조 */
.sec2 .imgbox {position:relative; float:left;}
.sec2 .imgbox:after {content:""; position:absolute; width:100%; height:100%; border:10px solid rgba(255,0,0,0.4); bottom:0; right:0; box-sizing:border-box;}
.sec2 .imgbox > img {vertical-align:top;}
</style>
</head>
<body>
<section class="sec1">
<div class="imgbox">
<img src="http://dev.ui.naver.com/tmp/?200x200_movieposter_y_FFFFFF_100" width="200" height="200" alt="임시 이미지">
<div class="imgbox_border"></div>
</div>
<div class="imgbox">
<img src="http://dev.ui.naver.com/tmp/?200x200_movieposter_y_FFFFFF_100" width="200" height="200" alt="임시 이미지">
<div class="imgbox_border"></div>
</div>
<div class="imgbox">
<img src="http://dev.ui.naver.com/tmp/?200x200_movieposter_y_FFFFFF_100" width="200" height="200" alt="임시 이미지">
<div class="imgbox_border"></div>
</div>
</section>
<br><br><br><br><br><br>
<section class="sec2">
<div class="imgbox">
<img src="http://dev.ui.naver.com/tmp/?200x200_movieposter_y_FFFFFF_100" width="200" height="200" alt="임시 이미지">
</div>
<div class="imgbox">
<img src="http://dev.ui.naver.com/tmp/?200x200_movieposter_y_FFFFFF_100" width="200" height="200" alt="임시 이미지">
</div>
<div class="imgbox">
<img src="http://dev.ui.naver.com/tmp/?200x200_movieposter_y_FFFFFF_100" width="200" height="200" alt="임시 이미지">
</div>
</section>
</body>
</html>
--------------------------------------
--------------------------------------
--------------------------------------
***
키포인트는
1.
bottom:0; right:0; 이 상황대응에 있어 더 좋다는거.
2.
그냥 div 로만들어도 되는데
:after 로 도 가능하다는거.
3.
position:absolute 요소는 웬만하면
독립적인 absolute 전용 부모를 만들것.