본문 바로가기

전체 글144

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.
JavaScript는 HTML 콘텐츠를 변경할 수 있다. #JavaScript_1 html 파일에서 외부 .js 파일 호출하는 법 .js 파일에서 함수 생성 하는 법. function myFunction() { document.getElementById("first").innerHTML = "second."; } html 파일에서 .js 파일에 생성된 함수 호출 하는 법. ㄴ id 값을 이용 / html 페이지에는 second 글자가 출력. html 파일 내부에서 javascript 사용하기 ㄴMy First JavaScript 출력 된다. ㄴ tag 내에 든 tag 내에 든 어디든 배치 가능하다. document.getElementById(id); ㄴ 해당 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다. 2023. 4. 28.
728x90
반응형