여행하는 코딩끄적끄적

목차 [Bootstrap] col offset col-*-offset 클래스는 그리드 시스템에서 열의 오프셋을 설정하는 데 사용됩니다. 이를 통해 열을 가운데 정렬하거나 여백을 추가할 수 있습니다. 아래 예제는 offset을 사용한 경우와 사용하지 않은 경우를 비교해서 사용한 경우 어떤 차이가 발생하는지를 쉽게 알려 줍니다. 예제 코드>> 예제 카드 1 카드 1은 기본 그리드 시스템을 따릅니다. 예제 카드 2 카드 2는 기본 그리드 시스템을 따릅니다. 예제 카드 3 카드 3은 offset 클래스를 사용합니다. 결과>> 주석>> 10, 18, 28번 줄의 내용만 살펴 보시면 됩니다. 28번째 라인에만 offset-md-6이 들어가 있습니다. md는 모니터 사이즈로 앞서 포스터에서 상세하게 설명하였으므로 넘..

목차 [Bootstrap]리스트 태그, 리스트 표시 없애기, css와 비교 예제(ol, ul, li) 예제 코드를 통해 쉽게 설명하도록 하겠습니다. 예제 코드>> Default List Item 1 Item 2 Item 3 List with Bootstrap's list-unstyled Item 1 Item 2 Item 3 List with CSS list-style: none; Item 1 Item 2 Item 3 결과>> 주석>> 참고로 저는 visual studio에서 html을 작성합니다. 위와 같이 list 값이 여러개 일 경우 아래와 같이 작성하고 탭키를 누르면 자동으로 html 형식에 맞춰서 생성이 됩니다. ul>li*3>{리스트내용} 이 예제에서는 태그를 사용하여 순서 있는 리스트를 생성하..

목차 [부트스트랩] 윈도우 크기에 따라 아이콘 크기 조절 간단한 예제와 함께 결과를 통해 쉽게 이해해 보도록 하겠습니다. 예제 코드>> Logo Home About Services Contact 결과>> [부트스트랩] 윈도우 크기에 따라 아이콘 크기 조절 코드 주석 은 HTML 문서에서 사용되는 메타 태그 중 하나입니다. 이 메타 태그는 웹 페이지의 뷰포트(viewport)를 설정하는 데 사용됩니다. 뷰포트는 웹 페이지가 어떻게 표시되는지를 결정하는 화면 영역을 의미합니다. 데스크탑 컴퓨터, 태블릿, 스마트폰과 같은 다양한 기기에서 웹 페이지를 볼 때, 각 기기마다 화면 크기가 다르기 때문에 뷰포트 설정은 중요합니다. 이 메타 태그는 뷰포트의 너비를 장치의 너비에 맞추고, 초기 확대/축소 비율을 1로 설..

목차 기본 Templates 구성하기 이번에는 기존에 가져온 무료 Bootstrap(부트스트랩) Templates에 댓글(Comment)창을 추가하려고 합니다. 기본 Templates 구조는 블로그 형태 입니다. 무료 Templates를 가져와서 사용하는 방법은 아래 링크를 참조 하시면 됩니다. https://scribblinganything.tistory.com/404 [Bootstrap] Templates 무료 예제로 Flask와 연동하기 목차 Templates 무료 예제 다운(Download) 받기 우선 Bootstrap으로 만든 HTML 무료 예제를 다운 받습니다. 이번 예제에 사용할 Template는 아래 링크에서 가져 왔습니다. https://startbootstrap.com/template/..

목차 Templates 무료 예제 다운(Download) 받기 우선 Bootstrap으로 만든 HTML 무료 예제를 다운 받습니다. 이번 예제에 사용할 Template는 아래 링크에서 가져 왔습니다. https://startbootstrap.com/template/simple-sidebar Simple Sidebar - Bootstrap Sidebar Template - Start Bootstrap Like our free products? Our pro products are even better! Go Pro Today! startbootstrap.com 심플한 디자인이고 각 각 하나의 HTML, JS, CSS 파일로 구성되어 있습니다. "startbootstrap-simple-sidebar-gh-p..

목차 [Bootstrap]HTML 버튼(button) 오른쪽 정렬 HTML 문서를 작성하면 버튼(Button), 라벨(Label), 입력창(Input)을 마음대로 배치하고 싶은데, 생각한 위치로 가지가 않는 경우가 많습니다. 가령 오른쪽으로 정렬할 경우 버튼을 오른쪽 끝에 붙여서 아래로 하나 둘씩 배치하고 싶은데 일반적인 방법이 css의 float를 사용하는 방법인데 코드>> 로그인 로그인 이 경우 아래 그림 처럼 아래 위가 아닌 오른쪽에 붙어서 배치가 됩니다. 결과>> 코드 라인1 : bootstrap button class 를 사용해서 버튼을 만들고 style을 이용해서 float로 오른쪽에 배치하였습니다. 이방법이 인터넷에 일반적으로 오른쪽 정렬 방법으로 올라와 있습니다. [Bootstrap]HTM..

목차 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바랍니다 (https://scribblinganything.tistory.com/298) HTML - Bootstrap 사용해서 공간 배치하기 (Grid) Bootstrap의 Grid를 사용한다는 의미는 웹 화면의 Front end를 엑셀처럼 열과 행으로 나눠서 사용하겠다는 의미 입니다. Bootstrap에서 제공하는 클래스(Class)의 클래스명을 row와 column을 사용해서 정의할 수있습니다. row : 행 지정 column : 열 지정 행의 경우 웹화면에서 스크롤을 내려서 계속 만들 수 있지만 열의 경우 12개의 열로 고정되어 있습니다. 아래 그림은 최대치로 열을 설정..

목차 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바랍니다 (https://scribblinganything.tistory.com/298) HTML - Bootstrap 사용해서 공간 배치하기 (Container) Web에서 Frontend 디자인에서 레이아웃을 설정하는 것은 어려운 일입니다. 사이즈를 고정하면 웹브라우져의 화면에 따라 유연하게 반응하기 어렵습니다. Container 클래스 값을 적용하는 것만으로 쉽게 배치 문제를 해결할 수 있습니다. Container 클래스의 종류는 아래와 같습니다. container container-sm container-md container-md container-xl Bootstra..

목차 참조 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) Bootstrap 팝업창(modal, dialog box) 만들기 (크기 조절) Bootstrap에서 말풍선을 만드는 방법은 크게 두가지가 있다. tooltip modal 툴팁의 경우 마우스를 올려만 놓아도 박스가 생기고 마우스를 옮기면 사라진다. 모달의 경우 클릭과 같은 행동을 통해 새로운 창을 만들고 그 창을 원하는 형태로 꾸며 줄 수 있다. 예제 코드로 이해해보기 코드>> 버튼을 클릭하면 말풍선/팝업창이 생깁니다 클릭 × 헤더 부분 바디 부분 테일부분 닫기 결과>> 주석>> 모달..

글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) Bootstrap - 말풍선(Tooltip) 만들기 부트스트랩에서 제공하는 "tooltip.js"를 이용하면 간단한 구문으로 툴팁(말풍선)을 만들 수 있다. 바로 코드로 설명하겠다. 코드>> 버튼에 마우스를 올리면 말풍선이 생깁니다 오른쪽 왼쪽 결과>> 주석>> 위 결과와 같이 말풍선 박스가 생겼다. 툴팁 위치(배치) 지정하는 법 아래를 참조해서 코드에 값을 넣도록 하자 오른쪽 오른쪽 오른쪽 오른쪽