My Profile Photo

DongChanS's blog

수학과 학생의 개발일지

• on html&css, bootstrap, flask, flex

CSS Flex + Flask에 적용하기


CSS FLEX

예를들어 3그리드 자료를 가운데정렬을 하고 싶은데,

그러면 12그리드 중에서 9그리드를 나눠야하므로 4.5 4.5그리드를 배치해야하는데

부트스트랩에서는 4.5그리드같은 기능은 지원하지 않는다. 이럴 때 효과적인 정렬을 위해 FLEX를 사용함.

일단 flex라는 개념을 CSS에서 자체적으로 지원하는데 게임을 통해서 CSS의 flex에 대해서 알아보도록 합시다.


justify-content : 가로축 정렬

  • flex-start, flex-end: 왼쪽, 오른쪽
  • center: 가운데정렬
  • space-between : 요소들 사이의 거리를 동일하게 만들어서 정렬!2_
  • space-around : 요소들 사이의 margin을 동일하게 만들어서 정렬!1_

align-itmes : 세로축정렬 (자매품 align-self, align-contents)

  • flex-start,flex-and,center
  • baseline : 컨테이너의 시작위치에 정렬

flew-wrap: 여러줄로 정렬 = wrap // 여러줄로 반대로 정렬 = wrap-reverse

flex-direction : 정렬해야할 방향을 지정함

  • row(->), row-reverse(<-), column(down), column-reverse(up)
  • reverse : start,end 개념이 바뀜.
  • column : justify-conetnt, align-itmes 개념이 바뀜
  • flex-flow : (flex-direction) (flex-wrap) 한번에 사용


BOOTSTRAP에서 FLEX사용하기

https://www.w3schools.com/bootstrap4/bootstrap_flex.asp

부트스트랩에서는 클래스를 통해서 flex css style의 파라미터를 지정하는듯한 행위를 할 수 있다.

  1. d-flex 클래스 : 커다란 flex box를 만들기 = box를 flex화 하겠다!
  2. justify-content : start, end, between, end로 간소화
  3. align-content는 컨텐츠를 배열하는 방식이라고 생각하는게 편함. 세로방향으로 개별적으로 처리하고싶으면 align-items를 사용하자.
  4. align-itmes는 flex-box를 기준으로 세로정렬하므로 틀의 세로크기를 높게 만들어야 세로정렬하는게 의미가 있다.

(예시)

<div class="container-fluid px-0"> 
    <div class="vh-100 d-flex align-items-center p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>

왜냐하면 container-fluid라는 설정 자체가 box사이즈를 새로 설정하기때문에 위에서 vh-100을 상속한다고 해도 먹히지 않는다. 따라서, container 밑에 vh-100클래스를 상속해서 align-items-center로 상속한다면 원하는 결과가 나올 것이다.

4_


Flask로 Giphy 구현하기

Giphy : 이미지들의 저장소

  1. Giphy를 흉내낸 홈사이트 (상단 검색바 + 인기있는 사진들 모음)
  2. Giphy를 흉내낸 검색결과사이트(검색어에 대한 사진들 모음)

-> Giphy API를 활용해서 사진을 받아올 수 있다.

  • 모듈 구성

    1. giphy api를 이용해서 파일의 정보를 가져오는 giphy.py
    2. giphy를 임포트해서 결과물을 참고해 플라스크 서버를 만드는 app.py
    3. 최초 검색창 역할을 하는 index.html
    4. 검색결과창 역할을 하는 search.html

  • 해야할 것

    1. 검색창 만들기 (Bootstrap form : Overview 참고)

      <div class="row">
    <div class="col-2"></div>
    <div class="col-8">
        <form action="/search" method="POST">
            <div class="form-group d-flex justify-content-center">
                <input name="query" type="text" class="form-control mt-2 d-inline" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Query">
                <button type="submit" class="btn btn-primary d-inline">Submit</button>
            </div>
        </form>
    </div>
    <div class="col-2"></div>
</div>

      • 그리드 시스템을 이용해서 적절한 검색창의 길이를 유지하면서, flex를 통해서 가운데정렬을 하였다.

      • 공개된 코드는 Submit 버튼이 밑으로 향하는데, 이는 from-control 클래스가 display:block 기능을 가지고 있기 때문이다.

        기본적으로 CSS는 바로 뒤에 오는 원소에 대한 공간을 남겨놓는데, display:block 기능은 다음에 오는 원소를 무조건 밑으로 밀어내버리는 기능을 함.

      • 이러한 기능을 없애기 위해서, display:inline (d-inline 클래스)를 뒤에 선언함으로써 없앨 수 있다.

    2. 트렌딩사진 이어붙이기 Trending API Bootstrap Card 참고함.

           
