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..

제대로 나눈 건지는 모르겠지만, 기능별로 하나의 글을 나눠보면 5개 정도의 part로 나눌 수 있을 것 같다. 그래서 아래와 같이 5개 part로 나누었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 cs 아이콘들과 form 태그, img 태그 등을 넣어서 아래와 같은 뼈대 코드를 만든다. 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 username comment1 comment2 Colored by Color Scripter cs 그 결과 card에 흰 바탕을 주어야 할 것 같다. 그리고 left_main과 right_main이 구분이 가지 않으니 글을 써서 어떻게 나뉘는..

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..

h4 태그에 instagram 글자를 넣었다. 그 결과 3줄로 바꼈다. 이유는 i tag는 inline element이고, div는 block element이기 때문이다. inline과 block element에 속하는 tag는 여기서 볼 수 있다. 설명은 여기서 볼 수 있다.따라서 div를 inline으로 바꿔줘야 위의 모든 element가 한 줄에 들어갈 것이다.일단 head 태그 안에 style 태그를 넣어서 css를 적용시켜 준다.그 결과한 줄로 잘 들어갔다.다음으로는 instagram 글자 까지는 왼쪽에, 나머지 아이콘들은 오른쪽으로 이동시켜야 한다. 따라서 두 개의 박스로 나눠준 후 큰 박스(div) 안에 넣어준다. left div와 right div를 나눠주기 위해서는 flex를 이용한다.(..

html, css를 통해 페이지를 만들려면 우선 인스타그램의 layout을 분석해야 한다. 일단 상단의 navbar가 보인다. 스크롤을 내려도 고정되어 있는 것을 볼 수 있다. 그리고 아이콘 몇 개와 인스타그램 글자, 검색창이 보인다.그리고 다른 페이지로 넘어가도 항상 있다. 따라서 모든 페이지에 공통적으로 적용되는 부분이라고 할 수 있다. 이렇게 공통적인 부분은 템플릿 상속을 통해 구현한다. 상속을 위해서 먼저 상속되는 파일들을 담을 공간을 만든다. 아래와 같이 home app과 같은 계층에 폴더를 만든다. 그 안에 상속될 base.html 파일을 만들어 준다. 그리고 상속 받을 home.html에서 아래와 같이 템플릿 태그안에서 extends를 통해 상속받는다. block content와 endblo..

가상환경 활성화 되어있는 상태이다. 1. app을 추가한다. 이름은 마음대로위 사진과 같이 home 앱이 추가되었다. 2. app을 만들면 가장 먼저 settings.py에 가서 INSTALLED_APPS에 app을 추가해줘야한다.여기에 추가하지 않았다가 url과 html파일 경로를 잘 설정해줬는데도 TemplateDoesNotExist error가 발생해서 해맸던 경험이 있다.따라서 app을 추가하게 된다면 바로 settings.py에 가서 app을 등록해주자. 3. app을 등록했으니 서버를 실행시켰을 때 보여줄 page를 만들어야 한다. 아직은 웹 페이지에 접속했을 때 보여줄 어떠한 파일도 없다.따라서 home.html 파일을 만들어주자.먼저 app 폴더 안에 templates 폴더를 만들어주고, ..