HTML14 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. HTML 문서구조 #3 구조를 설정을 위한 요소 학습하기 form 요소 - HTML의 서식을 정의하는 요소 action : 서식에서 전송 단추를 눌렀을 때 내용이 전송되는 서버 파일의 URL method : 폼이 전송되는 방식을 결정, GET과 POST 중 선택 고객 이름: 고객 이름: input 요소 - 입력 데이터 필드 ex) text, password, hide, radio, submit, reset label 요소 - 서식 입력 요소의 캡션. label로 하나로 묶어줄 수 있음 이름 : 이름 : input 요소 - name 속성 : 서식 값의 이름, - required 속성 : 반드시 입력되어야 함을 의미한다. - placeholder 속성 : 입력 폼에 짧은 힌트를 의미한다. - progress, meter 요소 : 작업의 진척도를 표시하기 위하여 사.. 2021. 7. 19. 이전 1 2 3 4 다음 728x90 반응형
