연락하기 & 비전 페이지 완성 (프로젝트 완성도 99%)

#서두

안녕하세요 모닝버드입니다. 예스인테리어 페이지를 만들기로 마음먹고 시작한지 한달이 조금 넘었습니다. 이 프로젝트에 올인을 했다면 조금더 빨리 끝마쳤을 수도 있었겠지만 월~금 풀타임 알바를 겸하다보니 그렇게 힘든 기능들이 없는데도 불구하고 시간이 꽤 걸렸네요. 연락하기 페이지는 몇일 전에 완성했고, 비전 페이지는 오늘 막 끝마쳤습니다. 이 두기능을 마무리하며, 저의 첫 프로젝트인 예스인테리어 페이지가 99%는 완성되었다 볼 수 있을 것 같습니다. 

#본론

1. 연락하기 페이지

첫 번째 박스 'Naver Cafe'는 기존에 아버지가 운영중이신 네이버 카페인 '전목수의 인테리어 사랑방' 으로 링크됩니다. 두번째 박스 'E-mail'은 html 태그의 mailto 속성을 이용해 outlook express의 메일창이 뜨게 하였습니다. 

* 꿀Tip : mailto 태그 사용법

메일보내기!

2. 비전 페이지 

- vision.html (비전 페이지)

- main.html (메인 페이지의 article)

예스 인테리어의 비전 콘텐츠는 페이지의 중요한 메세지인 만큼 메인화면과 비전페이지 두 곳 모두에서 노출되도록 했습니다. 디자인은 고급스럽게 잘 하진 못했지만, 포토샵으로 직접 끄적거리며 만들어 보았습니다.

3. 메인페이지의 첫번째 articleBox - Portfolio부분 (두번째 articleBox는 Vision)

메인페이지의 첫번째 article 부분도 완성했습니다. 원래 포트폴리오 기능을 개발하면서 같이 해줘야 하는 부분이었지만 조금 늦어졌네요. 포트폴리오 페이지에서는 게시판형식으로 10줄씩 뿌려지면서 하단에 페이지네이션이 작동하여, 예스인테리어 페이지에 올린 모든 포트폴리오 콘텐츠를 볼 수 있었습니다. 하지만 메이페이지에서의 포트폴리오 article은 조금 다릅니다. 메인페이지에서 모든 포트폴리오 콘텐츠를 보여주려하면 기나 긴 스크롤이 발생할 것입니다. 그래서 그것을 방지하기 위하여, 가장 최근에 올린 6개의 포트폴리오 콘텐츠가 업데이트 되어 뿌려지게하였습니다. 

- 최근에 올린 6개의 포트폴리오 콘텐츠가 업데이트 되어 뿌려지게하는 코드 (장고 템플릿 태그 사용)

            
Portfolio
            {% for item in object_list|slice:":6" %}
            

              
                {% for photo in item.portfolioimg_set.all|slice:":1" %}
                
                {% endfor %}
                

                  
{{ item.name }}
                  
{{ item.description|truncatewords:10 }}
                

              
            
            {% endfor %}
        

4. Yes Interior 페이지 _완성된 모습

5. 관리자 페이지 (포트폴리오 페이지에 대한 자세한 설명)