[디버깅] flask로 if문 구현하기, CSS에서 객체 위치 설정

**본 글은 오픈SW프로젝트 수업의 과제용으로 작성된 글임을 참고 부탁드립니다.

 

1. 디버깅 전

 

 우리가 구현한 웹사이트의 차별점 중 하나의 포인트는 바로 식당 별로 비건 메뉴 유무를 알릴 수 있는 '비건 딱지'이다. 학교 주변 음식점들을 타겟으로 하는 웹사이트이고, 학교 주변 식당들 중 비건 식당들도 꽤 많이 있는 편이였기에 비건 딱지를 붙이자는 아이디어를 내게 되었다. 하지만 이제 구현해놓은 화면을 백엔드와 연결을 하는 과정에서 비건 딱지를 선택적으로 붙이는 것을 구현해야 되었다. 

 

   기존 디버깅 전 화면의 모습이다. 화면을 본다면 치즈김치전을 파는 너스레라는 식당이 비건 식당이라고 되어있다 (...) 

 

 

2. 디버깅 내용

   맛집을 등록할 때부터 해당 맛집에 비건 메뉴가 있는지 유무를 사용자에게 입력 받았고, 그 데이터가 데이터베이스에 저장이 되었다. 데이터베이스에 저장을 할 때는 "논비건" 혹은 "비건" 이런식으로 저장이 된 상황!

   이 내용을 구현하기 위해서 어떤 코드를 작성하는 것이 좋을지 고민이 되었다. 자바스크립트 파일을 따로 작성을 해서 선택적으로 비건 딱지를 붙여볼 수도 있었지만, flask 문법을 html 파일에 작성해보기로 하였다. 데이터베이스에 저장되어있는 변수 값들을 활용하기 위해서 flask 코드를 html에 적용을 했던 사례가 있었기에 가독성과 통일성을 위해 flask 코드를 활용하기로 결심하였다. 

   그리고 추가적으로 이를 구현하면서 필요한 비건 딱지와 관련된 CSS 코드도 수정을 했다. 

   

작성한 코드의 내용은 아래와 같다.

        {% if datas[data]['vegan']|length == 2 %}
        <div class="card-vegan">
          <img
           class="vegan-pic"
           src="/static/vegan.png"
           alt="vegan-sticker1"
          />
        </div>
        {% else %} {% endif %}

1) 조건문 활용해 선택적으로 비건 딱지 붙이기 - flask if 문 활용하기

 

   '맛집을 입력받을 때는 이런 식으로 비건 유무를 받았고 이게 그 입력값인데 이 조건에서는 비건 딱지가 보여요~~'

 

   구현해야 될 부분을 한 마디로 정리를 하면 이렇게 된다. 하지만 돌이켜보면 처음에 DB에 저장되어있는 값을 불러오는 것 만으로도 힘들었다😂 그래도 어찌저찌 잘 해냈다.. 

   우선 위에 제시된 코드 영역에서 {% %} 부분으로 묶여있는 코드들이 flask 문법이 활용되어 작성된 코드이다. if문을 작성을 하고 싶을 때는 {% if 조건 %} ... {%  else %} ... {% endif %} 식으로 작성을 해야한다. 조금 특이한 점은, 마지막에 {% endif %} 로 코드를 닫아줘야 한다는 점이다. (이건 리눅스 상에서 사용하는 조건문 양식과 비슷한 것 같다..!)

<!-- flask 에서 if문 구현하기 -->
{% if site == 'web' %}
  <span>web</span>
{% elif site == 'is' %}
  <span>is</span>
{% else %}
  <span>com</span>
{% endif %}

 

  이때, DB에 저장되어있는 맛집 관련 데이터 중 비건 데이터를 접근을 해줘야 한다. 그러기 위해서 백엔드 부분에서 구현한 코드 중 맛집을 입력 받을 때 내용들이 저장되어있는 datas 변수 중 data에 접근을 하고, 그 중 vegan 관련 데이터에 접근을 한다. 이를 통해 맛집 등록을 했을 당시 입력했던 비건 메뉴 유무 값을 얻을 수 있다. 

  그 이후 입력값인 "비건"과 "논비건"을 구분해주는 과정이 필요했다. 사실 이 구분을 해주는 과정을 어떤 식으로 할지 고민이 많았다. 어떤 식으로 조건을 써줘야 간단하지만 직관적으로 코드를 작성할 수 있을까..! 라고 생각을 했고 그냥 불러온 데이터 값의 길이가 2, 즉, "비건"이라면 비건 딱지를 붙여주는 식으로 조건을 추가해줬다👍 if문에서 else에 해당하는 경우, 즉, "논비건"인 경우에는 아무 일도 일어나지 않으므로 공란으로 남겨주었다. 

 

2) 비건 딱지 위치 변화 - relative, absolute, top, bottom, transform&translate 

 

  디버깅 전에도 비건 딱지의 위치를 본다면 카드 왼쪽 상단에 자리잡고 있는 것을 볼 수 있다. 하지만 당시 마감에 쫒겨 급하게 구현을 한 부분이 있었고, 카드 상 비건 딱지의 위치를 설정해줄 때 코드 부분이 수정이 필요했다. 그래서 수정을 끝낸 CSS 코드는 아래와 같다!

.card{
    position: relative;
    text-align: center;
    border-radius: 15px;
    padding: 35px 25px;
    margin-top: 20px;
    margin-bottom: 10px;
    width:15.5vw;
    height:25vh;
    color: #3B3838;
}

.vegan-pic{
    width: 60px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

    코드 설명을 조금 덧붙이자면, vegan-pic (비건 딱지 이미지)은 card 클래스 내부에 위치를 하고 있다. 이 때, card의 위치를 relative로 설정을 해준다면 absolute로 위치 설정이 된 vegan-pic 클래스 이미지는 card를 기준으로 위치를 설정할 수 있게 된다. card 왼쪽 상단에 비건 딱지를 옮겨줘야 하므로 CSS 코드에서 top과 left 부분의 값을 0으로 세팅한다. 이렇게 되면 여백 없이 카드 왼쪽 상단에 딱지가 위치한다. 여기서 끝난 건 아니고, 우리가 원하는 건 비건 딱지가 이름 그대로 카드 상단 부분에 걸쳐있는 형태를 원한다. 이를 위해 transform: translate(-50%, -50%); 코드를 작성해준다. 이를 통해 현재 위치를 기준으로 상단으로 옮겨간 비건 딱지의 모습을 구현할 수 있다. 

 

3. 디버깅 후

 

   디버깅 후 화면 모습이다. 의도한대로 잘 구현이 된 것을 볼 수 있다😎 정말 비건 메뉴가 존재하는 맛집에만 비건 딱지가 붙어있고, 비건 딱지의 위치도 카드 왼쪽 상단에 잘 위치해있다!!