민즈코드 개발 블로그

Claude Skills란?Claude Skills는 Anthropic이 2025년 10월에 출시한 혁신적인 기능으로, Claude AI를 특정 작업에 특화된 전문가로 만들 수 있는 모듈식 시스템이다.간단히 말해, Skills는 지침, 스크립트, 리소스가 포함된 폴더다. Claude는 작업에 필요할 때만 관련 Skill을 자동으로 불러와 사용한다. 마치 Claude에게 맞춤형 온보딩 자료나 업무 매뉴얼을 제공하는 것과 같다.Skills의 핵심 구성 요소SKILL.md 파일: YAML 메타데이터와 마크다운으로 작성된 메인 지침서추가 리소스: 참고 문서, 데이터 파일 등실행 가능한 스크립트: Python 등으로 작성된 자동화 코드Claude는 작업 시작 시 모든 Skills의 이름과 간단한 설명만 확인하고,..

Tailwind CSS란 무엇인가?Tailwind CSS는 2017년 Adam Wathan에 의해 개발된 유틸리티 우선(utility-first) CSS 프레임워크이다. 기존의 Bootstrap이나 Bulma 같은 컴포넌트 기반 프레임워크와는 다른 접근 방식을 취하며, 작은 단위의 유틸리티 클래스들을 조합하여 빠르고 효율적으로 사용자 정의 디자인을 구축할 수 있게 해준다.왜 Tailwind CSS를 사용해야 할까?1. 빠른 개발 속도HTML을 떠나지 않고도 스타일링을 완료할 수 있어 개발 속도가 크게 향상된다. 별도의 CSS 파일을 작성하거나 클래스 이름을 고민할 필요가 없다. 클릭하세요2. 일관된 디자인 시스템Tailwind는 미리 정의된 색상, 간격, 타이포그래피 등의 디자인 토큰을 제공하여 프로젝..

CSS를 작성하다보면 같은 스타일을 여러 선택자에 적용해야 하는 경우가 빈번하다. 이전까지는 각각의 선택자를 콤마로 나열하거나 중복된 CSS 규칙을 작성해야 했으나, CSS Level 4의 새로운 선택자 :is()가 추가됨으로써 보다 효율적이고 읽기 쉬운 CSS 작성이 가능해졌다.개요 및 구문:is() 선택자는 CSS Selectors Level 4에서 도입된 의사 클래스(pseudo-class)로, 여러 선택자를 그룹화하여 하나의 규칙으로 처리할 수 있게 해준다. 이를 통해 CSS 코드의 중복을 줄이고 가독성을 향상시킬 수 있다.:is() 선택자의 구문은 다음과 같다.:is(selector1, selector2, selector3) { /* CSS rules */}여기서 selector1, selec..

CSS Container Queries컨테이너 쿼리(Container Queries)는 CSS에서 미디어 쿼리(Media Queries)와 유사하지만, 브라우저의 전체 화면 크기가 아닌 특정 요소(컨테이너)의 크기를 기준으로 스타일을 적용할 수 있게 해준다. 이를 통해 반응형 디자인에서 더욱 정교한 스타일 적용이 가능해진다.기존 미디어 쿼리와의 차이점미디어 쿼리: 브라우저 창(viewport)의 크기에 따라 스타일이 적용컨테이너 쿼리: 특정 컨테이너 요소의 크기에 따라 스타일이 적용미디어 쿼리는 페이지 전체 레이아웃을 조정할 때 유용하지만, 페이지 내부의 개별 요소의 크기가 다양해지면서 요소 자체의 크기에 따라 스타일을 조정하는 것이 필요하다. 이를 해결하기 위해 컨테이너 쿼리가 등장 했다.사용 예시기본..

웹스퀘어 input 컴포넌트에서 숫자만 입력 받기 위해서 아래와 같이 코드를 작성하면 된다. numeric input 컴포넌트의 dataType="number" 속성을 사용하면 숫자만 입력이 가능하다.input 컴포넌트에 inputmode="numeric" 속성을 추가함으로써 모바일 디바이스에서 숫자 키패드가 올라오게 한다.

반지름이 서로 다른 두 원의 충돌여부를 확인하는 JavaScript 함수 예시이다.이 함수는 두 원의 중심 간 거리와 반지름 길이를 계산하여 충돌 여부를 판단한다.function checkCollision(x1, y1, r1, x2, y2, r2) { // 두 원의 중심 간 거리 계산 var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // 두 원의 반지름 길이 합 계산 var radiusSum = r1 + r2; // 두 원이 충돌한 경우 if (distance 두 원의 중심 좌표와 반지름 길이를 매개변수로 받는다. 두 원이 충돌한 경우 true를 반환하고, 그렇지 않은 경우 false를 반환한다.

CSS를 코딩하다보면 특정 요소의 부모요소에 스타일을 적용해야 할 경우가 있다. 이전 까지는 JavaScript로 특정 요소의 부모요소에 class를 추가 한다던지 복잡한 CSS 선택자를 사용해야 했으나 CSS Level 4의 새로운 선택자 :has()가 추가 됨으로써 보다 쉽게 적용이 가능해졌다.개요 및 구문:has() 선택자는 상대적으로 새로운 CSS 선택자로 하위 요소에 따라 요소를 선택할 수 있다. 복잡한 CSS 선택자 또는 JavaScript를 사용하지 않고도 특정 하위 요소를 포함하는지 여부에 따라 요소를 선택할 수 있다.:has() 선택자의 구문은 다음과 같다.selector:has(sub-selector) { /* CSS rules */}여기서 selector는 유효한 CSS 선택자이고 ..

CSS 선택자 종류CSS 선택자에는 여러 종류가 있으며, 각 선택자는 HTML 문서의 요소를 선택하는 데 사용된다. 다음은 일반적인 CSS 선택자 종류이다.요소 선택자 (Element Selector)CSS의 요소 선택자(Element Selector)는 HTML 요소의 이름을 기반으로 스타일을 적용하는 선택자이다. 요소 선택자는 가장 기본적인 선택자 중 하나로, 특정 HTML 요소에 스타일을 적용할 때 사용한다. 요소 선택자는 다음과 같은 형식을 가진다.요소이름 { 속성: 값;}여기서 "요소이름"은 HTML 문서에서 태그 이름을 의미한다. 예를 들어, 모든 h1 요소에 적용되는 스타일을 설정하려면 다음과 같은 코드를 작성한다.h1 { color: red; font-size: 24px;}위 코드는 ..