공부하고 또 공부하는

나인패치(Nine Patch) 이미지란? ​ ​ 나인 패치는 안드로이드, iOS에서 이미지 리소스의 크기를 줄이기 위해서 꼭 필요한 절차입니다. 각 DP 별로 밀도와 크기가 모두 다르니 다른 이미지를 저장해주어야 하는데, 나인 패치를 이용하면 시스템 용량을 줄이고 하나의 이미지를 다양하게 사용할 수 있습니다. ​ 나인 패치는 쉽게 말해, 이미지를 9분할 하여 늘어나도 괜찮은 영역과 늘어났을 때 깨지는 부분을 구분해 저장하는 방식입니다. 이때 이미지 확장자는. 9.png가 됩니다. ​ 이걸 도표로 하면 이렇습니다. 모서리 부분은 늘어났을 때 깨지니, 늘어나지 않는 부분으로 적용해 주는 거죠. 버튼 UI나 타이틀 이미지 같은 곳에 많이 씁니다. 안드로이드는 기본적으로 이미지뷰를 할당한 뒤 이미지를 넣게 되면..

웹사이트의 이미지를 PC에 저장할 때 WebP라는 낯선 확장자명을 보게 될 때가 있다. 구글이 이미지 파일을 압축해 웹페이지 로딩 속도를 높이기 위해 2010년 발표한 오픈소스 이미지 포맷이다. 이름처럼 Web을 위해서 만들어진 효율적인 이미지 포맷으로 '웹피'라고 읽는다. JPG보다 압축률이 좋아 웹 사이트에 이상적인 포맷으로, IE를 제외한 거의 모든 주요 브라우저에서 이를 지원한다. 단, 포토샵을 비롯한 많은 애플리케이션이 이 포맷을 지원하지 않는다는 단점이 있다. 기존 이미지 포맷이 GIF, PNG, JPEG으로 삼분되어 있었다면 WebP는 이 세 가지 포맷을 전부 대체 가능한 특징을 가지고 있다. 대부분의 이미지 포맷이 손실 압축(JPEG)과 비손실 압축(PNG, GIF) 포맷으로 나뉘는데, W..

이미지상에 사용된 폰트가 어떤건지 알고 싶을 때 유용하게 사용할 수 있는 사이트 1. 폰트박스 beta(한글) : https://kfonts.kr/ AI한글폰트검색 이 폰트 뭐야? 사진속에 궁금한 폰트! AI가 알려줄께요! 약 4천종의 한글 폰트를 검색할 수 있는 폰트 이미지 검색 엔진. AI 한글 폰트 검색. 이미지 검색 엔진. fontbox.kr 폰트를 확인할 이미지를 업로드 하거나 해당 이미지가 업로드되어 있는 URL을 입력하면 사용된 폰트를 알려줍니다. 2. myfonts(영문) https://www.myfonts.com/ Fonts for Print, Products & Screens | MyFonts Welcome to MyFonts, the #1 place to download great @..

https://yeun.github.io/open-color/ Open Color Color scheme for UI design yeun.github.io Open Color는 오픈 소스로 자주 쓰이는 13개 컬러 정보를 상세히 제공해주는 웹서비스. 동일계열의 색장을 컬러별로 옅고 진한 내용으로 제공되며, 컬러값도 함께 있어 복사 후 바로 활용이 가능 (컬러값을 마우스로 더블 클릭 시 복사 가능) 스케치, XD, 피그마 등에서 더 빠르게 컬러 정보를 확인 할 수 있는 플러그인, 라이브러리도 다운받을 수 있음

https://www.screensizes.app/ Screen Sizes A complete guide for Apple displays www.screensizes.app iOS 기준으로 아이폰, 아이패드, 아이팟터치, 애플워치, 애플TV, 카플레이까지 여러 디바이스, 모델 별 정보를 확인할 수 있는 웹서비스 6개 디바이스를 디스플레이 크기와 상세 모델에 따라 확인 가능 ‘Screen Sizes’는 iOS 디바이스 디스플레이 및 관련 정보를 깔끔하게 정리해주는 곳으로, 디바이스 별 크기와 상세 모델에 따라 정보를 확인할 수 있도록 구성되어 있음. 아이폰 외에도 아이패드, 아이팟터치, 애플워치, 애플TV, 카플레이까지 다양한 디바이스의 해상도 및 status bar등의 내용등 다양한 내용을 접할 수 있음

