{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"0b4c0a24-2359-5263-92f3-c29bdbab57fa","excerpt":"트렐로 구현하기 1일차 질문과 배워나가야 할 것들 트렐로는 특별히 라이브러리를 쓰지 않은 것 같은데 어떻게 모바일에서도 잘 보이게 한 거지? Viewport를 사용 head 태그 사이에 다음 코드를 입력합니다. 기본적으로 데스크탑 브라우저에서는 viewport 메타 태그를 사용하지 않아 무시합니다. modal…","html":"<h1 id=\"트렐로-구현하기-1일차\"><a href=\"#%ED%8A%B8%EB%A0%90%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-1%EC%9D%BC%EC%B0%A8\" aria-label=\"트렐로 구현하기 1일차 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>트렐로 구현하기 1일차</h1>\n<p>질문과 배워나가야 할 것들</p>\n<ul>\n<li>트렐로는 특별히 라이브러리를 쓰지 않은 것 같은데 어떻게 모바일에서도 잘 보이게 한 거지?</li>\n</ul>\n<p>[Viewport를 사용][https://jongmin92.github.io/2017/02/09/html/viewport/]</p>\n<p>head 태그 사이에 다음 코드를 입력합니다. 기본적으로 데스크탑 브라우저에서는 viewport 메타 태그를 사용하지 않아 무시합니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>viewport<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>width=device-width, initial-scale=1.0<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span></code></pre></div>\n<ul>\n<li>\n<p>modal은 대체 뭐람?</p>\n<blockquote>\n<p>모달</p>\n<p>간단히 말해 새 모달 창이 열렸을 땐 기존에 있던 창을 사용하지 못하는 방식이다. 예를 들어 어떠한 응용프로그램에서 에러 메시지가 뜬다고 가정하자. 그 메시지를 확인 또는 취소를 눌러야만 다음으로 진행이 가능하고, 그 메시지가 뜬 상태라면 뒤에 있는 창을 선택할 수 없다. 어렵게 말하면 어느 다이얼로그 창이 프로그램의 제어권을 독점해서 이 창이 종료되기전엔 다른 작업을 할 수 없는 것으로 다른 작업을 할 수 없다는 말은 현재 발생한 모달 다이얼로그의 부모 창을 의미 하며 다른 윈도우 창은 별개로 작업이 가능하다. 중요한 메시지를 표시하는 다이얼로그는 거의 모달로 나타낸다. Visual Studio의 정보 대화 상자나, API의 MessageBox는 사용할 수 있는 모달 형식의 한 예이다.</p>\n</blockquote>\n</li>\n</ul>\n<blockquote>\n<p><strong>모달리스</strong> 모달리스는 어느 하나의 다이얼로그 창이 있어도 프로그램 제어권을 독점하지 않으므로 다른 작업을 할 수 있는 것이다. 모달리스는 사용자가 순서에 관계 없이 액세스할 수 있기 때문에 사용자의 동작에 관계 없이 응용 프로그램의 상태를 일관성 있게 유지해야 한다. 그래서 프로그래밍하기가 더욱 어렵다. 도구 창은 종종 모달리스 형식으로 표시되며, Visual Studio의 편집 메뉴에서 사용할 수 있는 찾기 대화 상자는 모달리스 대화 상자의 한 예다. 모달리스 형식은 자주 사용하는 명령이나 정보를 표시하는 데 사용한다.</p>\n</blockquote>\n<p><a href=\"http://showmiso.tistory.com/26\">http://showmiso.tistory.com/26</a>\n<a href=\"http://www.gnujava.com/board/article_view.jsp?article_no=3797&#x26;board_no=11&#x26;table_cd=EPAR04&#x26;table_no=04\">http://www.gnujava.com/board/article<em>view.jsp?article</em>no=3797&#x26;board<em>no=11&#x26;table</em>cd=EPAR04&#x26;table_no=04</a></p>\n<h1 id=\"모달-윈도\"><a href=\"#%EB%AA%A8%EB%8B%AC-%EC%9C%88%EB%8F%84\" aria-label=\"모달 윈도 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>모달 윈도</h1>\n<p><strong>모달 윈도</strong>(Modal Window)는 <a href=\"https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9A%A9%EC%9E%90_%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4\">사용자 인터페이스</a> 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말한다. 그래서 응용 프로그램의 주 창의 작업 흐름을 방해한다. 일반적으로 모달 대화상자로 불리는데, 그 이유는 대화상자를 부를 때 흔히 사용되기 때문이다. 우리가 자주 사용하는 파일 열기/저장 대화상자를 생각하면 이해하기 쉽다.</p>\n<p>모달 창들은 일반적으로 사용자의 명령을 인식하기 위해서나, 긴급 상황을 알리기 위해 많이 사용된다. 웹에서는 이미지 작업을 예로 든다면 이미지를 자세하게 볼 때 자주 사용된다.</p>","frontmatter":{"title":"trello 구현하기 1회차","date":"August 11, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180811 trello 구현하기 1회차/","previous":{"fields":{"slug":"/til/20180811 프리코스 마지막 토이시간, 남은 한 달 동안 어떻게 공부해야 할 것인가/"},"frontmatter":{"title":"프리코스 마지막 토이시간, 남은 한 달 동안 어떻게 공부해야 할 것인가","category":"TIL"}},"next":{"fields":{"slug":"/til/20180814 trello 구현하기 2회차/"},"frontmatter":{"title":"trello 구현하기 2회차","category":"TIL"}}}}