일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 16637
- 따라하기
- 연산자 끼워넣기
- 인스타
- 6603
- 백준
- 1182
- 색종이 붙이기
- 장고
- 알고리즘
- Java
- 17472
- django
- 부분수열의 합
- 로또
- 14888
- 괄호추가하기
- 재귀
- 9095
- 17136
- 댓글
- 미세먼지 안녕!
- 다리 만들기2
- 14502
- 구슬탈출2
- 좋아요
- 인스타그램
- Ajax
- 17144
- 17143
- Today
- Total
목록따라하기 (4)
Be a developer
한동안 바쁘기도 했고, 다시 이어서 하기도 귀찮았는데, django는 모델 관계 설정이 매우 간편하기 때문에 이어서 글을 쓴다. CRUD를 이용해서 만들려고 했는데, 귀찮아서 그냥 admin으로 댓글을 썼다.. 먼저 models.py에 들어간다. 들어가서 아래와 같이 Comment 클래스를 만들어준다. 중요한 것은 ForeignKey를 이용해서 Post와 일대다 관계를 만들어 주는 것이다. model이 바꼈으니, migrate 해준다. 그리고 CRUD를 구현하기 귀찮아서 admin에 Comment를 등록한 뒤 댓글을 쓰도록 하겠다. html 파일에서 post에 연결된 comment를 보여주기 위해서는 위의 사진과 같이 comment_set.all을 사용하면 된다. 글을 막 써놨지만, 위는 글의 내용이고 ..
먼저 유저가 올리는 글을 저장할 db model이 필요하다. 일단 img 파일을 올릴 필드와 content 필드만 작성하여 post라는 모델을 하나 만들었다. class Post(models.Model): img = models.ImageField(upload_to='images/') content = models.TextField() 지금까지 사용한 css파일이나, image 파일들은 개발자가 개발단계에서 서버에 저장한 파일이다. 이를 static파일이라 한다. 하지만 인스타그램처럼 유저가 올리는 image 파일들은 따로 저장할 경로를 지정해줘야 한다. 이를 media 파일이라 한다. 자세한 설명은 여기서 그리고 image 파일의 관리를 위해서 pillow를 설치해야 한다. 또한 settings.py에..
1 2 3 4 5 6 7 8 9 10 .nav_container{ display: flex; justify-content: space-around; align-items: flex-end; position: fixed; z-index: 1; width: 100%; height: 4rem; border-bottom: 1px solid #efefef; } Colored by Color Scripter cs nav bar를 고정시키기 위해 fixed시키고 z-index를 통해 앞으로 튀어나오게 했다. 그리고 이전에 있떤 margin값과 padding 값 등은 재조정하다보니 없애고, width를 100%로 주었다. 그 결과 background-color와 main div의 위치 조정이 필요할 것 같다. whit..
instagram에 폰트를 적용하겠다. 구글 폰트를 이용하는데, 실제 instagram의 폰트인 billabong는 유료라서 다른 필기체 폰트를 하나 골라서 적용했다. 마음에 드는 폰트 아무거나 적용하면 된다. 폰트를 클릭하면 아래 빨간 박스가 뜬다. 아래와 같은 창이 뜨면 link 태그는 head 태그안에 넣고, font-family 속성은 style 태그 안에 적용하려는 css에 넣는다. 코드는 아래와 같다. 1 2 3 4 5 6 7 8 /*head 태그 안에 넣는다.*/ /*h1 태그에 폰트 적용 */ h1{ display: inline; font-family: 'Dancing Script', cursive; } Colored by Color Scripter cs 그 결과 (검색 창 안에 검색은 p..