jonbeo 님의 블로그

기존 **미디어 쿼리(@media)**는 브라우저 전체 뷰포트 크기를 기준으로 반응형 디자인을 적용합니다.하지만 컴포넌트 기반 UI(React, Vue, Angular)에서는 부모 컨테이너 크기에 따라 반응형 스타일이 필요합니다.이를 해결해주는 최신 기능이 바로 @container입니다.📌 1. 기본 문법 @container (min-width: 600px) { .card { flex-direction: row; }} 👉 부모 컨테이너의 너비가 600px 이상일 때 .card 스타일 적용📌 2. 컨테이너 선언컨테이너 쿼리를 쓰려면 부모 요소에 container-type을 지정해야 합니다. .wrapper { container-type: inline-size; /* width 기준 */}?..

:has()는 흔히 **“부모 선택자”**로 불리며, CSS에서 드디어 상위 요소를 조건부로 스타일링할 수 있게 해줍니다.기존에는 순수 CSS만으로 불가능했던 패턴을 해결해주는 강력한 기능입니다.📌 1. 기본 문법 A:has(B) { ... } 👉 A 요소가 B를 포함하고 있다면 스타일 적용📌 2. 폼 검증 스타일링 /* input이 비어있으면 빨간 테두리 */form:has(input:invalid) { border: 2px solid red;} 📌 기존에는 JS로 처리해야 했던 폼 상태 스타일링이 가능📌 3. 드롭다운 메뉴 제어 .dropdown:has(:hover) .menu { display: block;} 📌 부모에 :hover가 있으면 자식 메뉴 표시📌 4. 카드 UI – 버튼..

웹 보안은 단순한 기술이 아니라 서비스 신뢰성과 사용자 보호의 핵심입니다.특히 실무에서 자주 접하는 HTTPS, CORS, CSRF, XSS는 반드시 이해해야 하는 개념입니다.🟢 1. HTTPS (보안 프로토콜)HTTP + SSL/TLS 암호화데이터 전송 중 도청/변조 방지SEO에도 유리 (구글은 HTTPS 사이트를 우선 랭킹)📌 실무 팁Let’s Encrypt 무료 인증서 활용서버/클라우드 배포 시 기본적으로 HTTPS 적용🔵 2. CORS (Cross-Origin Resource Sharing)브라우저의 보안 정책: 다른 도메인 요청 차단예: https://myapp.com → https://api.other.com 요청 시 제한📌 해결 방법서버에서 Access-Control-Allow-Ori..

데이터를 직관적으로 보여주려면 시각화 도구가 필요합니다.Chart.js는 가볍고 직관적인 API를 제공하여,막대 그래프, 선 그래프, 원형 차트, 레이더 차트 등 다양한 차트를 쉽게 구현할 수 있습니다.⚙️ 1. 설치 및 기본 세팅설치 npm install chart.jsHTML 예시 JS 예시 import { Chart } from "chart.js";const ctx = document.getElementById("myChart").getContext("2d");new Chart(ctx, { type: "bar", // 차트 타입 data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple"], datasets: [{ label: "..