CSS 코드 구조 짜기-실습

Suji Park·2022년 5월 22일
0
post-thumbnail

실습 1

추가하기 버튼을 눌렀을 때
1. '날짜' input 창의 입력 값을 가져와서
2. 그것을 아이디로 하는 div에
3. '추가할 내용' input창의 입력 값을
4. 1일 밑에 써주시면 돼요.

힌트
저번에 배웠던 JQuery의 append 함수를 활용해봅시다.
저번에 배웠던 결합자 네 가지 중 하나를 써야 할 겁니다ㅎㅎ

	
<html>
 <head>
  <style>
   .card > div {
    margin-right: 10px;
    width: 200px;
    height: 200px;
    background-color: gray;
   }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
 
  <script>
   function a(){
    $( "#" + $( "#my_date" ).val() + " > div" ).append( "<br><br>" + $( "#my_input" ).val() );
   }
  </script>
 </head>
 <body>
  <input id="my_date" value="날짜">
  <br>
  <input id="my_input" value="추가할 내용">
  <br><br>
 
  <button type="button" onclick="a();">추가하기</button>
  <br><br>
  <div class="container">
   <div class="card" id="1">
    <div>1일</div>
   </div>
   <div class="card" id="2">
    <div>2일</div>
   </div>
  </div>
 </div>
profile
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵

0개의 댓글