IT Dev Log

Django - 12. 검색 기능(Search) 구현하기 검색기능 구현하기 : 검색기능은 하나의 앱으로 분리해서 개발한다. 새로운 앱을 위해서 templates 폴더를 만들고, settings.py 에 app을 등록하고, templates 폴더를 추가한다. shop > templates > shop > navbar.html 의 search form을 다음과 같이 수정한다. csrf_token 은 ?? search_app > views.py search.html 템플릿 만들기 표시된 부분은 category 템플릿에서 복사해서 사용한다. urls.py 만들기 ( 새로 만들기 ) 프로젝트 urls.py 에 search_app.urls 을 등록한다. 다시 shop > navbar.html 에서 form에 대한 ..

Django - 11. 페이지 만들기(paginator) Paginator 란? 여러개의 아이템을 페이지 단위로 관라하는 툴.. 카테고리 페이지에 보여지는 제품을 페이지 단위로 변경해서 화면에 표시한다. 한화면에 최대 6개의 아이템까지 표시하도록 설정한다. 다음은 category 템플릿을 수정한다. 서버를 다시 구동하고 카테고리페이지를 확인한다. 만일 제품의 수가 6개미만인 경우, 아래쪽에 있는 페이지 버튼은 보이지 않게 된다. 끝..

Django - 10. Fontawesome 5 구현하기 Fontawesome 5이란? font 와 icon 툴킷 기반의 css 라고 생각하면된다. fontawesome.com 에서 툴킷을 다운로드 받는다. "Start for Free" 클릭하고 들어가면 아이콘을 다운로드 받을수 있다. 다운로드 받은 파일에서 fontawesome-all.min.css 을 static/css/ 폴더에 복사해 넣는다. 다음은 webfonts 폴더 전체를 복사해서 static 폴더 아래로 복사한다. 터미널로 돌아와서 python manage.py collectstatic 명령어를 통해서 모든 static 파일을 한번 정리(?)한다. 프로젝트 파일로 돌아와서 base.html 코드에 조금전에 다운로드 받은 fontawesome..

Django - 9. 제품 페이지 디자인하기 product.html 을 가지고 작업한다. 다음은 작업전 화면이다. 첫번째 작업. 네비게이션 다음 클래스를 적용한다. 그리고 my_prod_row_class 를 custom.css 에서 지정한다. 이렇게 화면이 바뀌는 것을 볼수있다. 다음은 제품 / 이미지 / 간단 설명 ....부분에 대한 스타일 적용 코드를 수정한 부분은 다음과 같다. 일부 스타일 적용 style 추가 Next, NEXT, NEXT, 제품 설명에 대한 스타일을 조금더 변경한다. 수정할 부분을 클래스로 지정하고 시작한다. Next, Add to Cart 에 스타일 적용 이렇게 부트스트랩을 이용해서 만들면 responsive 웹을 구현할수 있다. 끝..

Django - 8. 카테고리 페이지 디자인하기 카테고리 페이지 중에서 breadcrumb navigation 을 부트스트랩을 이용해서 다시 디자인한다. breadcrumb navigation 부트스트랩을 적용하기 위해서 다음과 같은 클래스를 추가해준다. 그리고 custom.css 에 각 클래스에 대한 부분을 지정해 주면된다. 다음은 배너, H1, 카테고리 이름/ 설명 스타일을 적용할 클래스 지정 각 클래스에 대한 스타일 작성한다. 변경후 화면 이미지 > 다음은 카테고리 정보 없이 회사의 배너를 보여주는 경우. 스타일 정의 할 부분에 클래스 명 지정 custom.css 에 추가한 클래스의 스타일 지정 브라우저에서 결과 확인 카테고리에 있는 제품 스타일링. 화면 보기 부트스트랩 사이트로 가서 Get Sta..

Django - 7. 장고에서 부트스트랩 4 사용하기 이제 장고에 부트스트랩을 적용해보자. 먼저 부트스트랩 getbootstrap.com 접속해서 Documentation 클릭한다. Documentation > starter template 에서 viewport 부분을 복사해서 base.html 에 적용한다. 다음은 bootstrap 4.0 소스를 열어서 모든 내용복사해 새로운 파일을 장고 프로젝트에 생성한다. 그리고 bootstrap 파일을 base.html 에 link 추가해준다. css 폴더에 custom.css 파일(empty file) 을 하나 생성하고 link 에 추가한다. 위쪽에 있는 css 파일이 우선 순위를 가지고 있다. 따라서 custom.css 를 위쪽 라인에 배치한다. css 파일과..

크레마 사운드업에 리디북스 설치 얼마전 한국에서 크레마 사운드업을 구매해왔다. 한가지 문제가 리디북스에서 이미 구매한 책들을 읽을수 없다는게 아쉬웠다. 그래서 검색해보니 크레마에는 다른 앱도 설치가 가능하다고 하네요. 리디북스를 한번 설치하려고 합니다. 먼저. 리디북스 설치앱 다운로드. 구글을 통해서 "리디북스 apk" 검색해보니 가장먼저 ridibooks 에서 제공하는 apk 이 보이네요. 오호.. 클릭하고 들어가서 apk 다운로드 하면됩니다. 세번째 APK 파일로 다운로드. 생각보다 옵션들이 많네요.. ebook용이라 E-Ink.apk 이름을 가지고 있는 파일 다운로드.. 이렇게 다운로드 받은 apk 을 크레마를 usb로 연결하고 루트에 복사해 넣으면 됩니다. "+" 버튼을 누르면 조금전에 받았던 리..

Angular 앱- 16. Angular API angular 에 관해 더 많은 정보가 필요하면 angularJS 공식 사이트에 확인할 수 있다. AngularJS API .. 끝.

Angular 앱- 15. 웹사이트 responsive 만들기 responsive란? 화면 사이즈에 맞게 웹사이트가 변경되도록 구성하는 것이다. 화면이 넓으면 화면 사이즈에 맞는 크기에 버튼과 배치가 되고, 모바일은 모바일 기기에 맞게 적용되는 화면 구성을 말한다. 모바일 스크린 사이즈에 맞게 CSS 값을 조정한다. 모바일 환경에 맞게 화면뷰가 변경된 것을 확인 끝..

Angular 앱- 14. 퀴즈 결과 share 하기 퀴즈 결과 공유하는 기능을 구현한다. ng-bind-html 기능을 사용해서 javascript 로 만들수 있다. 자바스크립트 추가 기존에 사용하던 icon 삭제 이메일로 공유하기 트위터로 공유하기 모든 테스트가 끝났으면 테스트 용을 만들어둔 result 영역을 삭제한다. 그러면 모든 문제가 끝나면 결과를 보여준다.