[Angular 2+ / 퍼블리싱] 일반적인 모바일 UI 를 코딩할때 유용한 링크 모음

작성자: -
*이 문서는 지속적으로 업데이트 될 예정입니다

 *가로스크롤 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 에서는 아직 쓸 수 없겠지만 모바일만을 대상으로 한다면 꽤 매력적인 신기능입니다

댓글

댓글 쓰기

주간 인기글

scp명령어를 이용하여 리눅스 서버 간 파일 이동하기

작성자: -
안녕하세요. 남산돈가스입니다. 리눅스 서버를 운영 중에 서버와 서버 또는 서버와 로컬 간의 파일을 복사하기 위하여 scp 명령어를 자주 사용합니다. 오늘은 scp 명령어 사용법에 대해서 포스팅 해보겠습니다. scp 명령어의 기본 사용법은 다음과 같습니다. $ scp < 옵션 > < 원본 경로 및 파일 > < 복사 받을 곳 경로 및 파일 > 1. 로컬에서 서버로 파일 복사하기 첫번 째로 로컬에서 서버로 파일을 복사하기 위해서 test 파일을 하나 생성합니다. $ touch scpTest $ ls -al scpTest -rw-r--r-- 1 gimseongsin staff 0B 11 21 16:40 scpTest 테스트로 생성한 scpTest라는 파일을 remote 서버로 복사해보겠습니다. $ scp scpTest ubuntu@13.124.XXX.XXX:/home/ubuntu scpTest 100% 0 0.0KB/s 00:00 $ scp <복사할 로컬파일 경로> <계정>@<호스트주소>:<복사 될 경로> 위와 같은 명령어를 통해 로컬에서 Remote 서버로 파일을 복사한 것을 확인 할 수 있습니다. 2. 서버에서 로컬로 파일 복사하기 두번 째로는 Remote서버에 있는 파일을 로컬환경으로 가져오는 방법입니다. 먼저 Remote 서버에서 로컬로 전송할 파일을 생성합니다. $ touch remoteToLocal $ ls -al remoteToLocal -rw-rw-r-- 1 ubuntu ubuntu 0 Nov 21 16:58 remoteToLocal 파일을 생성한 뒤 로컬 터미널 창에서 다음과 같이 입력합니다. $ scp ubuntu@13.124.XXX.XXX:/home/ubuntu/remoteToLocal /User...
자세한 내용 보기

현수막/명함 등 인쇄물 디자인하기

