bootstrap4 Bootstrap4 알아보기#3 _ Text/Typography/Colors Bootstrap4는 기본값으로 font-size : 16px, line-height : 1.5 입니다. 요소에는 기본적으로 margin-top: 0및 margin-bottom: 1rem(1rem=16px) 값을 가진다. to h1 Bootstrap heading (2.5rem = 40px) h2 Bootstrap heading (2rem = 32px) h3 Bootstrap heading (1.75rem = 28px) h4 Bootstrap heading (1.5rem = 24px) h5 Bootstrap heading (1.25rem = 20px) h6 Bootstrap heading (1rem = 16px) .display-1,2,3,4 속성을 이용해( Display 1) 글씨를 더 크게, smal.. 2023. 5. 23. Bootstrap4 알아보기#2 _ Grids 속성 Bootstrap 4 Grids Bootstrap의 그리드 시스템은 flexbox로 구축되었으며 페이지 전체에 최대 12개의 열을 허용 합니다. ㄴ 열을 함께 그룹화하여 더 넓은 열을 만들 수 있습니다. 첫번째 행에 "" 추가해주고, -sm|md|lg|xl 옵션 추가, 최대값 12에 맞춰서 숫자를 입력 한다. .col-sm-3 .col-sm-3 .col-sm-3 .col-sm-3 .col-(초소형 기기 - 화면 너비가 576px 미만) .col-sm-(소형 장치 - 화면 너비가 576px 이상) .col-md-(중형 장치 - 화면 너비가 768px 이상) .col-lg-(대형 장치 - 화면 너비가 992px 이상) .col-xl-(초대형 기기 - 화면 너비가 1200px 이상) 2023. 5. 18. Bootstrap4 알아보기#1 _ container 속성 Bootstrap Bootstrap은 빠르고 쉬운 웹 개발을 위한 무료 프런트 엔드 프레임워크입니다. Bootstrap은 반응형 디자인을 쉽게 만들 수 있는 기능도 제공합니다! Bootstrap의 장점 사용하기 쉬움: HTML 및 CSS에 대한 기본 지식만 있으면 누구나 Bootstrap 사용을 시작할 수 있습니다. 반응형 기능: Bootstrap의 반응형 CSS는 휴대폰, 태블릿 및 데스크탑에 맞게 조정됩니다. 모바일 우선 접근 방식: Bootstrap에서 모바일 우선 스타일은 핵심 프레임워크의 일부입니다. 브라우저 호환성: Bootstrap 4는 모든 최신 브라우저(Chrome, Firefox, Internet Explorer 10+, Edge, Safari 및 Opera)와 호환됩니다. ㄴ 출처 :.. 2023. 5. 12. Bootstrap4 테이블 크기 고정 하기, 강제로 줄 바꿈하기 bootstrap4를 이용한 개인적인 홈페이지를 만들면서. 페이지내에 표를 이용한 업무 이력 관리를 해보려고 했다. 테스트 목적으로 만든 표에서는 아래처럼 "width" 값에 비율만 지정해줘도 정상적으로 작동했다. 첫번째 두번째 세번째 손흥민 요즘 경기력이.. 너무슬프다 너무슬프다 너무슬프다 너무슬프다 너무슬프다 너무슬프다 근데 실제 사용하려고 DB화 해놓은 데이터를 적용시키니 table 크기가 뒤죽박죽에 마지막 열은 아예 페이지 외부로까지 빠져나와버렸다. ... 이게 뭐지.. 하면서 이것저것 다 해보고 여러 방식으로 크기를 정렬해보려고 했다. 결국 해결한 방법으로는 아래 코드를 적용함으로 해결하였다. 코드 설명 word-berak 글이 길어질 때 줄바꿈을 어떻게 할지 지정하는 속성. word-berak.. 2023. 1. 16. 이전 1 다음 728x90 반응형
