jonbeo 님의 블로그

Figma에서 Clipping Mask 사용법 정리 – 마스크 개념과 실전 적용

Figma는 웹 기반의 UI/UX 디자인 툴로, 디자이너와 협업자 모두에게 직관적인 인터페이스를 제공합니다.그중에서도 Clipping Mask(클리핑 마스크)는 이미지나 요소를 특정 도형 안에 가두거나 잘라서 표현하고자 할 때 매우 유용하게 사용되는 기능입니다.이번 포스팅에서는 Clipping Mask의 개념과 만드는 방법, 그리고 실전 활용 예제를 차례대로 정리해보았습니다.Clipping Mask란 무엇인가요?Clipping Mask는 지정된 도형의 영역 안에 콘텐츠를 가두는 기능입니다.Photoshop의 레이어 마스크와 유사한 개념으로, 사용자가 선택한 도형 안에서만 콘텐츠가 표시되도록 도와줍니다.예를 들어 원형 도형을 기준으로 사진을 원형으로 잘라서 보여주고 싶을 때, Clipping Mask를 적..

엑셀 실무에서 진짜 자주 쓰는 함수 TOP 10 (초보자용 예제 포함)

엑셀에 수백 개 함수가 있다지만...실제로 자주 쓰는 건 딱 10개 안팎이라는 사실!오늘은 회사에서 자주 쓰이는 필수 함수 10가지를 예제와 함께 소개하겠습니다.초보자도 따라 할 수 있게 쉬운 예제로 구성했으니 지금부터 하나씩 마스터해봐요!✅ 1. SUM범위의 합계를 계산=SUM(A1:A5)✅ 2. AVERAGE범위의 평균값 계산=AVERAGE(B2:B6)✅ 3. IF조건에 따라 결과 다르게 표시=IF(C2>=70, "합격", "불합격")✅ 4. COUNT숫자가 들어간 셀의 개수 세기=COUNT(A1:A10)✅ 5. COUNTA빈칸 제외하고 셀 개수 세기=COUNTA(A1:A10)✅ 6. VLOOKUP왼쪽 기준으로 값을 찾아 반환=VLOOKUP("홍길동", A2:C10, 2, FALSE)✅ 7. HLOO..

[CSS 기초] px, %, em, rem 차이 완전 정리! 언제 어떤 단위를 써야 할까?

🤔 단위? 그냥 px만 쓰면 안 돼요?처음 CSS를 배울 때는 대부분 px(픽셀)만 사용하죠.하지만 실제 웹사이트에서는 다양한 크기와 해상도에 대응하기 위해 %, em, rem 등의 단위를 함께 써야 해요.단위마다 특성이 다르고, 어디에 어떤 단위를 쓰냐에 따라 반응형/가독성/유지보수성까지 영향을 줍니다.✅ 단위별 의미 요약단위의미기준반응형 적합도특징px고정된 픽셀 값고정 크기❌ 낮음가장 직관적이지만 반응형에 불리함%비율부모 요소 기준✅ 좋음유동 레이아웃에 자주 사용em배수 단위부모 요소의 font-size 기준⚠️ 중간계단식으로 값이 커질 수 있음rem루트 배수 단위html의 font-size 기준✅ 안정적전역에서 일관된 스타일 유지 가능 🧪 실전 예시/* px: 고정된 크기 */h1 { font..