혜벌쭉의 퍼블리싱

display: flex속성을 이용해서 간편하게 버튼 정렬하기

See the Pen display-flex by gogiso (@gogiso) on CodePen.

+

신분증 사진

+

신분증 들고있는 본인사진

/*css*/.plus_area{width:100px; height:87px; background-color:#49d094; display:block; border-radius:15px; overflow:hidden; box-shadow: 0px 5px 20px rgba(0,69,191,0.2);}.plus_area p{width:30px; height:30px; background:#8adab2; color:white; font-size:28px; border-radius:50px; text-align:center; line-height:23px; margin:0 auto; margin-top:29px; font-weight:100;}.plus_area>img{width:100%; height:100%; float:left;}#imgInp1,#imgInp2{display:none;}.pic_tt{font-size:10px; color:#5a5a5a; text-align:center; width:100px;}.inline{ float: left; margin-right: 2%;}/*제이쿼리*/ function readURL1(input) { if (input.files && input.files[0]) { if( !(/image/i).test(input.files[0].type ) ){ alert('이미지파일을 선택해주세요.'); return false; } var reader = new FileReader(); reader.onload = function (e) { $('#blah1').attr({ src:e.target.result, style:'display:block' }); } reader.readAsDataURL(input.files[0]); } } function readURL2(input) { if (input.files && input.files[0]) { if( !(/image/i).test(input.files[0].type ) ){ alert('이미지파일을 선택해주세요.'); return false; } var reader = new FileReader(); reader.onload = function (e) { $('#blah2').attr({ src:e.target.result, style:'display:block' }); } reader.readAsDataURL(input.files[0]); } } $("#imgInp1").change(function(){ readURL1(this); }); $("#imgInp2").change(function(){ readURL2(this); });