작성자: -
이미지
문화체육행사_포스터 이번 포스팅으로는 행사라던지 일정표 등 여러가지 인쇄물 제작을 할 때의 디자인 방법에 대해 간단하게 소개하려고 합니다 ㅎㅎ 인쇄물 포토샵 세팅  해상도 (Resolution) 300 dpi  로 잡아줍니다. 안그러면 해상도가 낮아서 깨져 보여요. (보통 웹 작업을 할 경우 72dpi 로 잡혀 있음) 색상 (Color Mode) 인쇄물이므로 RGB 컬러가 아닌 CMYK 아시겠지만 RGB와 CMYK 색상은 차이가 많이 나니까 미리 잘 세팅하셔서 나중에 작업 다 끝내놓고 인쇄 직전에 멘붕에 빠지지 않으시기를..^^ <-경험자 일러스트레이터로 작업하실 경우는 컬러모드나 해상도 등은 문제가 되지 않으므로 인쇄물은 되도록 일러로 작업하시는 게 좋을 것 같습니다. 1. 현수막 만들기  체육행사_현수막 사이즈 보통 만들고자 하는 크기가 m 단위인데요 만들려고 하는 크기의 10분의 1정도 사이즈로 작업을 합니다. 예를들어 6m x 1m 사이즈의 현수막을 만든다고 하면 포토샵/일러로는 60cm x 10cm 로 제작을 합니다. 실물 크기로 만들 경우 컴퓨터의 성능이 엄청나지 않은 이상 작업에 무리가 있고, 10분의 1 사이즈로 제작해서 인쇄해도 괜찮아요~ 현수막은 처음부터 사이즈를 확정하고 작업하셔야 수정할 일이 덜 생깁니다.^^ 보통은 강당이나 어느 특정 장소에 걸어야 하기 때문에 사이즈가 제한적일거고, 그걸 미리 잘 알아두시고 작업하셔야 기껏 작업한 디자인을 버리는 일이 생기지 않아요^^ 2. 명찰 만들기 사이즈 실제 사이즈대로 만들되 명찰 사이즈보다 조금 더 작게 만들어 인쇄해야 나중에 명찰에 끼워넣을 때 고생하지 않아요^^ 3. 명함 이번에 아이프렌즈펫에서 명함 사이즈의 홍보카드를 만들었는데요, 작은 사이즈이지만 의외로 까다로워서 처음 제작단계부터 인쇄업체와 대화를 많이 하시는게 좋은 것 같구요  (아...
자세한 내용 보기

네이버 클라우드 SENS 활용 SMS 발송을 위한 법인 발신번호 등록

작성자: -
이미지
네이버 SENS API 를 활용한 SMS 발송 서비스 개발 진행 시 휴대전화 번호를 발신번호를 등록하고자 한다면 휴대폰 본인인증 서비스를 활용하면 됩니다. 핸드폰 본인인증을 통한 SMS 발신번호 등록 하지만 법인 서비스의 경우 회사 대표번호 등록을 통해 서비스를 구현해야 하는데 발신번호 사전등록제* 로 인해 별도의 인증절차가 추가로 필요하게 됩니다. 발신번호 사전등록제 시행 안내 전기통신사업법에 따라 2015년 10월 16일부터  발신번호 사전등록제 가 시행되었습니다. 발신번호 사전등록제는 전기 통신사업법 제 84조에 의거 거짓으로 표시된 전화번호로 인한 이용자 피해 예방을 위해서 이용고객이 사전등록된 발신번호로만 문자발송이 가능하도록 하는 제도입니다. 발신번호는 반드시 기업 또는 본인이 소유한 번호로 등록해야 하며, KISA가 발신번호 변조 의심으로 소명자료를 요청할 경우, 3일 이내에 제출하여야 합니다. 휴대푠 인증과 달리 서류인증으로 진행하게 되는데요 이때, 서류인증을 위해 필요한 문서가 바로 통신서비스 이용증명원* 입니다. * 통신서비스 이용증명원이란? 전기통신사업자가 이용자 본인이 사용하는 전화번호임을 증명하기 위해 발급하는 서류입니다. 가입자의 통신사명, 가입자의 성명/주소/생년월일(기업회원의 경우 사업자등록번호), 가입자 통신 서비스 종류(유선, 무선, 인터넷 전화 등) 및 전화번호가 포함되어 있어야하며, 등록 신청일 기준으로 3개월 이내에 발급된 서류여야만 합니다. 자세한 사항은 가입한 통신사 고객센터에 문의하시기 바랍니다. 사업자의 경우 통신사의 고객센터로 전화하여 상담원게 서류를 요청하거나 지점을 방문하여 이용증명원을 발급 받아야 한다고 합니다. <주요 통신사> <서비스 가입 확인서 예시> 통신서비스 이용증명원 발급이 완료되었다면 SENS SMS 발송 메뉴의 발신번호 등록 - 서류인증 ...
자세한 내용 보기

[AWS] ACM (Amazon Certificate Manager)를 통한 SSL 적용 웹사이트 구성

작성자: -
이미지
AWS 의 Certificate Manager 를 활용하면 운영중인 웹사이트에  무료로 SSL 적용이 가능합니다. 기존 방식대로 Web 서버에 HTTPS 접속을 위한 SSL 인증서 적용을 위해서는 웹서버에 직접 모듈을 설치하고 인증서 업로드 및 설정 작업을 진행해 주어야 했지만 ACM 을 활용하면 아래 비교표와 같이 간단한 절차로 SSL 구성이 가능합니다. 그럼 본격적으로 ACM 을 통한 SSL 적용 방법에 대해 알아보겠습니다. 1. 본인소유 도메인과 이메일 접속권한 확인 ACM 을 통한 SSL 적용을 위해서는 우선 본인 소유의 도메인 계정과 도메인 구매시 등록한 이메일 접속 권한이 필요합니다. 도메인 소유자의 이메일을 통해 인증절차 진행 되므로 소유자 메일에 접속이 불가능 하다면 인증서 발급이 불가능 합니다. 2. 소유 도메인 Route53 연결 도메인이 확보 되었으면 두번째로 AWS Route53 서비스에 도메인을 연결 시켜야 합니다. Route 53 > HostZone 에 해당 도메인 정보를 등록하고 NS Value 값을 따로 기록해 둡니다. 3. 소유 도메인의 네임서버 설정 변경 도메인 관리 사이트에 접속하여 위에서 따로 기록해둔 NS Value 값을 네임서버 설정 화면에서 변경하여 적용 합니다. 아래는 가비아의 네임서버 설정 화면 입니다. 네임서버 변경은 일정 시간이 필요 하므로 바로 적용되지 않으면 잠시 기다렸다 다음작업을 진행 합니다. 4. 인증서 요청 도메인에 대한 ACM에서 증명서를 발급받아야하므로, AWS Dashboard에서 Certificate Manage 로 이동합니다. “인증서  요청” 버튼을 선택합니다. 본인이 가지고 있는 도메인 네임을 ibksplatform.com  과 같은 형식으로 입력합니다. 서브 도메인을 사용 예정이라면 *.ibksplatform.com 과 같은 형식으로 이름을 추가합니다. 이렇게 ...
자세한 내용 보기

[social 연동]웹 환경에서 Social 연동해서 로그인하기 - Facebook 1) App Key 발급

작성자: -
이미지
웹에서 Facebook 연동해서 로그인하는 방법을 알아보기 전에 Facebook Api 를 이용하기 위해 App Key를 발급받아야 합니다. 우선 Facebook 개발자 센터를 접속합니다. Facebook developer URL : https://developers.facebook.com/ 화면 위에 상단에 로그인을 버튼을 누르고 facebook ID 와 Password 로 로그인을 합니다. (처음 시작하기전에 facebook 회원가입을 언급 하지 않았지만 facebook api 사용하기 위해서는 facebook 회원가입은 필수 입니다.) 로그인 후에 위 상단에 앱만들기를 누르면 위와 같은 팝업이 보이고 표시이름을 넣고 앱만들기 버튼을 클릭합니다. 클릭하면 보안관련 캡챠 화면이 보이고 입력이 끝나면 다음과 같은 화면이 보입니다. 왼쪽 메뉴에서 Dashboard 를 누르면 다음과 같은 화면 보입니다. 대쉬보드에 앱시크릿 코드에 보기 버튼을 클릭합니다. 클릭 후에 비밀번호 입력 창이 나오고 Facebook 비밀번호를 입력 한후 제출 버튼 클릭 합니다. 그다음 화면에서 앱연동할 때 사용하는 앱 시크릿 코드가 발급 된 정보를 보실 수 있습니다. 다음 시간에는 앱 시크릿코드와 앱 ID로 자바 프로그램에서 연동하는 걸 공유 하겠습니다.
자세한 내용 보기