텍스트 합성 사이트 프로젝트 <4

활동 후기/텍스트 합성 사이트 프로젝트

텍스트 합성 사이트 프로젝트 <4 - 사진 추가 및 링크>

문과 해달 2021. 9. 7. 02:08

분명 처음 시작할 때 일주일 정도 안에 빡빡하게 하고 끝내려 했던 토이 프로젝트인데,

마지막 글을 쓴지 거의 한 달이 되어서야 다시 글을 쓰고 있다...

역시 흥미가 떨어지기 전에 빡세게 해둬야지 안그러면 늘어지는 것같다.

그래도 조금씩 진행을 해두었고, 개강 후 널널한 첫 주차에는 끝내야지라는 일념으로

95% 이상은 완성한 것 같다.

먼저 지난 포스트까지의 진행 상황은 사진과 같다. 사진 정보를 모델로 구성해 클래스화한 후에, 세 번째 사진까지 구현을 했다. 그리고 사진의 수를 좀 더 늘리고 더 복잡한 표현을 해보기로 했었다.

그에 따라 먼저 세 번째 사진에서 여러 줄 표현을 시도했다.

위 사진이 광고판이라기엔 너무 위아래가 휑해보였기 때문이다.

기본적으로 같은 원리로 그려주면 되지만 input을 하나 더 받아야 하고, 적절히 아래의 위치에 글씨를 그려줘야 하고

다른 사진에서는 input필드를 적절히 숨겨줘야만 했다. 뭐 시간만 들이면 할 수 있는 작업이었지만, 기울기를 두어 그려야하는 사진이라 두 줄을 그리면 글자 길이에 따라 어색한 케이스가 많아 힘들었다. input 숨기기의 경우 id값으로 분기를 해 아닐 경우 visibility를 바꾸어 숨겨주었다.

        const id = '{{info.id}}';
        if (id == 3) {
            document.querySelector('.text2').style.visibility = 'visible';
        }
        if (id == 3) {
                    fsize = start_size;
                    let text2 = document.querySelector('.text2').value;
                    while (true) {
                        cont.font = fsize + 'pt ' + font_family;

                        if (cont.measureText(text2).width < max_width) break
                        else fsize -= 1;
                    }
                    
                    cont.globalAlpha = alpha;
                    cont.rotate(Math.PI/rotate);
                    cont.fillText(text2,parseInt(posx)+32,parseInt(posy)+130); 
                    cont.globalAlpha = 1;
                    cont.rotate(-Math.PI/rotate);
                }

따라 이런 형태로 두 줄 적기를 완성할 수 있었다.

이후에는 네 번째, 다섯 번째 사진을 만들었다. 과정은 거의 같으니 생략하였다.

아마 이 정도 만든 후에 프로젝트가 한 2주간 방치되었던 것 같다. 따라서 사진 종류는 이 정도로 만족하고 나머지 구색을 맞추기로 했다.

첫 째로 각 사진들, 즉 url들을 넘어다닐 링크가 필요했다. 가장 처음 구상할 때는 스크롤이 가능한 사이드바 형태를 기획했는데, 그 정도로 사진 종류가 많지도 않았고 한 스크롤안에 전체 페이지가 들어오니 약간 허전할 것 같아,

하단에 썸네일들을 배열하는 형태로 바꾸게 되었다.

이번 프로젝트의 목표 중 하나가 부트스트랩의 사용이라 부트스트랩을 사용하여 썸네일과 내비게이션 바를 가져왔다.

기존에 한번도 사용해 본적이 없어, 이것저것 많이 찾아본 것 같다. 가장 편리한 사용법은 cdn을 쓰는 것인 듯 하다.

이후에 html 상에서 class를 적절하게 주면 그에 따라 css가 반영된다. 구조는 부트스트랩의 Documentation에서 가져올 수 있다. 그리고 위에 제목을 달아주어 각 사진들의 썸네일들을 완성했다.

<div class="row">
            <div class="col-sm-3 col-xs-6">
                <p>1. Picket</p>
                <div class="thumbnail">
                  <a href="{%url 'home' 1 %}"><img src="/static/picket.jpg" alt="..."></a>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <p>2. Blackboard</p>
                <div class="thumbnail">
                  <a href="{%url 'home' 2 %}"><img src="/static/blackboard.jpg" alt="..."></a>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <p>3. Sign</p>
                <div class="thumbnail">
                  <a href="{%url 'home' 3 %}"><img src="/static/sign.jpg" alt="..."></a>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <p>4. Namecard</p>
                <div class="thumbnail">
                  <a href="{%url 'home' 4 %}"><img src="/static/nametag.jpg" alt="..."></a>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <p>5. Box</p>
                <div class="thumbnail">
                  <a href="{%url 'home' 5 %}"><img src="/static/box.jpg" alt="..."></a>
                </div>
            </div>
            
        </div>

class 명에 두개의 사이즈(col-sm-3 col-xs-6)가 들어가는데 이게 어떻게 반영되는 건지 찾아봐도 잘 안나왔다.

혼자 이것저것 바꿔본 결과, 최대크기와 최소크기를 정해주는 것 같다. xs,sm,md 등의 사이즈들에 1~12의 호수가 있다.

필요에 따라 바꿔주면 되는 듯 하다. href와 src에 각각 적절한 값을 주었다.

#views.py
def start(request):
    return redirect('home', 1)
    
#urls.py
urlpatterns = [
    path('admin/', admin.site.urls),
    path('<int:id>', views.home, name="home"),
    path('', views.start, name="start"), #여기
]

url 작업을 한 김에 이 사이트에는 home이 따로 없어 뒤에 아무것도 붙지않은 기본 url일 때 페이지가 존재하지 않았다.

따라 이럴 때 views.py와 urls.py에서 1번 사진으로 redirect해주었다.

이제 디자인은 상관없이 기능은 다 할 수 있게 되었다. 다음 포스트에서 디자인 내용을 마저 올리려 한다.