2020.09.11_django_modelform_custom

2020.09.09_django_modelform_custom_정리 노트

 

 

하루에 한포스팅......지켜야지 열시미해야지.....오늘은 어제 하다가 멘붕온 모델폼을 html 상에서 커스텀하는 방법... ㅠㅠㅠㅠㅠ 그동안 알고리즘 푼거는 다 어디가고 내가 평소에 맨날 쓰던 if 와 for문 가지고 너무 새벽내내 고통받았다... 정신차리고 정리정리... 

 

 

 

 

먼저 우리가 처음에 create.html 에서 단순히 모델폼을 뷰에서 가져와서 써주었다면, 우리는 오늘 얘를 하나하나 분리해서 커스텀 해줄 것이다.

 

 

실행창을 한번 봅씨다.

 

 

 

지금 평소와 약간쓰 다른 느낌은 내가 어제 우당탕탕 css 를 먹이면서 일단 초기화 코드로 폰트사이즈와 마진 패딩을 0 으로 줘서 그런거고 쨋든 지금 이렇게 잘 불러와지는데, 오늘은 여기에서 개발자 도구를 이용해 하나씩 태그를 봐보자.

 

개발자 도구는 크롬에서 F12로 킨다.

 

 

 

 

 

 

 

 

개발자 도구를 켜고 왼쪽에 커서 모양을 누르면 옆의 실행창에서 내가 클릭한 태그들을 볼 수가 있다.

 

 

 

 

이런식으로! 지금 보면 우리가 그냥 불러와줬을 뿐인데, 알아서 태그에 맞춰서 id 값을 가져와 주었다.

 

또 전체적인 구조를 보면, 우리가 p 형태로 폼을 불러와주었기 때문에,

 

 

 

 

 

폼이 p 태그안에 각각 잘 들어가 있는 것을 볼 수가 있다. 

 

구조를 하나하나 분석해보면,

 

 

 

 

title : , content : , myimage :  라는 텍스트 들은 지금 label 태그로 묶여 있고,

 

title을 적는 필드인 CharField 는 input type으로 불러와져 있고,

 

content 를 적는 필드인 TextField 는 textarea로 불러와져 있다.

 

마지막으로 myimage 이미지 첨부 필드인 ImageField 는 title 과 마찬가지로 input type 으로 들어가 있는 것을 볼 수가 있다.

 

 

헷갈리니까 모델을 들어가서 비교해보면,

 

 

 

 

이렇게 모델에서 우리가 정해준 폼들을 각각 위 html 상에서 띄워준 것이다! 

 

 

이제 우리는 이 태그들을 활용하여, css 를 적용해주면 되는데, 먼저 태그들을 정리를 해주어야겠지?

 

정리를 해주지 않게 되면, 태그 하나하나 스타일을 적용시켜야 하고, 안에 들어 있는 것들이 많다면 , 언제까지나 태그 하나하나당 스타일을 적용해주지 못하겠지! 그래서 오늘 우리는 태그들을 묶고 정리하는 작업들을 할 것이다.

 

 

그 묶고 정리하는 작업들을 우리는 html에서 장고 탬플릿 태그로 for문과 if을 사용해볼 것이다.

 

 

그럼 진짜 이제 시작..!

 

 

 

 

...............정리하고 정리해서 한 결과.............. 정말 이렇게 보면 익숙한 for문과 if문도 어려워.......저는 이해를 하고 어떻게 돌아가는지도 한참 걸림...... 만약 이것들이 실행된 결과를 html 상에서 확인을 하려면 또 개발자 도구로 가서 확인할 수도 있는데, 일단 나도 이해하는데 한참 걸려서 코드를 해석해보면,

 

모델폼을 for문으로 돌려주고 크게 폼을 감싸는 클래스를 form-wrapper라는 것으로 묶어준다. 

 

그 중에서 i.label 그러니까 label 태그가 Title ( 대문자로 들어가 있으므로, 대소문자 구분 주의! ) 인 태그는 우리가 제목이라는 이름으로 만들어줄 것이기 때문에, 제목이라는 이름을 써주고 따로 또 class를 지정해주었다. 다른 label 태그도 elif를 사용해서 적어주었다. 

 

