jonbeo 님의 블로그

SCSS는 CSS를 더 모듈화하고 재사용 가능하게 만들어주는 CSS 전처리기입니다.그중 @mixin은 반복되는 스타일을 묶어서 재사용할 수 있도록 해주는 기능입니다.즉, 자주 사용하는 CSS를 일일이 복붙하지 않고 한 번에 불러와 사용할 수 있습니다! 🔁🧪 1. 기본 문법@mixin 이름 { 스타일속성: 값;} 사용할 때는 @include 키워드를 사용합니다:@include 이름; 💡 2. 간단 예제📌 예제: 공통 버튼 스타일 만들기@mixin button-style { padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer;} 사용 예:.btn-primary { @include button-style; b..

CSS로 레이아웃을 구성할 때 가장 많이 사용하는 두 가지 방법이 바로 Flexbox와 Grid입니다.처음에는 비슷해 보여도, 사용하는 목적과 상황에 따라 완전히 다른 결과를 만들어냅니다.이번 포스팅에서는 ✅차이점 ✅사용 시기 ✅실무 예제 ✅추천 사용처까지 한 번에 정리해 보겠습니다.🔍 1. 기본 개념 비교 구분 Flexbox Grid 🎯 목적1차원 레이아웃 (row 또는 column)2차원 레이아웃 (row + column)📐 구성주축(main axis) 기준 정렬행과 열 기준 배치🧲 정렬요소 간 공간 배분, 정렬정확한 위치 지정 및 정렬 가능🧩 유연성요소 크기 자동 조정격자 기반 정확한 레이아웃 💡 2. 언제 Flexbox를 사용할까?Flex는 다음과 같은 상황에서 강력한 효과를 발휘합..

안녕하세요 😊웹 개발에서 요소에 움직임을 줄 때 가장 많이 쓰는 기능이 바로 **트랜지션(transition)**과 **애니메이션(animation)**입니다.두 기능 모두 CSS만으로 멋진 효과를 낼 수 있지만, 헷갈리기 쉽습니다.오늘은 트랜지션과 애니메이션의 차이를 초보자도 쉽게 이해할 수 있도록 정리하고,실무에서 어떻게 활용하면 좋은지 예제와 함께 소개하겠습니다.📍 1. CSS 트랜지션(transition)상태 변화가 있을 때만 실행마우스를 올리거나, 클래스를 추가·제거할 때 동작짧고 단순한 효과에 적합예시: 버튼에 hover 시 색상 변경 button { background-color: #2196f3; color: #fff; padding: 10px 20px; border: none; ..

안녕하세요 😊CSS에서 색상이나 폰트 크기 같은 값을 여러 군데서 반복해서 쓰다 보면,한 번 변경하려고 해도 모든 곳을 찾아 수정해야 해서 번거롭습니다.이럴 때 **CSS 변수(Custom Properties)**를 사용하면 유지보수가 훨씬 쉬워집니다.📍 1. CSS 변수란?CSS에서 값을 변수처럼 저장하고 재사용할 수 있는 기능--변수명 형식으로 선언, var(--변수명)으로 사용변수의 스코프(범위) 설정 가능📍 2. 기본 문법:root { --main-color: #4CAF50; --font-size-lg: 20px;}h1 { color: var(--main-color); font-size: var(--font-size-lg);}:root는 문서 전체에 변수를 적용하는 전역 범위변수명은 ..

안녕하세요 😊UI/UX 디자인 도구인 Figma는 다양한 플러그인을 통해 기능을 확장할 수 있습니다.올바른 플러그인을 선택하면 작업 속도와 효율이 크게 향상됩니다.이번 글에서는 실무에서 자주 쓰이는 Figma 플러그인 5개를 추천드리겠습니다.📍 1. Unsplash – 고품질 무료 이미지 삽입기능: Unsplash의 무료 스톡 이미지를 바로 Figma에 삽입장점: 상업적 이용 가능, 검색 기능 제공활용 예시: 목업 제작, 배너 디자인, 프레젠테이션 시안📌 설치: Figma → Plugins → "Unsplash" 검색📍 2. Iconify – 100,000개 이상의 아이콘 라이브러리기능: 다양한 스타일의 아이콘을 검색·삽입 가능장점: Material Icons, Font Awesome 등 통합 제..

안녕하세요 😊웹페이지에서 공지사항, 이미지 확대, 로그인 창 등을 띄울 때모달 팝업은 정말 자주 사용됩니다.이번 글에서는 jQuery로 간단하게 모달 팝업을 구현하는 방법을 단계별로 안내드립니다.📍 1. 기본 HTML 구조모달 열기 × 모달 제목 여기에 내용을 작성하세요. .modal : 모달 전체 영역 (기본적으로 숨김).modal-content : 팝업 내부 내용.close : 닫기 버튼📍 2. CSS 스타일.modal { display: none; /* 기본 숨김 */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0..

이번 포스팅 에서는 jQuery를 사용하여**드롭다운 메뉴(dropdown menu)**를 만드는 방법을 쉽게 설명드리겠습니다.웹사이트 메뉴 구성은 사용자 경험에 큰 영향을 주는 요소인데요,초보자 분들도 jQuery만 있으면심플하면서도 부드럽게 작동하는 드롭다운 메뉴를 쉽게 만들 수 있습니다!📍 1. jQuery란?jQuery는 JavaScript를 쉽게 사용할 수 있도록 도와주는 자바스크립트 라이브러리입니다.복잡한 DOM 조작이나 애니메이션, 이벤트 처리 등을 간단한 코드로 구현할 수 있어많은 웹사이트에서 활용되고 있습니다.📍 2. 기본 HTML 구조 만들기 메인메뉴 1 서브메뉴 1-1 서브메뉴 1-2 메인메뉴 2 서브메뉴 2-1 서브..