반응형 디자인을 개발하면서
스크립트를 건들지 않고, css+장고 문법 하나로 쉽게 해결할 수 있는 꿀팁을 알려드립니다.
웹(large) 화면과 모바일(xs) 화면이 다를때 유용하게 사용할 수 있는 방법입니다.
장점
- css의 복잡한 미디어 쿼리의 사용을 줄일 수 있음
- 자바스크립트 if문을 사용을 하지 않아 코드가 짧아짐
Css 클래스 속성에 원하는 스타일을 각각(lg,xs) 만듭니다.
1
2
3
4
5
| // if 조건이 '진행중' 일때만 이미지가 보인다.
.visible-img {
display: block;
}
|
1
2
3
4
5
| // else
.hidden-img {
display: none;
}
|
해당 클래스안에 적용하면 끝!
1
2
3
4
| <!-- 진행중일때 visible-img를, 그외에는 hidden-img 클래스를 적용시킨다 -->
<img
class="{% if application.step == '진행중' %}visible-img{% else %}hidden-img{% endif %}"
/>
|