본문 바로가기

개인 스터디/정리

[Django] Do it 장고+부트스트랩 1~4주차 정리

겨울방학 동안 django 스터디를 위해 책을 샀다.

do it 시리즈

완전 초기 세팅부터 깃허브 커밋까지 자세하게 알려줘서 처음 django를 배울 때 편리한 것 같다.

근데 모르고 초기 세팅을 내가 알던대로 했더니...책이랑 달라서 오히려 불편했다.

배포까지 하게되면 아마 세팅을 다시 한 번 정리해야지 싶다..

더 잘 알게되겠지.


#js+bootstrap

function whatTimeIsIt(){
    alert(new Date())
}

지금 시간을 알려주는 js코드

js는 수업시간에 배웠는데 아직 헷갈린다.

여기서는 간단하게만 배웠지만...간단한 웹사이트는 js를 이용해서만 만들 수 있다는데 신기하다.

 

 

 


#blog/models.py

from django.db import models

class Post(models.Model):
    title=models.CharField(max_length=30)
    content=models.TextField()

    created_at=models.DateTimeField(auto_now_add=True)
    updated_at=models.DateTimeField(auto_now=True)
    #author

    def __str__(self):
        return f'[{self.pk}]{self.title}'

blog의 post 모델.

 

 

 


1~4주차를 진행하면서 느낀 건...웹 디자인이 확실히 어려운 것 같다.

내 웹사이트의 기본 모델은 책의 디자인을 거의 따라한 건데 책에서도 bootstrap페이지를 참고했다고 한다.

평소에 많은 사이트들의 디자인을 참고하고 배우는 것이 중요할 듯 하다.

 

 

 


참고사이트

-부트스트랩 적용 사이트

Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

 

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

-부트스트랩 테마 참고 사이트

Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap

 

Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap

Landing Page A clean, functional landing page theme

startbootstrap.com

책에서는 ctrl+u로 테마 html코드만 참고하였다.

-아이콘 참고 사이트

Set Up Your Account | Font Awesome

 

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

심플하고 예쁜 아이콘 가져오기.

사진을 따로 저장하지 않고 내 secret 코드와 아이콘의 html코드만 입력하면 되니까 편리하다.

<script src="https://kit.fontawesome.com/내secret코드.js" crossorigin="anonymous"></script>