220128 TIL

TIL DAY 167

오늘 배운 일

✔️ Django 웹 개발

1. Form에 CSS 적용하기 Ⅱ

이번에는 폼의 세부 요소들에 CSS 를 적용해보고 글 작성 페이지에 디자인을 입혀보겠다.

그러면 우리 작성 페이지로 가보면...

http://127.0.0.1:8000/posts/new/

위에 웹 페이지를 보면 제목을 입력하는 위젯이 있는데 이 부분에 CSS 를 적용해서 width 즉 너비를 변경하고자 한다.

그런데 post_form.html 에서 에러 메시지 같은 경우에는 클래스를 적용해서 디자인을 변경했는데...

post_form.html

제목 같은 경우에는 에러 메시지처럼 바로 아이디나 클래스를 적용할 수 없다.

그 이유는 입력하는 곳인 input 태그 안에 있는 위젯에 대한 스타일을 변경해야 하는데 지금은 django 폼에서 위젯에 대한 스타일을 자동으로 지정해 주고 있기 때문이다.

만약 밑에 있는 코드처럼 폼과 위젯을 직접 HTML 로 구현했다면 이렇게 적용하거나...

출처 : 코드잇

출처 : 코드잇

CSS 에 적어두고 아이디를 이용해서 사용하면 되는데 하지만 우리는 이러한 설정을 템플릿에서 바로 접근할 수 없고 폼의 정의한 forms.py 에서 접근할 수 있다.

그러면 forms.py 로 가서 보면...

forms.py

빨간 밑줄로 그어져 있는 부분에서 title 과 content 필드를 django 가 자동으로 모델을 보고 유추해서 사용하고 있다.

그럼 models.py 를 보면 title 같은 경우에는 CharField 를 사용하고 있다.

models.py

그럼 이제 django 공식 문서를 켜서 위에처럼 CharField 같은 모델 필드를 폼으로 변환할 때 django 는 어떤 위젯을 사용할지 알아보도록 하겠다.

google 에다가 django form charfield 라고 검색해서 맨 위에 있는 링크를 클릭해준다.

https://docs.djangoproject.com/en/4.0/ref/forms/fields/

그러면 공식 문서가 나오는데 ctrl+f 로 검색을 해서 charfield 라고 검색을 하면...

CharField 같은 경우에는 기본 위젯이 TextInput 이다.

앞에서 보았던 길쭉한 한 줄 입력창을 기본 위젯으로 설정하고 있는 것이다.

다시 forms.py 로 가서 정리를 해보면 우린 ModelForm 을 사용하고 있고...

forms.py

models.py

title 같은 경우에는 모델의 CharField 로 정의가 되어 있으며 이러한 CharField 는 폼으로 변환될 때 TextInput 을 기본 위젯으로 사용한다는 것을 알게되었다.

그럼 forms.py 로 가서 widgets 이라고 적어준다.

forms.py

이 widget 은 사전형 변수로 필드 이름을 키로 하고 적용할 위젯을 값으로 해서 폼 필드마다 위젯을 직접 명시할 수 있게 해주는 항목이다.

기본 위젯 말고 다른 위젯을 사용하거나 위에처럼 위젯에 직접 접근해야 할 때 이렇게 사용하면 된다.

그리고 다음과 같이 코드를 작성해준다.

사전형으로 title 이라고 하는 키에다가 값으로 forms.TextInput 이라고 지정해준다.

그리하여 title 필드에 TextInput 위젯에 다양한 스타일을 적용할 수 있다.

아이디나 클래스 등 익숙한 방식을 설정하면 된다.

그럼 먼저 스타일을 적용시켜주도록 하겠다.

forms.css 로 가서 에러 밑에다가 이번엔 .title 이라고 적어주고 가로 넓이는 400px 으로 지정해준다.

다시 forms.py 로 가서 밑에처럼 코드를 작성해준다.

forms.py

위젯에다가 괄호를 열고 attrs= 이라고 적어준다.
attrs 라는 것도 사전형으로 이루어져 있는데 사전형이니까 중괄호를 넣어서 키로는 class 라고 해주고 값은 title 이라고 해준다. (forms.css 를 참고하시길...)

그럼 TextInput 이라는 위젯은 속성으로 클래스가 title 인 것을 갖게 되는 것이다.

그리고 다른 스타일 또한 줘보겠다.

유저가 내용을 처음 입력할 때 '제목을 입력하세요' 같은 텍스트가 보이도록 설정해주겠다.

이런 건 CSS 속성 중에 placeholder 라는 것을 쓰면 되는데 한 번 해보겠다.

다시 forms.py 로 가서 다음과 같이 코드를 작성해준다.

반점을 찍은 이유는 title 이 끝났으니 content 또한 적어주기 위해서이다.

content 도 title 처럼 적어주는데 TextInput 대신 여러 줄을 적어줄 수 있는 Textarea 로 지정해주고 속성으로 placeholder 를 적어준다.

그리고 서버를 실행시켜서 한 번 잘 나타나는지 확인해준다.

위에처럼 placeholder 의 값인 '제목을 입력하세요' , '내용을 입력하세요' 가 잘 나타난다.

아 그리고 방금 알아낸 버그인데 만약 크롬이 아니고 웨일즈로 화면을 보고 있으면 클래스 title 이 적용이 안될 수 있다.

구글 크롬으로 확인해봐라!

끝으로 :

• 오늘은 글 작성 페이제에 CSS 를 적용해보면서 이전에는 템플릿에다가 HTML 방식으로 클래스를 적었는데 이번엔 사전형 형태로 적어보았다.
• 새로운 방식으로 적용할 수 있다는게 신기하면서 다시 한 번 공부해서 완전히 내 것으로 만들어야 겠다.