글

라벨이 HTML과CSS인 게시물 표시

input 태그 type="file" multiple 화면에 이미지 뿌려주기

-
먼저 HTML 코드이다. CSS는 Bootstrap을 사용했다. Bootstrap은 CDN을 통해 임포트를 해준다. <link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" > <div class="row"> <div class="col-25"> <label for="pic">근무지 사진</label> </div> <div class="col-75"> <div> <input type="file" id="input_imgs" multiple name="files[]" maxlength="3"/> </div> <div> <div class="imgs_wrap"> </div> </div> 그다음 javascript와 jQuery jQuery또한 CDN을 통해서 임포트 해준다. 아래의 코드는 input태그의 변화가 생겼을 때, 즉 이미지를 업로드 할 경우에, handleImgsFilesSelect라는 함수가 실행되도록 짜여졌다. handleImgsFilesSelect함수는 input태그에서 업로드된 사진을 a태그와 img태그로 구성된 조합의 태그에서 img 태그 src 안에 넣고 imgs_wrap클래스의 div 태그에 append 처리를 해주는 함수이다. 그리고 a태그의 href 속성에 deleteImageAction()함수를 실행시키도록 처리를 해놓았다. <script  src=...
댓글 쓰기
자세한 내용 보기

기초적인 html form태그 회원가입폼 table에 넣어서

-
이미지
<html> <head>   <title>form태그 input태그</title>    </head> <style>  table{    text-align: center;  }  td{    width: 300px;    height: 100px;    border: 5px solid;  } </style> <body>   <center> <h1> 회원가입</h1> <form>     <table> <tr>     <td>First Name:</td>     <td><input name="firstname" type="text" value="first name" /><br /></td>   </tr> <tr>     <td>Last Nane:</td>     <td><input name="lastname" type="text" /> </td>   </tr> <tr> <td> id :</td>     <td><input maxlength="10" name="id" type="text" /><br /></td>   </tr> <tr>     <td...
댓글 2개
자세한 내용 보기