728x90 반응형 Web Programming/Bootstrap5 인스타그램 로그인 페이지 반응형 레이아웃 만들기 / 부트스트랩(bootstrap) 사용하기 Dynamic Web project를 프로젝트 생성해서 JSP로 페이지 제작을 진행했습니다. 브라우저에서 인스타그램의 홈페이지를 방문하면 브라우저의 크기에 따라서 페이지의 레이아웃이 변경되는 것을 볼 수 있는데 오늘은 세부적인 디자인 보다는 레이아웃을 따라서 제작해 볼 생각이다. 1. 인스타그램 로그인페이지 만들기 아래의 인스타그램 홈페이지의 로그인 페이지를 부트스트랩을 사용해서 반응형웹으로 제작 할 것 입니다. 부트스트랩 사용방법 부트스트랩을 사용하기 위해서는 일단 부트스트랩 홈페이지를 방문해야 합니다. 부트스트랩은 한글번역이 잘되는 것 같다. 번역으로 페이지를 둘러보면 사용 방법을 금방 알 수 있었다. Introduction Get started with Bootstrap, the world’s mo.. 2021. 11. 8. bootstrap / modal 사용하기 모달은 별도의 창을 만들어 사용자에게 내용을 전달하는 역할을 한다. 주의사항이나 재확인이 필요하거나 내용을 강조할 때 이용한다. 모달창은 화면이 즉 페이지가 이동되면 자동적으로 사라지게 된다는 것을 주의하여야 합니다. Bootstrap의 modal을 사용하였고, 아래 링크로 자세한 사용방법과 다양한 모달을 찾아 볼 수 있다. Modal Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. getbootstrap.com 작동 방식 모달은 버튼을 클릭하지 않고 모달 외부의 배경을 클릭해도 모달창은 닫히게 되지만, 아래의 코드.. 2021. 7. 28. bootstrap / 그리드(grid) 부트스트랩에서 그리드는 디스플레이의 크기에 따라서 레이아웃을 변경할 수 있는 역할을 할 수 있다. 그리드(grid)의 옵션에는 6개가 있고 컨테이너의 min-width를 기준으로 변경되는 방식이다. 그러기 때문에 grid를 사용하기 위해서는 "container"가 필수적으로 필요하다. 그리드는 부트스트랩 홈페이지에서 알려주듯 안에 "row", row안에 "col" 이 위치하게 된다. 예시 // // // // // // // //~ // // // // 위 코드는 아래와 같은 사진의 페이지를 불러온다. (불필요한 부분은 주석처리 했습니다.) 개인적으로 위 코드에서 핵심은 이 부분이라고 생각한다. "row-cols-md-3" 는 md 사이즈의 diplay에서는 3개의 col을 한 row로 담고. "row-.. 2021. 7. 28. Bootstrap / 테이블 <td> 요소 숨기기 반응형 웹페이지에서 디스플레이 크기에 따라 일부 를 제거하는 방법입니다. 아래의 부트스트랩페이지를 확인하면 더 자세한 정보를 찾을 수 있다. Display property Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing. getbootstrap.com display 속성을 변경하는 것이기에 해당하는 클래스명을 먼져 찾아준다. none, inline, inline-block,.. 2021. 7. 28. 이전 1 2 다음 728x90 반응형
