# pixel

dlawlcoco

앱을 개발하면서 가장 걱정되는 해상도에 따른 깨짐..! 해상도가 달라서 발생하는 문제라면 거의 대부분 기기 화면 크기가 달라 디자인이나 글씨 등이 깨지거나 잘리는 문제를 말한다. 개발 과정에서 가장 고민했던 것 중 하나였는데, 다양한 해결 방법이 있겠지만 우리 팀에서는 config파일을 만들어 사용했다. 상당히 효율적인 해결책이라 생각되어 소개하게 되었다. config파일을 생성해 자주 변경될 수 있는 변수값들을 정리하고, 이런 함수를 추가했다. UIScreen을 이용한 코드인데 Spacer()를 활용해 글자 간 간격을 조정할 때 비율로서 만들어진 함수를 불러다 사용하면 화면 크기가 달라지더라도 비율로 취급했기 때문에 간격이 유지된다. Height도 동일하게 생성할 수 있다. > 사용예시 추가적으로 GeometryReader도 사용했는데 글자 크기를 비율

comdongsam

Asset에 이미지를 추가하면? Xcode에서 이미지를 추가하면 처음 마주하는 모습은 아래와 같습니다. 우리가 추가한 이미지는 1x라는 칸에 들어가 있고 추가적으로 2개의 이미지를 2x, 3x에 넣어주어야 할 것 같은 느낌입니다. 1x, 2x, 3x? 이 세가지는 무슨 차이일까요? 이 차이를 알기 위해서는 point와 pixel의 차이를 알아야 합니다. point UI의 layout과 position을 정의하기 위해 사용하는 단위입니다. AutoLayout, SwiftUI의 frame, padding 등에서 정의하는 값이 바로 point 값입니다. 1/72 인치를 의미합니다. pixel 디스플레이의 가장 작은 단위를 이야기합니다. pixel 하나하나가 모여서 하나의 스크린을

ohmy0418

Pixel 픽셀 단위는 CSS의 가장 기본적인 단위이다. 픽셀 단위로 값을 입력하는 것은, 내가 원하는 값을 정확하게 이 값이라고 절댓값으로 단호하게 선언하는 것이다. 1px은 사용자 디스플레이 기기의 논리적 해상도 1pt에 대응하며, 픽셀 단위로 지정한 크기는 나중에 크기를 변경하고 싶다면, 다른 픽셀 값으로 지정해야 한다. Rem rem은 CSS3 표준에서 등장했으며, Root EM이 어원이다. HTML 루트 요소의 폰트 사이즈를 계산의 베이스로 하는 방식으로 사이즈를 지정하는 것이다. 즉, 문서의 루트(root | html)의 글자 크기에 상대적으로 글자 크기를 조정하는 것이다. 사용자가 브라우저의 기본 폰트 크기를 어떤 값으로 설정했든 간에 이에 따른 가변 텍스트 크기에 맞춰서 사이트 레이아웃이 적절히 조정될 수 있도록 하려는 것이다. 위의 설명처럼 rem 단위의 픽셀 값 변환은 html 요소의 폰트 크기에 따라 결정되는데, 단위를 직접 지정해서

tootb

2.1. The power of relative values CSS는 웹페이지에 동적바인딩(late-binding) 스타일을 부여한다. > 동적바인딩(late-binding) 바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위를 의미. 예를 들어 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바로 바인딩. 정적 바인딩(static binding) : 실행 시간 전에 일어나고, 실행 시간에는 변하지 않은 상태로 유지되는 바인딩 동적 바인딩(late binding) : 실행 시간에 이루어지거나 실행 시간에 변경되는 바인딩 2.1.1. The struggle for pixel-perfect design 웹 환경에서는 사용자가 브라우저 사이즈를 조절할 수 있으며 이에 맞는 CSS가 적용되어야 한다. 더욱이 사용자가 브라우저 창 사이즈를 새로 설정할 수도 있기 때문에 페이지를 만들 당시

workspace

지난 2월 10일, Android 13 개발자 프리뷰가 처음으로 공개되었습니다. 자세한 사항은 링크를 참고하세요! 개인적으로는 여태껏 Final Release 시점인 9월쯤에나 새 버전을 들여다 봤었고 최신 플래그십(삼성 기준)에 적용되는 시점인 12월 쯤 대응을 마무리했는데 올해는 왠지 일찍 맛보고(?) 싶다는 생각이 들었어요. > 매년 이뤄지는 OS 업데이트는 개발자 입장에서 호재이기도 하고, 악재이기도 하다는 평입니다. (계속 일할 수 있다 vs 대응할 것이 생겼다) 😂 이 글에서 소개 해드릴 내용은 이런 프리뷰 이미지를 어떻게 설치 하는지?에 대한 것입니다. 대략적인 느낌을 보는 것으로는 에뮬레이터로도 충분하지만, 저는 실제 기기 (Pixel 4 XL)에 올려서 사용 해보고자 했습니다. 조

dyeudsla

디지털 화면은 수많은 점들로 이루어져 있다. 우리들 눈에는 한보이지만, 현미경을 들이대면 보일 수도??... 이 점을 Pixel(화소)라고 하며, 각 Pixel에는 RGB(Red, Green, Blue) 3개의 색상을 강도를 조절하여 표현한다. 인간 눈의 망막 시세포도 대략 3가지로 이루어져 있다. 일부 사람들이나 동물들은 종류가 하나씩 더있거나 하는 경우가 있다. 색을 조금더 세밀하게 인지한다. 3가지 색으로 표현되는 점들로 구성된 디지털 화면에 표시될 이미지를 저장하는 방법 중 가장 단순한 방법은 각 점 하나마다 색상 값을 저장하는 것이며, 이를 raster(래스터) 또는 bitmap(비트맵)방식이라고 한다. 각 색상별로 0~255(2^8=256) 사이의 값으로 색의 감도를 표시한다.