Sass/SCSS built-in functions

🎨 Color Functionslighten()lighten($color, 20%)Makes a color lighterdarken()darken($color, 20%)Makes a color darkerrgba()rgba($color, 0.5)Adds transparencyopacify()opacify($color, 0.2)Increases opacitytransparentize()transparentize($color, 0.2)Decreases opacitymix()mix(red, blue, 50%)Mixes two colorsadjust-color()adjust-color($color, $red: 20)Adjusts color channelsscale-color()scale-color($color..

  • format_list_bulleted 개발 언어 & More/CSS
  • · 2026. 8. 27.
  • textsms

CSS Built-In Functions

🎨 Color functionsFunctionExamplePurposergb()rgb(255 0 0)RGB colorrgba()rgba(255, 0, 0, 0.5)RGB + transparency📐 Math / sizing functionsThese are especially important in modern responsive CSS.FunctionExamplePurposecalc()calc(100% - 40px)Calculate valuesmin()min(500px, 100%)Choose smallest valuemax()max(300px, 50%)Choose largest valueclamp()clamp(16px, 2vw, 24px)Minimum → preferred → maximum🔤 St..

  • format_list_bulleted 개발 언어 & More/CSS
  • · 2026. 8. 27.
  • textsms

Claude Design 주목…AI가 바꾸는 웹디자인, 프로토타입 제작 방식

생성형 AI의 활용 범위가 콘텐츠 제작을 넘어 디자인 영역으로 확대되고 있다. 자연어를 기반으로 웹페이지와 사용자 인터페이스(UI), 프로토타입 등의 제작을 지원하는 AI 도구가 등장하면서 디자인 업무의 방식도 빠르게 변화하는 모습이다. 특히 Anthropic의 Claude를 중심으로 AI와 대화하면서 디자인 결과물을 구체화하는 방식이 주목받고 있다. 사용자가 원하는 디자인의 목적과 구성, 분위기 등을 자연어로 설명하면 AI가 이를 바탕으로 시안을 만들고, 이후 추가적인 지시를 통해 결과물을 수정하는 방식이다. AI와 대화하며 디자인…Claude Design의 특징 Claude Design의 가장 큰 특징은 디자인 과정에 자연어 인터페이스를 활용한다는..

  • format_list_bulleted Software & Tools/디자인 관련 (Design Related)
  • · 2026. 8. 12.
  • textsms

웹 디자인에서 둥근 모서리(Border Radius)는 왜 중요한가?

요즘 대부분의 웹사이트와 모바일 앱을 보면 버튼, 카드, 입력창, 모달 등 다양한 UI 요소에 둥근 모서리가 적용되어 있습니다. Apple, Google, Microsoft와 같은 글로벌 기업의 디자인 시스템에서도 둥근 모서리는 중요한 디자인 원칙 중 하나로 자리 잡았습니다.하지만 둥근 모서리는 단순히 "예뻐 보이기 위한 디자인 트렌드"일까요? 아니면 사용자 경험(UX)에 실제 영향을 주는 디자인 요소일까요?연구 결과에 따르면 Border Radius는 사용자의 감정적 반응, 인터페이스 인식, 그리고 브랜드 이미지 형성에 영향을 미치는 중요한 시각 요소입니다.1. 인간은 왜 둥근 형태를 선호할까?심리학 연구에서는 사람들이 날카로운 형태보다 곡선 형태를 더 선호하는 경향이 있다는 결과가 반복적으로 나타났습..

  • format_list_bulleted Software & Tools/디자인 관련 (Design Related)
  • · 2026. 7. 9.
  • textsms

구글 AI 스튜디오(Google AI Studio): 탄생 배경부터 실제 활용까지 생성형 앱 대중화의 핵심

구글이 개발자와 크리에이터를 위한 웹 기반 생성형 AI 개발 환경인 '구글 AI 스튜디오(Google AI Studio)'를 통해 AI 애플리케이션 개발 문턱을 대폭 낮추고 있다. 구글 AI 스튜디오는 복잡한 설정이나 코딩 지식이 부족해도 자연어 프롬프트 입력만으로 구글의 최신 AI 모델을 실험하고 서비스를 구축할 수 있는 혁신적인 플랫폼이다.코드 한 줄 없이 앱을 만드는 '바이브 코딩' 환경 제공구글 AI 스튜디오의 가장 큰 강점은 복잡한 개발 인프라를 구축할 필요가 없다는 점이다. 최신 Gemini 모델을 비롯해 Imagen, Veo 등 구글의 강력한 미디어 생성 모델을 웹 브라우저에서 즉시 활용할 수pack있다.최근 업데이트된 네이티브 코드 편집 기능과 에이전트 도구를 통해 사용자들은 프롬프트 하나..

  • format_list_bulleted Software & Tools/AI 관련
  • · 2026. 6. 4.
  • textsms

구글 검색, '보는 창'에서 '작업 공간'으로… AI 모드 '캔버스' 전면 개방

단순 정보 탐색기에서 생산성 플랫폼으로의 진화… 검색과 창작의 경계를 허물다구글이 자사 AI 검색 기능인 'AI 모드(AI Mode)' 내에서 '캔버스(Canvas)' 기능을 전면 개방하며 검색 엔진의 패러다임 전환을 선언했다. 과거 검색이 필요한 정보를 찾아 외부 사이트로 연결해 주는 '관문' 역할에 그쳤다면, 이제는 검색 창 내부에서 직접 문서를 작성하고 코드를 짜며 앱을 만들어내는 '완성형 작업 공간(Workspace)'으로 탈바꿈하고 있다.1. '구글 서치 캔버스'란 무엇인가구글 서치 캔버스는 AI 모드에서 사용자가 검색한 정보를 바탕으로 실시간 협업 및 창작 활동을 할 수 있도록 지원하는 일종의 가상 워크스페이스다. 사용자가 검색창에 특정 프로젝트나 아이디어를 입력하고 캔버스 옵션을 활성화하면,..

  • format_list_bulleted Software & Tools/AI 관련
  • · 2026. 6. 2.
  • textsms