본문 바로가기

전체보기

피그마(Figma)의 이미지 사이즈(해상도) 삽입/첨부 크기 제한 피그마 첨부 이미지의 크기 제한은 4096 픽셀 피그마는 클라우드 기반으로 구동되는 웹 기반의 프로그램입니다. 모든 작업 내용이 클라우드에 기록되기 때문에 대용량 파일을 첨부하는 것은 클라우드 서버 환경에 큰 부담을 줄 수 있습니다. 그런 이유로 피그마는 첨부 이미지 삽입 시의 이미지 크기를 제한하고 있습니다. 구체적으로 4096 픽셀이 넘어가는 이미지에 대해서는 첨부 시에 자동으로 리사이징 처리를 하여 피그마에 첨부되도록 설정이 되어 있습니다. 대형 이미지를 첨부하려고 하면 피그마가 자동으로 토스트팝업을 통한 안내를 주면서 이미지를 리사이징합니다. 이러한 제약에서 벗어나기 위해서는 대형 이미지를 짤라서 넣거나, 이미지 품질을 좀 포기하더라도 해상도를 줄여서 삽입하는 방법이 있습니다. 이러한 제약사항을 ..
아이폰(iOS) 가상머신으로 모바일웹 테스트 환경 구축하기 모바일웹 개발의 경우 데스크탑용 브라우저에서 제공하는 반응형 브라우저 확인 기능을 통해서 가장 많이 진행이 되지만, 실제 모바일 기기에서의 실행환경과는 다소 차이가 있습니다. 실제 기기를 구비하여 실행환경을 구축하는 것이 가장 이상적일테지만, 현실적인 제약이 있기에 가상머신을 통한 테스트도 효율적으로 활용할 수 있습니다. 가상머신 모바일웹 테스팅의 이점 : 최대한 유사한 실행환경 확인 + 과거 버전 환경 확인 가상머신을 통한 모바일웹 테스팅 환경을 구축하는 것의 이점은, 최대한 실제 기기 구동환경과 유사한 실행환경을 확인할 수 있다는 점 외에도 과거 OS와 브라우저 버전에 대한 테스트를 진행할 수 있다는 점입니다. 특히 모바일 사파리의 경우 버전에 따라 다양한 버그와 버전 비호환성을 내재하고 있기 때문에..
[CSS] webkit 브라우저 input 텍스트 필드의 색상 변경하기 크롬, 사파리 등에서 텍스트필드의 글자색이 회색으로 나타날 때... 브라우저별로 input 텍스트필드에 대한 에이전트 스타일은 상이합니다. 사파리, 크롬에서 원하는 색상으로 텍스트 색상을 설정하려면 별도의 속성 정의가 필요합니다(특히 #000, #FFF 등의 색으로 변경할 때 조금 회색빛이 도는 이슈를 방지할 필요가 있을 때). 이런 상황은 iOS 및 Safari 또한 스타일 강제성이 다소 높은 편입니다. 특히 Disabled 속성이 부여된 input 요소에 대한 강제성이 강한 편인데, 기본적으로 40%의 투명도를 갖는 회색으로 표현이 됩니다. 이를 수정하기 위해서는 별도 Webkit 브라우저(Safari, Chrome, Edge)용 속성을 사용하고, opaicty를 함께 부여해 주어야 합니다. 하기 코..
[CSS] 채워지는 flex 요소 만들기 및 줄바꿈 주기 [코드예제] flexbox 콘테이너의 자식 요소들이 자동으로 콘테이너를 채우게 하는 레이아웃을 구성하고자 합니다. 또한 flex 요소을 여러개를 나열할 때 줄바꿈을 주어서 배치할 수 있는 방법도 함께 알아 보고자 합니다. 1. flex 콘테이너를 자동으로 채우는 flex 요소 만들기 : flex-grow flex를 지정했을 때 기본적인 박스모델 구조는 아래 이미지와 같이 flex 요소들의 너비가 auto로 할당되며, 왼쪽 정렬로 배치가 됩니다. 본 포스트에서는 flex 요소의 너비를 콘테이너의 남은 영역만큼 채워지도록 하는 레이아웃을 구성하고자 합니다. 그러기 위해서는 flex-grow 속성을 원하는 flex 요소에 할당할 필요가 있습니다. flex-grow는 flex 요소를 얼마나 큰 비율로 배치할까에..
아이폰으로 모바일웹(사파리) 개발자 모드 디버깅 환경 구축하기 크롬을 통해서 안드로이드 기기의 모바일웹 디버깅 환경이 구축한 것처럼, 사파리를 통해서 아이폰의 모바일웹 디버깅 환경 또한 구축이 가능합니다. 다만 사파리의 경우 맥에서만 구동되는 어플리케이션이기 때문에 맥 기기를 통해서 진행하셔야 합니다. 윈도우용 사파리가 과거에 있었기 때문에, 윈도우에서도 사파리 구동이 가능하다고 생각하는 경우가 있는데 해당 버전은 2011년 이후로 지원이 끊긴, 사장된 어플리케이션입니다. 사파리는 맥과 iOS 전용 어플리케이션입니다. 1. 맥 컴퓨터 사파리에서 개발자 도구 활성화 사파리의 옵션 메뉴에서 개발자 도구를 활성화합니다. 2. 아이폰 또는 iOS 기기 사파리에서 Web Inspector 활성화 설정 메뉴의 사파리, 그리고 고급 기능 중 Web Inspector를 활성화합니..
안드로이드 기기로 모바일웹(크롬) 개발자 모드 디버깅 환경 구축하기 데스크탑 컴퓨팅 환경에서 제작된 개발산출물은 모바일 컴퓨팅 환경을 정확하게 시뮬레이션하지 못합니다. 그런 이유로 가장 확실한 모바일웹 디버깅 환경을 구축하는 방법은 모바일 기기를 통해서 디버깅을 하는 것입니다. 안드로이드 기기의 경우 크롬 웹브라우저를 통해 맥이든 윈도우든 상관 없이 쉽게 디버깅 환경을 구축할 수 있습니다. 유선 케이블을 이용하지 않고 무선으로 연결하거나, 크롬 외 다른 브라우저로도 모바일웹을 디버깅할 수 있는 방법은 별도로 존재하니, 해당 내용 확인이 필요한 경우에는 별도 리서치를 추가적으로 진행하시기를 권장 드립니다. 1. 안드로이드 기기의 개발자 모드 활성화하기 안드로이드 설정에 들어가서 개발자 옵션 메뉴에 진입해 USB 디버깅 기능을 활성화합니다. 더불어 원활한 디버깅 환경 구축을..
CSS 클래스 네이밍 시 container vs wrapper 차이 구분하기 콘테이너로 정할까, 랩퍼로 정할까... container와 wrapper 모두 일반적으로 엘레먼트를 포괄하는 요소로서의 의미를 지니고, 클래스 이름으로 많이 사용되는 단어들입니다. 무언가를 포함한단는 데에서 같은 의미의 단어로 사용할 수 있고, 작성자와 해독자 입장에서 구분 없이 해당 내용을 받아들이는 데에 큰 문제가 없을 것입니다. 다만 보다 엄격하게 두 단어를 구분하여 사용한다고 하면 다음과 같은 내용을 참고하여 의미 구분을 할 수 있을 것으로 보입니다. 본 내용은 스택오버플로우에서 2010년 논의된 'CSS Language Speak: Container vs Wrapper?'의 내용을 기반으로 작성되었습니다. 해당 논의 내용을 보면, 기보적으로 차이를 두지 않고서 사용해도 무방하지만, 엄격하게 구분..
Border 속성이 부여된 박스 내부에 absolute 포지션 사용하기 Border는 CSS 박스의 콘테이닝 영역에서 제외되는 특징을 지닙니다 Border 속성은 CSS 박스 모델에서 별도의 고유 구성체계를 지니는 것처럼 보입니다. 값이 지정되면 border가 속하는 박스의 width와 height 값에 상관없이 영역을 차지하지만, 박스에 종속된 것이 아닌 별도의 개체처럼 활용이 됩니다. Border 속성의 개별성이 가장 잘 드러나는 특징은 border가 속하는 박스의 실제 콘텐츠를 감싸는 콘테이닝 영역에서 제외된다는 점입니다. 100px x 100px의 박스를 만들고 2px의 border를 부여한 박스가 있다고 했을 때 border는 콘테이닝 영역에서 분리됩니다. 이것은 박스 내부에 자식 엘리먼트의 위치를 정하는 데에 불편요소로 작용할 수 있습니다. Absolute 등의 ..
외주/과외 문의

티스토리툴바