CSS Flexbox에 대해 자세히 알아보고 개념을 설명하는 몇 가지 코드 예제를 살펴보겠습니다. CSS Flexbox란 무엇입니까? CSS Flexbox(Flexible Box Layout)는 크기를 알 수 없거나 동적인 경우에도 컨테이너 내의 공간을 분배하고 항목을 정렬하여 복잡한 레이아웃의 디자인을 단순화하는 1차원 레이아웃 모델입니다. Flexbox는 내비게이션 메뉴(Navigation Menu), 카드 레이아웃(Card Layout), 콘텐츠 배포(Content Distribution) 등 반응성이 뛰어나고 유연한 디자인을 만드는 데 특히 유용합니다. CSS Flexbox의 기본 개념 Flex Container: Flex 항목을 포함하는 요소를 “Flex Container”라고 합니다. Flex..

HTML 템플릿 회사 홈페이지 및 블로그 형태의 사이트 제작 요청이 있어 디자인 템플릿을 찾아보던 중 심플하기도 하고 이쁜 HTML 템플릿을 찾게 되었습니다. Canvas The Multi-Purpose HTML5 Template Canvas는 Mulit-Page 및 One-Page 사이트를 제공하고 반응형을 지원하는 다목적 HTML5 템플릿입니다. 비즈니스, 의료, SEO, 여행, 건설, 부동산, 요가, 뷰티, 기사, 사진, 뉴스, 대여, 이력서, 블로그, 웨딩, 음악, 앱 쇼케이스, 애완 동물, 스토어 등 120개 이상의 즉시 사용 가능한 홈페이지 템플릿을 제공합니다. 유료 이지만 가격도 저렴해서 가성비가 좋습니다. 빠르게 개발을 해야 하거나 디자인 비용을 절감해야 할 때 사용하면 좋은 사이트를 제작..

linear-gradient : CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만들 수 있습니다. linear-gradient( direction, color1, color2, …, color3 ); direction에는 그라데이션 방향을 입력합니다. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값) to top : 아래에서 위로 그라데이션을 만듭니다. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. to right : 왼쪽에서 오른쪽으로 그라데이션을 만듭니다. ndeg : n 도의 방향으로 그라데이션을 만듭니다. 예시 .gradation_bar { width: 100%; background: linear-gradient(to right, #ff0000, orange..

대시보드 템플릿웹 개발을 하다 보면 작은 프로젝트인데도 디자인 요청이 있다. 그럴 때마다 디자인된 부트스트랩 기반 템플릿을 찾곤 했었다. 매번 디자인이 아쉽고 템플릿을 사용하여도 직접 CSS를 작업하는 경우가 많았는데 지인의 추천으로 Metronic을 알게 되었다. Metronic - Responsive Admin Dashboard TemplateThe World’s #1 Bootstrap 4 HTML, Angular 9, React, VueJS & Laravel Admin Dashboard Theme  이 템플릿은 사용하기도 편하고 디자인도 요즘 트렌드에 맞게 계속 업데이트를 하고 있다. 알아둘 점은 유료다. 구매비용이 저렴한 것에 비해 다양한 컴포넌트들이 있고 10가지 이상의 템플릿을 제공해 준다. ..