남산 아래 개발자들

테이블 부트스르랩을 사용하여 테이블 스타일 지정하는 방법을 예제와 함께 설명하도록 하겠습니다.. 사용예제 테이블은 날짜 선택과 같은 타사의 캘랜더 모듈에서 많이 되어 기본적으로 스타일을 사용자가 선택하도록 설계되었습니다.  기본 클래스 .table을 <table>에 추가 한 다음 사용자 정의 스타일이나 다양한 포함 된 추가 클래스로 확장하면됩니다. 가장 기본적인 테이블 마크 업을 사용하여 테이블 기반 테이블이 부트스트랩 에서 어떻게 나타나는지 알수 있습니다. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter <table class= "table" > <thead> <tr> <th> # </th> <th> First Name </th> <th> Last Name </th> <th> Username </th> </tr> </thead> <tbody> <tr> <th scope= "row" > 1 </th> <td> Mark </td> <td> Otto </td> <td> @mdo </td> </tr>

*이 문서는 지속적으로 업데이트 될 예정입니다 *가로스크롤 UI 모바일에서 터치 + 스크롤 되는 기본적인 CSS 문법이 가장 잘 설명된 예 입니다. 자세한 설명은 여기서 보실 수 있습니다. See the Pen Flickity horizontal scrolling navigation by Steve ( @stevemckinney ) on CodePen . Angular2+ 에서 Bootstrap 과 함께 horizontal scroll 을 구현할 때 한가지 팁이라면 가로 width 를 고정값을 주면 화면 리사이징 할 때 Bootstrap Layout 이 깨집니다. height 만 주거나, 이게 불편하면 Slider 플러그인 같은 다른 대책을 구해보심이 좋을듯합니다. + Sly 라는 꽤 괜찮은 가로 스크롤 플러그인이 있는데 angular2 용으로는 아직 없어서 대단히 아쉽네요 http://darsa.in/sly/ * 이미지의 가로 세로 비율 유지하면서 잘라 보여주기 (CSS) 중앙 정렬 맞추면서 Responsive UI 에서 이미지 비율대로 Crop 해 보여주기 링크 소스 설명은  여기서  보실 수 있습니다. See the Pen 이미지의 가로세로비를 유지하면서 틀 안에 맞추기 by feeva ( @feeva ) on CodePen . * 함께 보면 좋은 문서 당신은 모를 수도 있는 CSS의 7가지 단위 vh, vw 같은 것들은 PC Web 에서는 아직 쓸 수 없겠지만 모바일만을 대상으로 한다면 꽤 매력적인 신기능입니다

이번 강좌에서는 ios 의 푸시 알림 3부의 APN 테스트를 해보겠습니다, ios 푸시 알림 1부 - 개발자 계정 세팅 ios 푸시 알림 2부 - 클라이언트 개발 ios 푸시 알림 3부 - APN 테스트 ======================================================================================== 클라이언트는 세팅이 완료됐으므로, 이제 서버에서 푸시를 보내보겠습니다. 1. 아래의 페이지로 APNS-Tool를 다운받습니다, https://itunes.apple.com/kr/app/apns-tool/id963558865?mt=12 ======================================================================================== 2. 푸시 인증서를 선택합니다. ======================================================================================== 3. Device Token에는 클라이언트에서 발급받은 토큰을 입력합니다. Payload의 내용은 아래의 일반적인 형식으로 보내야합니다. { "aps":{ "alert":"Test APNS Notification", // 알럿 메시지 "sound":"default", // 사운드 "badge":10 // 뱃지 카운트 } } 파라미터를 추가하고 싶다면, 아래와 같이 key&value로 넣을 수 있습니다. 예) 내가 작성한 스냅에, 댓글이 달린다면, 푸시알림을 보내고, 푸시알림을 확인 시 해당 스냅으로 이동하고자 할때. { "aps":{ "

이번 강좌에서는 ios 의 푸시 알림 2부의 클라이언트 개발을 알아보도록 하겠습니다. ios 푸시 알림 1부 - 개발자 계정 세팅 ios 푸시 알림 2부 - 클라이언트 개발 ios 푸시 알림 3부 - APN 테스트 ======================================================================================== 1. Xcode를 열고 푸시 세팅을 해줍니다. ======================================================================================== 2. AppDelegate.m 파일을 열고, 푸시 코드를 등록합니다. - ( BOOL )application:( UIApplication  *)application didFinishLaunchingWithOptions:( NSDictionary  *)launchOptions -> 앱이 시작될때 - ( void )application:( UIApplication  *)application didRegisterForRemoteNotificationsWithDeviceToken:( NSData  *)deviceToken -> 푸시 서버에 토큰을 등록했을 때 - ( void )application:( UIApplication  *)application didFailToRegisterForRemoteNotificationsWithError:( NSError  *)error  -> 푸시 서버에 등록을 못했을 때 - ( void )application:( UIApplication  *)application didReceiveRemoteNotification:( NSDictionary  *)userInfo fetchCompletionHandler:( void  (^)( UIBackgroundFetchResult  result))com