RGB란? RGB 컬러모드는 빛의 혼합으로 모니터와 액정 등의 빛을 이용한 제품 색상에 기초해 색을 구현하는 모드를 말합니다. RGB는 각각 Red, Green, Blue의 이니셜로서 빛의 삼원색인 이 3가지 색을 혼합해 모든 색을 만들어 냅니다. RGB 의 3원색을 혼합하게 되면 가산혼합(더하면 더할수록 밝아짐)에 의해 맑고 밝은 색을 얻을 수가 있습니다. 일반적으로 RGB는 웹디자인과 화면용 이미지, CD-ROM, 모니터, 조명 등에 사용됩니다. 이미지를 반전시키면 밝게 반전되고 CMYK 모드에 비해 색 표현 영역이 넓기 때문에 조금 더 선명한 이미지를 만들 수 있다는 장점이 있습니다. CMYK란? CMYK는 Cyan, Magenta, Yellow 3가지를 혼합해 색을 만들어 매녀, 완전한 검정이 존..

CCL 저작물, 공공저작물, 만료저작물, 기증저작물등을 제공하는 사이트. 상단 메뉴에서 무료폰트를 클릭하면 무료로 사용할 수 있는 폰트가 아래와 같이 노출된다. 폰트에서 '저작권 보기' 버튼을 클릭하면 상업적, 비상업적 용도등 사용할 수 있는지 여부를 확인할 수 있다.

[개요] 아래와 같은 디자인의 CSS 작성방법입니다. [예시] [결과] 좌우로 배치하는 것은 float와 clear를 이용하면 구현할 수 있습니다. 가운데 정렬 또한 텍스트이기 때문에 text-align 속성을 이용하면 됩니다. 하지만 수직 가운데 정렬은 아래와 같이 구현할 수 있습니다. [padding] 첫번째로 많이 사용되는 방법은 padding을 이용한 방법입니다. 상하 여백이 얼마인지 아는 경우라면 그에 맞춰서 텍스테에 상하 padding을 주면 됩니다. [예시] [결과] [line-height] line-height는 본래 줄 간격을 나타내는 매트릭이지만, 인라인 요소의 수직 가운데 정렬을 구현하기 위해서도 널리 이용됩니다. 이 값은 160%, 1.8 등 비율로도 표현할 수 있지만 px단위로도 ..

[left와 margin-left] absolute position의 left와 margin-left 속성을 잘 이용하면 이를 구현할 수 있습니다. left를 일단 50%주고, width의 절반만큼 더 왼쪽으로 이동시키면 됩니다. HTML 요소의 좌표계는 중앙이 아닌 좌상단이기 때문입니다. margin-left 속성은 신기하게도 음수 값을 주면 그 값만큼 요소를 왼쪽으로 이동시킵니다. 이 특징을 이용하면 left:50%, margin-left:-{width/2} 의 값을 주면 가운데 정렬이 된 것처럼 보입니다. 단 width를 동적으로 가져와 절반 만큼 사용하는 방법은 일반적으로 존재하지 않습니다. 직접 width와 padding을 계산해서 적어주어야 합니다. 또 absolute 요소는 부모의 heigh..

[float + clear 속성으로 수평 레이아웃 구성하기] 먼저 수평으로 배치되어야 할 요소들에게 float:left 를 줍니다. 만약 특정 요소만 오른쪽에 고정되어야 한다면 right를 줄 수도 있습니다. 그리고 이들을 감싸는 컨테이너를 하나 만들고, :after 가상 선택자에서 clear를 하도록 하면 됩니다. [예시] [결과] 아래와 같이 작성을 하게 되면 복잡한 형태의 레이아웃도 만들 수 있습니다. main이 수평 컨테이너 역할을 하는 것과 같습니다. [예시] [결과] [종합] 컨테이너는 고유하지 않습니다. 컨테이너 안에 다른 컨테이너가 들어갈 수도 있고, 컨테이너가 수직으로 여러 개 배치될 수도 있습니다. [예시] [결과]