파이썬 웹 프로그래밍 :: html/CSS 스타일, 소개 페이지 제작(3)_TIL#03

■ JITHub 개발일지(TIL : Today I Learned) 3일차

---

□  TIL ::

     HTML/CSS/Javascript/Jquery/Ajax/Flask/MongoDB/...

1. 회원정보 수정/삭제 기능 구현

    (1) 회원정보를 로그인하여 관리하지 않고, 비로그인 방식으로 회원정보를 관리하고자 함

          아래와 같이 멤버 등록되어 관리되는 회원 카드는 2열로 나열된다.

          각 멤버 사진 아래에는 '정보 수정', '정보 삭제' 버튼을 구성했고 각각 누르면,

          아래와 같이 모달 창이 뜨며 패스워드를 요구하고, 유효성 확인 후 DB에서 삭제하는 것이 기능의 목적이다.

          모달은 부트스트랩의 소스를 활용했다.

<!-- Modal -->
<div class="modal fade" id="staticBackdrop_1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">정보 수정</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p style="margin: auto">멤버 정보를 수정하시겠습니까?</p>
        <div class="form-floating">
          <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
          <label for="floatingPassword">Password</label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
        <button type="button" class="btn btn-primary" onclick="location.href = 'http://j-it-hub.shop/edit'">정보 수정</button>
      </div>
    </div>
  </div>
</div>
<button type="button" id="btn_delete"
        class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop_2">정보 삭제
</button>

          그러나 현시점에서는 아직 정보를 수정하고 삭제하는 동작까지는 구현하지 못하고 있다.

          구글링을 해보면 스프링이나 swal(sweet alert) 등을 활용해서 구현하는 것으로 확인되는데,

          아직까지 숙제로 남아있다. 이번 기회에 이부분은 공부하면서 해결해보고 싶다.

 

2. 간단한 토글기능 구현

    (1) 팀 소개 페이지에 팀 이름 유래에 대한 내용을 부트스트랩에서 제공하는 토글기능을 활용해 구현했다.

          토글 기능의 코드는 생각보다 간단했다.

<details>
	<summary>
    	여기에는 위쪽에 들어갈 제목이 들어갑니다.
    </summary>
    여기에는 토글 아래에 표시될 내용이 들어갑니다.
</details>

         ▶ 카이? 구피? 문구를 선택하면 아래와 같이 펼쳐지는 기능

 

<!-- 카이? 구피? 토글 기능  -->
<details>
    <summary style="font-size: 40px; font-family: 'Gamja Flower'; color:rgb(121, 117, 255)">
        카이? 구피?
    </summary>
    <div class="accordion-body">
        <div class="accordion-body_1">
            <img src="{{ url_for('static', filename='images/kai.jpg') }}" width="200" height="200">
            <div style="padding-left: 50px; padding-bottom: 50px">
                <p style="font-size: 25px"> 장미님의 고양이 카이</p>
                <p style="font-size: 15px"> 이름 : 카이</p>
                <p style="font-size: 15px"> 나이 : 6세</p>
                <p style="font-size: 15px"> 취미 : 참견하기</p>
            </div>
        </div>
        <div class="accordion-body_2">
            <img src="{{ url_for('static', filename='images/guppy.jpg') }}" width="200" height="200">
            <div style="padding-left: 50px; padding-bottom: 50px">
                <p style="font-size: 25px"> 진님의 구피 20마리</p>
                <p style="font-size: 15px"> 이름 : 많아서 일일이 안정함</p>
                <p style="font-size: 15px"> 나이 : 6개월</p>
                <p style="font-size: 15px"> 취미 : 놀기, 먹기, 아무거나 쪼기</p>
            </div>
        </div>
    </div>
</details>

 

3. 미니 프로젝트 발표회 진행

    (1) 다양한 팀들이 좋은 아이디어와 새로운 코딩기술로 웹을 짜왔다.

         클론 코딩부터, 다양한 자바스크립트 기술들... (*화면이 회전문처럼 돌아가는 것도 있었다..)

         너무 잘한다..

 

4. 앞으로 챙겨볼 유용한 사이트

    - VS Code 테마 추천

    - 절대주소 vs 상대주소 개념 정확히 이해하기

    - CSS: href 속성, src 속성 절대경로, 상대경로

    - html의 태그란? 자주 사용하는 태그들이 어떤게 있는지 살펴보고 이번 프로젝트에 적합한 태그들 사용하기

    - css란? html을 꾸며주기 위해 css를 이용하는 방법을 익히기

    - bootstrap란? css로 꾸미는 것이 너무 복잡해서 트위터에서 만들어준 라이브러리

    - Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

    - 모바일과 태블릿에 볼때 형태가 바뀌는 grid 기능

    - [Bootstrap] 부트스트랩의 그리드 시스템을 쉽게 사용하는 방법

    - Javascript의 용도

    - 심화기능 참고 : 노션 링크

    - [TIPS] VScode 확장프로그램 Live Share

 

---

■ TIT :: Today I thought

         갈길이 멀었지만 기죽지 않아야 한다.

         세상에 코딩정보는 너무 많고, 나에게 맞고 잘 작동하는 좋은 코드들을 찾아나가야겠다.

         개발자는 계속 공부해야 한다던데.. 처음부터 너무 완벽함을 추구하면 지칠것같다

         차근차근 하나하나 소화하고 꾸준히 해야겠다.