이번 강좌에서는 ios 의 푸시 알림을 알아보도록 하겠습니다. 총 3부로 구성해보았습니다. ios 푸시 알림 1부 - 개발자 계정 세팅 ios 푸시 알림 2부 - 클라이언트 개발 ios 푸시 알림 3부 - APN 테스트 ----------------------------------------------------------------------------------------------------------- 우선 ios에서 푸시를 하려면, 개발자 계정을 먼저 세팅 해야합니다. 1. 인증서 요청 생성 키체인을 이용해  CertificateSigningRequest라는 인증서를 만들어야 합니다. 2. 파일을 만들고 나서, https://developer.apple.com 접속합니다. 진행중인 프로젝트의 APP ID를 누르면, 앱에 대한 설정을 확인하실수 있습니다. edit를 누르고 Push Notifications를 확인합니다. 이미 저는 등록은 한 상태이며, 여러분들은 Create Certificate.. 선택하시면 됩니다. 다음페이지에서는 키체인에서 만든  CertificateSigningRequest 파일을 넣을 수 있습니다. 만들고 나서, 다운로드를 하고, 선택을 하면, 키체인이 포함된것을 확인하실 수 있습니다. ================================================================================================ 3. 키체인에 해당 인증서들이 보인다면, 인증서가 정상적으로 등록 다운된것입니다.

남도패스 대시보드를 만들면서 구글 애널리틱스에서 데이터를 API 로 받아오는 부분을 알아보았는데 팀내 인수인계 문서 겸 블로그로 올립니다. * 전제조건 구글 애널리틱스 계정이 있어야 합니다. 가입하기 > https://www.google.co.kr/intl/ko/analytics/ 목적은 남도패스에 접속하는 회원이 무슨 키워드 로 어느 소스/매체 를 통해 접속하는지 일일 세션 수 를 구글 통계 API 를 통해 호출해서 화면에 뿌려주는 부분입니다. 자세한 항목/사용법은  https://developers.google.com/analytics/devguides/reporting/core/v3/reference#metrics  여기서 알 수 있습니다. 1. 먼저  https://ga-dev-tools.appspot.com/query-explorer/ 에 접속합니다. 로그인한 상태가 아니라면 아래 화면은 block 되어 있습니다. 주황색 부분을 누르고 구글 통계를 쓰고있는 계정으로 로그인하시면 됩니다. 2. 로그인 후에, Account 메뉴를 열어보면 해당 구글 계정에서 쓰고있는 구글 통계 웹사이트/앱 목록이 뜹니다. 그 중 API 로 데이터를 얻어오려는 계정을 선택합니다. 3. start-date, end-date: 계정을 선택한 후 해당 데이터의 기간 범위를 선택합니다. 남도패스는 일일 통계를 얻어야 하기 때문에 start-date, end-date 를 같은 날로 설정합니다. 4. metrics: 구글통계에서 최종적으로 어떤 데이터를 얻어올지 항목을 선택합니다. 남도패스에서는 세션, 페이지뷰를 선택했습니다. 5. dimensions: 데이터를 뽑아올 조건 항목들을 선택합니다. 남도패스 대시보드의 경우에는유입 검색 키워드 와 소스 를 선택합니다. 6. 마지막으로 Run Query 버튼을 누르면 해당 데이터를 뽑아올 쿼리문이 완성됩니다. 여기서 Include current acces

Alerts 일반적인 사용자에 대한 메시지 표시를 위한 Alert 에 대한 사용법을 예제를 통하여 설명합니다. Examples Alerts 는 일정길이를 가진 텍스트와 버튼을 사용합니다. 올바른 스타일 지정을 위해 Alerts 상황에 맞게 클래스를 지정하면 됩니다. This is a primary alert—check it out! This is a secondary alert—check it out! This is a success alert—check it out! This is a danger alert—check it out! This is a warning alert—check it out! This is a info alert—check it out! This is a light alert—check it out! This is a dark alert—check it out! <div class= "alert alert-primary" role= "alert" > This is a primary alert—check it out! </div> <div class= "alert alert-secondary" role= "alert" > This is a secondary alert—check it out! </div> <div class= "alert alert-success" role= "alert" > This is a success alert—check it out! </div> <div class= "alert alert-danger" role= "alert" > This is a danger alert—check it out