You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🔮 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 디자인 작업..
🎨 position sticky - 위에 헤더를 고정하자
네비게이션 헤더 고정하기 대다수의 사이트가 상단 네비게이션 영역 부분이 스크롤을 내리면 같이 따라 내려오는 페이지 요소를 한번 쯤은 봐왔을 것이다. 이전에는 이러한 기능을 만들려면 자바스크립트로 복잡한 구성을 하여야 했지만 이제는 간단하게 css의 position: sticky 속성으로 구현이 가능하다. 예를들어 아래와 같이 요소 영역 부분을 스크롤을 내려도 상단에 고정시키고 싶다면, Logo Menu1 Menu2 Menu3 내용 ... See the Pen position-sticky-0 by barzz12 (@inpaSkyrim) on CodePen. 아래와 같이 속성을 설정해주면 상단 헤더 고정이 되게 된다. header { ... position: sticky; top: 0; } See the P..
🎨 CSS 변수(--variable) 사용법 & 응용 정리
CSS 변수 기능 복잡한 웹사이트 같은 경우 엄청난 양의 CSS를 가지고 있는데, 유지보수를 하다 보면 여러 곳에서 사용한 임의의 값을 한꺼번에 바꿔야 할 때가 있다. 그 값들을 하나씩 찾아서 일일이 바꾸려면 상당히 피곤할 것이고, 때에 따라 실수도 많을 것이다. 그래서 여타 프로그래밍 언어처럼 변수를 이용하면, 요소 전반에 걸쳐 사용되는 임의의 값을 변수에 저장하고 호출하면 보다 효율적인 프로그래밍이 가능해진다. CSS 변수 선언 및 호출 CSS에서 변수의 이름을 지정할 때는 변수 맨 앞에 -- 를 붙여주어야 한다. 그리고 변수를 호출해 사용할 때는 var(변수명)형식을 사용한다. :root { --main-font-color: #000f22; /* CSS 전역 변수 선언 */ } div { color..
🎨 transition / transform / animation 속성 사용법
CSS 트랜지션 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 상태 변화에 동반하여 변경되는 CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 쉽게 말하자면 요소에 마우스를 올렸을 경우, 색 혹은 크기가 변화하는 설정을 가미했는데, 뚝뚝 바로바로 변화하는 것 보단 부드럽게 전환되는 효과를 지정해 줄 때 사용한다고 보면 된다 transition은 전환되는 모션을 추가로 가미하는 속성이지 그 자체로 스타일을 주는 속성은 아니다. 그래서 :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다. 그리고..
🎨 Aspect Ratio - 이미지 크기 비율 간단 제어
Aspect Ratio 종횡비 속성 과거에는 css에서 비율로 영역을 조절하게 할 수 있는 css 프로퍼티가 존재하지 않았다. 그래서 있는 속성으로 편법으로 하여 스크린 비율을 지정하여 사용하였다. 그렇지만 이제 css에서 최신 기능으로 드디어 aspect-ratio 라는 종횡비 전용 속성을 지원하게 되었다. aspect ratio 속성은 이미지나 동영상을 비율대로 줄이거나 늘리는 데 사용된다. 매우 직관적이라 다루기도 편하다. 다만 우리의 주적 IE 브라우저에는 지원이 안되기 때문에, 과거에서 사용되었던 간접적으로 비율을 구현하는 방법과 더불어, aspect ratio 속성 사용법을 소개할 예정이다. 과거 종횡비 조절법 1. 단순 지정 가장 간단한 방법은 직접 width와 height를 지정해서 하는 ..
🔮 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- 다음의 아이콘 명을 적어주시면 그 아이콘..
🎨 클릭 이벤트 방지 pointer-events 속성
pointer-events 속성 css를 사용하여 클릭이벤트를 제어할 수 있는데, 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events 이다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있다. none : 클릭 이벤트를 적용하지 않음 auto : 브라우저 자동으로 선택함 inherit : 상속 되어짐 만약 none의 값을 사용할 경우 클릭 이벤트가 동작하지 않으며 마우스 관련된 효과 (click, :hover) 역시 동작하지 않게 된다. 예를들어 아래와 같이 파란색 박스 영역과 하늘색 박스 영역이 있는데, 하늘색 영역이 파란색 영역을 위에 덮어 일부분을 가리고 있는 상태이다. 이 상태에서 가리고 있는 일부분 영역을 클릭하면 파란색 영역에 등록된 cli..
🎨 CSS 요소 숨김 처리 속성에 따른 특성 차이
숨김 처리 속성에 따른 특성 차이 요소를 숨길때 사용하는 CSS 속성은 여러 가지가 있다. 그러나 이들 방법 마다 제각기 고유의 특성을 지니고 있다. 이번 글에서는 이러한 방법들의 차이점에 대해 살펴보겠다. 숨김 css 속성 공간 점유 이벤트 탭 접근 opacity : 0 점유 활성 가능 visibility : hidden 점유 비활성 불가능 visibility : collapse 점유 (테이블 안에서만 비점유) 비활성 불가능 display : none 비점유 비활성 불가능 opacity: 0 투명도 처리 그러나 요소는 여전히 공간을 차지하게 되므로, 다른 요소들과의 간격이 유지된다. 요소가 보이지 않는 것뿐이지, 여전히 이벤트를 받을 수 있음 visibility: hidden 요소를 숨김 이 경우에도 ..
🔮 BootStrap5 여러 웹 스타일 컴포넌트 소개
Bootstrap 컴포넌트 컴포넌트는 부트스트랩에서 정의한 UI 요소로 버튼, 경고창, 네비게이션바 와 같이 화면 구성에 필요한 요소들을 정의해둔 클래스 집합 입니다. 컴포넌트는 클래스만 사용해도 동작하는 유형과 특정 태그와 함께 사용해야 하는 유형이 있습니다. 각각의 컴포넌트 문서와 사용예를 보고 적용하면 됩니다. Accordion 접고 펼치는 메뉴 Alerts 브라우저의 alert()랑 상관없음. 텍스트 메시지를 포함하는 알림 박스 Badge 버튼과 유사한 모양으로 텍스트와 숫자 뱃지로 구성. 버튼은 아닌데, 버튼같은 모양 스마트폰 아이콘에 숫자 뱃지와 유사 Breadcrumb 웹사이트에서 현재 페이지의 위치 정보를 표기 home > board > 자유게시판 형식 Buttons 다양한 색상과 디자인의..