<div class="row">
    {% for trending in trendings %}
        <div class="card col-3 border border-dark" style="width: 18rem;">
          <img class="card-img-top" src={{trending[0]}} alt="Card image cap">
          <div class="card-body border border-dark">
            <h5 class="card-title">{{trending[2]}}</h5>
            <p class="card-text">{{trending[1]}}</p>
          </div>
        </div>  
    {% endfor %}
</div>

      (결과물)

      5_

    3. 결과사진 이어붙이기

           
<div class="row">
    {% for five_images in images %}
        <div class="d-flex justify-content-center" style="height:15em;">
        {% for url in five_images %}
        <img src="{{url}}" class="col-2 border border-dark py-2 m-2 bg-light">
        {% endfor %}
        </div>
    {% endfor %}
</div>

      => 사진이 다닥다닥 붙어있으면 어지러우니까 margin을 부여하였다.

      한 줄마다 크기가 고정된 5개의 사진을 넣고 싶어서 col-2를 넣고 image들을 5개씩 가져와서 가로정렬하였다.

      (결과물)

      6_ FLEX와 Bootstrap을 이용하니 더 보기 괜찮아졌다.

      원본코드 저장소 : https://github.com/DongChanS/c9-giphy


Bootstrap 예시 가져올때 주의해야할 점

7_

매우 잘 되어있는 예시가 많아서 작업시간을 줄이기가 용이한데, 이것들도 그냥 소스보기 해서 들고오면 된다.

그런데, 주의해야할 점은 custom style을 설정해뒀기 때문에 이것들을 고려하고 커스터마이징 해야한다.


HTML 상속

알다시피 하나의 URL에 하나의 HTML파일이 소모되는데,

이런식으로 긴 HTML파일들을 연이어 작성하다가는 복잡도를 감당할 수가 없다.

이 문제점을 해결해줄 수 있는 좋은 기능이 HTML 상속이다.


진자를 이용해서 html을 상속받을 수 있는데, 방식은 하나의 큰 템플릿에다가 변화되는 부분만 렌더하는식이다.

  • 첫번째, 하나의 큰 템플릿(layout.html)을 만든다

    -> layout.html에는 공통적인 부분(ex, 헤더부분)을 배치해놓고, 페이지마다 달라지는 부분에는 구멍을 뚫어 놓는다.

  • 구멍 = (% block 이름 %) (% endblock %) 의 형식으로 만들어 놓는다.

    구멍이 여러개이기때문에 각각 구멍마다 이름을 다르게 만들어야한다.

    (만약 같게 만든다면 이것도 overriding이 되므로 나중에 상속된것만 유효함)

  • 그리고 이 layout.html을 사용하기 위해서는 가장 위에 (% extends ‘layout.html’ %) 을 통해서 layout.html 페이지를 상속받는다.

  • 참고로 중복으로 상속받는 것은 허용되지 않는데, 이것을 극복하기 위해서 (% include ‘footer.html’ %) 과 같이 변하지 않는 html파일을 구멍을 뚫지 않고 가져올 수 있다.

-> 이러한 상속을 통해서 html파일을 경제적으로 보유할 수 있다.

상속을 쓴 경우와 쓰지 않은 경우를 비교하기 위해 https://github.com/DongChanS/c9-giphy 의 extends branch에 따로 작성하였습니다.


파이썬 꿀팁

  • 모듈화, 디자인패턴

    • 하나의 기능마다 하나의 함수를 쓰는편
    • 가독성이 좋게 신경쓰기(무리하게 list comprehension 쓰면 별로 안좋음)

  • python naming convention

    • 변수명은 snake case(_를 기준으로 단어나눔)

    • 함수, 클래스명은 cammel case(대문자를 기준으로 단어나눔)

      특히나 클래스는 snake case로는 선언불가능함.

  • html은 껍데기코드를 빠르게 생성가능하다.

    • 태그.클래스.클래스*개수
    • 태그>태그.클래스*개수
    • 태그를 지정하지않으면 기본값은 div
comments powered by Disqus