Simple Is Best

이번 포스팅에서는 페이지 상단에 위치해있는 메뉴를 클릭했을 때 내려오는 navbar에 대해서 알아보도록 하겠습니다. [click 이전] [click 이후] navbar 클릭시 애니메이션 추가 우선 바로 이전 포스팅에서 다룬 모달창 UI 를 개발하는 방법에 의거하여 개발을 진행해보도록 하겠습니다. [모달창 UI 만드는 방법] 1. HTML 로 미리 디자인 해놓는다. 2. 숨겨 놓는다. 3. 버튼을 눌렀을 때 다시 보여준다. (이걸 JS 혹은 Jquery의 이벤트 리스너로 해결) [ 1. HTML 로 미리 디자인 해놓는다 ] 클릭 했을 때 나오게 될 UI를 미리 만들어 놓아야 합니다. 이번 navbar 를 만들때는 부트스트랩의 List-Group 을 사용하겠습니다. https://getbootstrap.co..

안녕하세요. 오늘은 부트스트랩을 활용한 grid 레이아웃에 대해서 알아보겠습니다. 오늘 기온이 35도네요... 너무 더워서 반쯤 정신이 나간채로 포스팅을 올리는 점 양해바랍니다. 이전까지 우리가 레이아웃을 썼던 방법은 3가지가 있습니다. 1. float 2. display : inline-block 3. flexbox 모두 좋은 방법들입니다. 하지만 float를 쓰면 width 를 섬세하게 조정해야 한다는 점이 참 불편했었는데요. 오늘은 부트스트랩에서 제공하는 grid 에 대해서 알아보겠습니다. Bootstrap Grid 레이아웃 grid : 사이트를 균일하게 쪼개서 레이아웃을 잡고 싶을 때 사용합니다. - 내부적으로 flex-box를 활용하여 만든 것이기 때문에 IE8 이하에서는 작동하지 않습니다. g..

이번 포스팅에서는 프론트엔드 '컴포넌트' 라이브러리인 Bootstrap 에 대해서 알아보겠습니다. ▷ 컴포넌트 라이브러리 : 필요한 웹 UI / 기능을 복붙식으로 사용 가능 Bootstrap의 장점 1. 반응형 웹 개발이 쉬워진다. ▶ grid 를 사용하면 쉬운 레이아웃을 제작 가능 2. 빠른 퍼블리싱이 가능하다. ▶ 미리 제작된 클래스명을 가지고 스타일링이 가능 설치 방법 (CDN 방법 - Content Delivery Network, 안정성이 떨어진다) 1. 아래 주어진 URL에 접속하여 get start 에 접속한다. https://getbootstrap.com/docs/5.0/getting-started/introduction/ Introduction Get started with Bootstra..