그렇게 텍스트들을 바꿔주고 입력을 받는 필드들은 i로 분리가 되었을 것이니까, 다시 input-box 라는 클래스를 이용해서 입력필드들을 각각 하나씩 텍스트 밑으로 배치해주었따. 그러고 for문 종료. 

 

 

설명하고 해석하는데도 무슨 말인지 모르겠으니 그냥 실행결과를 개발자 도구에서 한번 봐볼까... 

 

 

 

 

form 태그 밑에 지금 for문을 돌면서 3개의 값에 맞게 3개의 form-wrapper 클래스가 생성되어 있고,

 

 

 

 

첫번째 form-wrapper 클래스안에 새로 지어준 제목 클래스와 함께 제목이라고 텍스트가 바뀌었고, 제목 입력필드가 input-box라는 우리가 바꿔준 i class 로 들어가서 담겼다. 그리고 form-wrapper 클래스 닫힘.

 

 

i.label = Content

 

i.label = Myimage

 

 

나머지도 똑같이 각 크게 form-wrapper 클래스에 담기고, 각각 내가 지정해준 클래스로 잘들어가서 수정이 된 것을 볼 수가 있다. 

 

 

마지막으로 작성완료 버튼은 맨 밑에 따로 내가 지정한 class를 추가해서 잘들어가진 것을 확인할 수 있었다.

 

 

 

 

아까와 보여지는 것은 같지만, 내가 지정해준 클래스로 전부 수정이 되었기 때문에, 우리는 비로소 우리가 원하는대로 css 를 이용해 커스텀할 수 있게 되었다. 이제 하나하나 해보자.

 

 

 

 

 

전체적으로 그냥 수평정렬과 텍스트 크기를 초기화 코드에서 조정해주었다.

 

 

여기서 인풋태그만 긴 이유 정리.

 

인풋 태그의 기본 속성은 인라인 요소이다. 

 

text-align 의 가운데 정렬을 쓰려면 한줄을 다먹는 블락 요소여야 한다.

 

그리고 인풋안에 텍스트가 들어가 있으면, text-align 을 주게 되면, 그 안 텍스트가 정렬 된다. 

 

또한 우리는 인풋 태그의 가로를 지정해주지 않으면, 중앙정렬이 안먹는다...

 

 

일단 제일 좋은건 input 에 클래스를 부여해주지 말고, div class 로 그냥 묶어주면 text-align 주면 된다..ㅎ 그래도 나는 일단 공부할겸, 이렇게 줘보았다!

 

 

그래서 최종적으로 나는 margin auto를 이용해서 인풋태그를 정렬해주고, 안에 들어가는 텍스트를 중앙 정렬로 해주었다. 그렇게 되면, 

 

 

 

이렇게..! 근데 뭔가 부족...하다 이렇게만 해주지말고 세부적으로 지정해주자..!

 

 

 

일단 우리가 css 에서 줬던 margin 클래스를 html상에서 상속해주기. 

저번 포스팅 에 적혀 있음!!!

 

 

 

 

 

이렇게 주고, 또 나는 폼 전체 형태를 조금 예쁘게 중앙 정렬 시키기 위해서,

 

 

 

 

 

 

flex를 주고 direction을 가로로 비율을 가지게 한뒤, flex를 써주었기 때문에, justify-content를 써줄 수가 있었다. 그러고 height를 각 25%정도로 주었다. 

height는 flex를 쓰고 스크롤이 없는 페이지에서 한 페이지를 전부 차지하고 싶다면 100%를 보통 써주는데, 나는 지금 form-wrapper 클래스를 3개로 분리 했기 때문에, 25% 정도로 주었다 전체를 주고 싶다면 form 태그에서 100% 를 줘도 된다. 나는 이것저것 해보니까 비율이 이게 제일 좋아보여서 ...ㅎ 

 

쨋든 이렇게 해주고,

 

 

전체적으로 중앙으로 정렬된 모습...! 후 오늘은 모델폼 커스텀을 장장 3일만에 포스팅.. 안되니까 오늘은 여기서 조금 더 css 를 폰트랑 보더랑..이것저것하는거 분리해서 다시 써야겠다! 이거는 대체적으로 장고 모델폼 커스텀 하는 방법을 다뤘고 다음은 좀 더 세세한 css 랑 내가 하고 싶었던 대로 다시 커스텀 해봐야게씀 호다닥 다음꺼 쓰러 감미다.