개발새발로그

요즘 매일 NBA 포스팅만 하다보니 스스로 좀 민망하기도 해서 iframe 관련 간단한 포스팅을 하려 한다.iframe은 다음과 같이 쓴다. height="200px" 대신 height="100%" 이 필요할 경우가 있다. 하지만 이는 제대로 적용되지 않는다. 이를 해결하기 위해서는 css style을 다음과 같이 주면 된다. vw는 view-port width, 마찬가지로 vh는 view-port height를 의미하는 단위로, 사용자가 보는 스크린을 100 기준으로 재는 단위이다. 아래는 iframe에 다른 스타일도 적용한 예이다. .iframe100 { display: block; border: none; height: 100vh; width: 100vw; } 참조 링크http://stackover..

Bootstrap은 container 클래스를 통해서 스크린 크기에 따른 화면의 폭의 한계를 자동으로 조절한다. 실제로 container 클래스가 어떻게 정의되어 있는지 살펴보자..container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }@media (min-width: 768px) { .container { width: 750px; } }@media (min-width: 992px) { .container { width: 970px; } }@media (min-width: 1200px) { .container { width: 1170px; } } @media (min-width: xxx) 를 통..

웹을 만들면서 귀찮은 일 중의 하나가 form이다. 입력 폼을 구성하고 디자인을 맞추고, 또한 필요하다면 front-end에서 체크할 수 있게 javascript도 짜게 될 수도 있다. back-end에서 값을 받아서 처리하는 일도 해야한다. 개인적으로 서버 로직 짜는 건 괜찮은데 보이는 쪽을 만지는 것은 꽤나 귀찮은 일이다. 다행히 django에서는 form에 관한 사항을 일괄적으로 다루기 때문에 많은 도움이 되기는 커녕 front-end쪽을 건드리는 것은 아니기 때문에 여전히 내가 하기 싫은 일은 남아있다. 초심자라면 더욱이 난감한 상황이 발생할 수 있다. 우선 django에서 다음의 간단한 form을 쓰겠다 (폼 필드를 일일이 쓰기 싫어서 ModelForm을 씀을 양해부탁드립니다).# myapp/f..

Bootstrap의 자바스크립트 기능 중 하나인 modal 사용법을 간단하게 소개하고 CSS 클래스 조정을 통해 화면 가득 찬 modal과 화면 정중앙에 위치한 modal을 만들어본다. 1. Bootstrap modal의 기본적인 활용방법 공식 문서를 참조하면 금방 이해할 수 있다. 기본적으로 별도의 자바스크립트 없이 HTML5의 특성인 data- 속성을 이용하면 modal이 구현된다. 구동하고자 하는 버튼이나 링크에 data-toggle="modal"을 부여하면 modal을 띄울 준비가 되고 data-target="DOM선택자"를 입력하면 지정된 내용을 modal로 띄울 수 있다. 아래의 HTML코드는 공식 문서의 예제를 가져온 것이다. Modal 띄우기 × Modal 제목 Modal 내용 닫기 Boo..