10. 디자인 변경과 정적 파일 사용하기
등록일 : 2020.12.15. 19:30
디자인 변경하기
이제 투표 기능은 우리가 의도한 대로 동작한다. 그런데 뭔가 모양이나 글씨가 예쁘지 않다. 이런 서비스가 기능상으로는 문제가 없지만 보기 좋은 것이 쓰기도 좋은 것이다. 특히 웹이나 앱 서비스들은 기능도 중요하지만 상용 서비스들은 심미성 또한 고려해야 한다. 아이러니 하게도 기능이 조금 떨어지더라도 이쁘다면 그 가치는 교환 될 수 있다. 예쁘면 사고 싶고 쓰고 싶은 것은 당연하다.
여기서는 .css 파일을 이용해 각종 레이아웃이나 색상 등을 변경 할 수 있다. CSS는 Cascading Style Sheets를 의미한다. CSS는 HTML의 각 요소가 어떻게 표현되는지 알린다. Question 제목의 크기나 색깔을 변경할 수도 있고 멋진 디자인을 입힐 수도 있다. html 태그인 <h1> 안에 style 속성으로도 추가할 수 있지만, 이렇게 하면 또 일일이 다 해줘야 하는 고생이 시작된다. css 파일에 이런 정보를 한번에 다 저장하고 매핑되는 스타일을 불러오는 방식은 거의 정석으로 여긴다. .css파일은 만들어 놓고 불러와 쓰이며 정해진 대로만 쓰인다.
polls/static/polls/style.css 파일을 새로 만들어 보자. 기존 .py, .html, 파일과 다르게 이번에는 .css 파일이다.
이런 디자인 파일은 html 화면을 그리는데 필요한 추가 파일로 보통 서버에 올려놓고 필요할때 파일을 불러와서 사용한다. Django에서 이런 파일을 정적 파일이라고 부른다.
polls/static/polls/style.css 생성
li a {
color: green;
}
만든 파일은 html 파일에서 불러와 적용할 수 있다.
polls/index.html의 상단에 다음의 문장을 추가한다. polls/index.html 추가
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
<!-- ...중략... -->
{% load static %}의 static은 서버에 이 정적 파일의 위치를 생성해주고 load는 이를 불러오는 역할을 한다. 이제 https://127.0.0.1:8000/polls/ 페이지를 방문해보자.
색상이 변했다.
<li> 태그의 <a> 태그의 색상을 green으로 변경하는 예제이다. 하지만 너무나 촌스럽다. 또한, 컬러는 매우 다양한데 blue, yellow 등으로 표현하기엔 디테일한 색상을 표기하긴 어렵다. #FF5733 이런식으로 Hex 컬러 코드로도 적용 가능하다. 그림판 같은 곳에 다양한 색상을 선택하면 해당 코드값이 표시되니 이 부분을 활용하여 맘에 드는 색상을 하나 골라보자. css에서는 hex 코드로 적용하도록 하겠다. 맘에 드는 색상을 찾기 위해서는 https://htmlcolorcodes.com/ 등의 사이트를 이용할 수도 있다. 이번엔 #3093E1 색상으로 변경해보자.
polls/static/polls/style.css 수정
li a {
color: #3093E1;
}
줄 간격도 조금 조정해보자. li의 각 아이템의 줄간격은 상위 태그인 ul에서 지정하면 된다.
링크가 있는 태그는 기본적으로 _ 밑줄로 표시되고 방문한 사이트라면 색상이 원치 않게 자동으로 변경된다. 이 부분은 예쁘지 않아 제거를 많이 한다. text-decoration:none; 을 추가해보자.
polls/static/polls/style.css 수정
ul {
line-height:180%;
}
li a {
color: #3093E1;
text-decoration:none;
}
브라우저에서 새로 고침을 해보자.
훨씬 깔끔해졌다. 이런식으로 발전시켜 가면 된다. 더 심화과정이 필요하다면 다른 css 강좌나 서비스를 더 학습해 보도록 하자.
tip
이미 누군가 만들어 놓은 css를 사용하는 방법도 있다. https://getbootstrap.com/ 사이트를 방문하여 활용해 보자. 본 이지 투 장고 북도 부트스트랩의 힘을 빌렸다. 그리고 괜찮은 사이트가 있다면 크롬 브라우저에서 F12(개발자) 모드를 눌러 원하는 요소를 선택해보자. 이에 대한 css 정보를 볼 수 있다. 모방은 창조의 어머니이다. 이 웹사이트가 맘에 든다면 이 웹사이트의 css를 참고하는 것도 좋겠다.