You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🔮 PurgeCSS 사용법 - CSS 프레임워크 코드 최적화
CSS 프레임워크의 문제점 웹 어플리케이션을 구축할때 서비스 품질과 성능도 중요하지만, 빠지지 않는 것이 웹디자인이다. 웹디자인은 사용자의 첫인상과 만족도에 큰 영향을 미치기 때문에 신경써야 한다. 하지만 웹디자인을 처음부터 만드는 것은 쉽지 않다. 복잡한 CSS 코드를 작성하고 반응형으로 만들고 호환성을 확인하는 과정은 많은 시간과 노력이 필요하기 때문이다. 그래서 많은 웹 개발자들은 Bootstrap, Foundation, Bulma, Pure.css, UIKit, Materialise, Tailwind와 같은 CSS 프레임워크를 사용한다. CSS 프레임워크는 미리 정의된 CSS 클래스와 구성 요소를 제공하여, 일관되고 표준화된 방식으로 쉽고 빠르게 고퀄리티의 웹디자인을 만들 수 있으며, 재사용하고 ..
🔮 Bootstrap - Select Picker 메뉴 스타일
Select Picker 선택상자에 css디자인을 입혀주고 자바스크립트와의 동적 동작을 지원해주는 라이브러리 이다. Select Picker 다운 & 사용 Mustard Ketchup Barbecue $('.my-select').selectpicker(); // select피커 작동 Select Picker 다양한 컴포넌트 예시 Examples | bootstrap-select · SnapAppointments Developer width: '150px' Mustard Ketchup Relish All of the above (and much, much more!) developer.snapappointments.com
🔮 BootStrap - Date picker 템플릿 모음
Date picker 데이트 피커는 날짜를 다룰때 UI형식으로 쉽게 날짜를 선택하도록 하는 모듈이다. 인터넷을 사용하는 사람은 한번쯤은 이러한 UI를 통해 날짜를 정해본 경험이 있을 것이다. 그만큼 요즘 웹사이트를 구성하는데 반드시 필요한 위젯이라고 말할 수 있다. 우선 아래 사이트에 들어가서 cdn을 다운 받아준다. 옵션 설정으로 한국어도 지원한다. 한국어 버전의 캘린더를 원한다면 bootstrap-datepicker.ko.min.js 를 로드한다. bootstrap-datepicker - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers A datepicker for Bootstrap ..
🔮 부트스트랩 템플릿 사이트 모음집
부트스트랩 템플릿 사이트 모음 Bootstrap는 반응형 웹디자인을 기본으로 하고 있고, 다양한 웹 요소들의 디자인과 기능을 포함하고 있어 손 쉽게 사이트를 제작할 수 있다. 자신의 사이트에 맞는 디자인을 제작해서 사용하기는 하지만, 디자인의 비중을 조금 낮추고 전체 반응형으로 정형화된 템플릿을 찾을때 부트스트랩을 많이 사용하는 편이다. 하지만, Bootstrap 기본 디자인 모양은 매우 칙칙하고 차별화 되지 않기 때문에, 부트스트랩 템플릿을 이용하면, Bootstrap 기반이 아니라고 생각할 정도로 확연히 다른 모습은 아니지만 어느 정도 특색있는 디자인으로 꾸밀 수 있다. 거기다 최근에 부트스트랩5로 업그레이드 되면서 속도와 최적화 부분이 많이 향상되었다. 따라서, 처음 부터 일일히 css 디자인 작업..
🔮 BootStrap5 클래스 이름 익혀보기
부트스트랩 클래스명 총정리 중단점 클래스명 Breakpoint Class Dimensions X-Small None position-sticky top, left, right, bottom top-0, 50, 100 start-0, 50, 100 property : top - top position start - left position (in LTR) bottom - bottom position end - right position (in LTR) position : 0 - for 0 edge position 50 - for 50% edge position 100 - for 100% edge position translate top-50 start-50 으로 하면 중앙으로 갈것 같지만, 중앙에서 살짝 ..
🔮 BootStrap5 아이콘 사용법 정리
BootStrap 5 icons 대표적인 폰트 아이콘으로는 폰트어썸(FontAwesome), XEIcon, Google Icon Fonts 등이 있습니다. 부트스트랩 아이콘(Bootstrap Icons)은 폰트 어썸처럼 사용하기 매우 쉽습니다. 더불어 svg 아이콘을 이미지로 다운로드 받을 수도 있고, svg 코드를 사용할 수도 있도록 다양하게 편의를 제공합니다. Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getbootstrap.com NPM > npm i bootstrap-icons CDN 부트스트랩 아이콘 적용법 태그로 적용 방법 하나씩 알아보도록 하겠습니다. 에서 bi- 다음의 아이콘 명을 적어주시면 그 아이콘..
🔮 BootStrap5 여러 웹 스타일 컴포넌트 소개
Bootstrap 컴포넌트 컴포넌트는 부트스트랩에서 정의한 UI 요소로 버튼, 경고창, 네비게이션바 와 같이 화면 구성에 필요한 요소들을 정의해둔 클래스 집합 입니다. 컴포넌트는 클래스만 사용해도 동작하는 유형과 특정 태그와 함께 사용해야 하는 유형이 있습니다. 각각의 컴포넌트 문서와 사용예를 보고 적용하면 됩니다. Accordion 접고 펼치는 메뉴 Alerts 브라우저의 alert()랑 상관없음. 텍스트 메시지를 포함하는 알림 박스 Badge 버튼과 유사한 모양으로 텍스트와 숫자 뱃지로 구성. 버튼은 아닌데, 버튼같은 모양 스마트폰 아이콘에 숫자 뱃지와 유사 Breadcrumb 웹사이트에서 현재 페이지의 위치 정보를 표기 home > board > 자유게시판 형식 Buttons 다양한 색상과 디자인의..
🔮 BootStrap5 반응형 시스템 - 거터/간격(gap)
Gutters 거터는 열 사이의 패딩으로, Bootstrap 그리드 시스템에서 콘텐츠의 간격을 맞추고 정렬하는 데에 사용됩니다. 거터는 가로 padding에 의해 생성되는 열 콘텐츠 사이의 간격입니다. 각 열에 padding-right 및 padding-left를 설정하고 음수 margin을 사용하여 각 행의 시작과 끝에서 이를 오프셋하여 콘텐츠를 정렬합니다. 수평 거터 .gx-* 클래스를 사용하여 수평 거터 너비를 제어할 수 있습니다. .container 또는.container-fluid 부모는 일치하는 패딩 유틸리티를 사용하여 원하지 않는 오버플로를 방지하기 위해 더 큰 거터를 사용하는 경우 조정해야할 수 있습니다. 대안은 .overflow-hidden 클래스로 .row 주위에 래퍼를 추가하는 것입니..
🔮 BootStrap5 반응형 시스템 - Column 행렬 정렬
Columns 행렬 시스템 행렬 정렬 flexbox 정렬 유틸리티를 사용하여 가로나 세로로 열을 정렬합니다. 수직 정렬 One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns 수평 정렬 One of two columns One of two columns One of two columns One of two colum..
🔮 BootStrap5 반응형 시스템 - 그리드
부트스트랩 그리드 시스템 그리드는 테이블과 유사하게 화면을 분할해 원하는 레이아웃을 잡기위해 정의된 것으로 부트스트랩에서는 12개의 컬럼 구조를 사용할 수 있으며 6개의 화면크기와 관련된 옵션을 제공 합니다. 12개의 그리드 컬럼 화면을 12개의 컬럼으로 분할할 수 있으며 필요에 따라 컬럼을 묶어 더 큰 크기의 컬럼으로 사용할수도 있습니다. 그리드 작동 원리 그리드는 여섯 개의 반응형 중단점별로 컨테이너 및 열 크기 및 동작을 제어할 수 있습니다. (예: .col-sm-4는 sm, md, lg, xl, xxl에 적용됨) 컨테이너는 콘텐츠를 중앙에 놓고 가로로 채웁니다. 반응형 픽셀 너비에는 .container를, 모든 뷰포트 및 디바이스에서 width: 100%에는 .container-fluid를, 유동..
🔮 BootStrap5 반응형 시스템 - 컨테이너
컨테이너(Container) 컨테이너는 Bootstrap에서 가장 기본적인 레이아웃 요소이며 기본 그리드 시스템을 사용할 때 필요합니다. 컨테이너는 내용을 포함하고 채우고 (때로는) 내용을 중앙 정렬하는 데에 사용됩니다. Bootstrap에는 세 가지 다른 컨테이너가 있습니다: 각 반응형 중단점에 max-width를 설정하는 .container 모든 중단점에 width: 100%를 설정하는 .container-fluid 정의된 중단점까지 width: 100%를 설정하는 .container-{breakpoint} 아래 표는 각 중단점에서 각 컨테이너의 max-width가 원래 .container와 ‘.container-fluid’가 어떻게 비교되는지 보여줍니다. 브라우저 반응형 컨테이너 예시 아래 링크 홈..
🔮 BootStrap5 반응형 시스템 - 중단점 (미디어 쿼리)
중단점 Breakpoints Breakpoints는 Bootstrap의 반응형 레이아웃이 뷰포트 크기 또는 기기에서 어떻게 작동 할지 결정하는 사용자가 정의 가능한 넓이입니다. Bootstrap에는 반응형 제작을 위해 grid tiers 라고 하는 6개의 Breakpoints가 포함되어 있습니다. 이러한 breakpoints는 Sass 소스 파일을 사용할 경우 사용자가 지정할 수 있습니다. Breakpoint Class infix Dimensions X-Small None
