민즈코드 개발 블로그

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 < radiusSum) { return true; } // 두 원이 충돌하지 않은 경우 return 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; } ..

SMACSS의 개념 SMACSS는 "Scalable and Modular Architecture for CSS"의 약어로, CSS를 보다 확장 가능하고 모듈화된 방식으로 구성하는 CSS 아키텍처 방법론이다. SMACSS는 CSS 코드를 다양한 모듈로 분리하고, 각 모듈을 일관성있게 작성하고 관리하는 방식을 제안한다. 이를 통해 CSS 코드의 유지보수성과 재사용성을 향상시키며, 프로젝트 규모가 커져도 일관된 코드 작성이 가능해진다. SMACSS는 5가지 유형의 모듈을 정의한다. Base: 기본적인 스타일을 정의하는 모듈 Layout: 레이아웃을 정의하는 모듈 Module: 기능을 가진 모듈 State: 상태를 정의하는 모듈 Theme: 디자인 테마를 정의하는 모듈 각 모듈은 적절한 접두사를 사용하여 클래스..

BEM의 개념 BEM은 "Block, Element, Modifier"의 약자로, CSS를 구조화하고 모듈화하는 방법론 중 하나이다. 이 방법론은 유지 보수가 쉬운, 확장 가능하며 재사용 가능한 CSS 코드를 작성하는 것을 목표로 한다. BEM 방법론은 다음과 같이 작동한다. Block: 페이지나 모듈을 구성하는 큰 단위를 나타낸다. 이것은 레이아웃이나 UI 컴포넌트를 나타내는 이름을 가질 수 있다. Element: Block 내부에 있는 작은 단위를 나타낸다. 이것은 블록 내부의 부분적인 요소를 나타내며, 블록 이름을 접두사로 사용하여 작성된다. Modifier: 블록이나 요소의 상태나 모양을 나타낸다. 이것은 블록이나 요소 이름 뒤에 하이픈을 사용하여 작성된다. 예를 들어, 블록으로 &#39;head..

OOCSS의 개념 OOCSS(Object Oriented CSS)는 CSS 작성 방법 중 하나로, CSS를 객체지향 프로그래밍(OOP) 원리에 따라 구조화하는 방법이다. 이를 통해 재사용성과 유지보수성이 높은 CSS 코드를 작성할 수 있다. OOCSS에서는 CSS 스타일을 클래스로 정의하고, 이를 HTML 요소에 적용한다. 이 때 각 클래스는 하나의 기능을 수행하는 모듈 형태로 설계된다. 이렇게 클래스를 재사용 가능한 모듈 단위로 분리하면, 불필요한 스타일 중복을 피하고, 코드의 유지보수성을 높일 수 있다. 또한, OOCSS에서는 스타일과 레이아웃을 분리하는 것이 중요하다. 스타일은 객체의 시각적인 표현을 담당하고, 레이아웃은 객체의 배치와 구조를 담당한다. 이를 통해, 스타일과 레이아웃을 개별적으로 수..