Mingg's Diary

2023-11-23

부트스트랩 4 기본 설정 Bootstrap 4는 기본값 font-size: 16px;을 사용하며 line-height: 1.5;다. 폰트의 기본값은 font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;다. 또한 모든 <p>요소에는 margin-top: 0및 margin-bottom: 1rem(기본적으로 16px)이 있다. <h1> – <h6> 예제 <h1>h1 Bootstrap heading (2.5rem = 40px)</h1> <h2>h2 Bootstrap heading (2rem = 32px)</h2> <h3>h3 Bootstrap heading (1.75rem = 28px)</h3> <h4>h4 Bootstrap heading (1.5rem = 24px)</h4> <h5>h5 Bootstrap heading (1.25rem = 20px)</h5> <h6>h6 Bootstrap heading (1rem = 16px)</h6> 표시 제목 예제 <h1 class=”display-1″>Display 1</h1> <h1 class=”display-2″>Display 2</h1> <h1 class=”display-3″>Display…

2023-11-22

Bootstrap – Bootstrap 4 그리드

Bootstrap 4 그리드 Bootstrap의 그리드 시스템은 flexbox로 구축되었으며 페이지 전체에 최대 12개의 열을 허용한다. 12개의 열을 모두 개별적으로 사용하지 않으려면 열을 그룹화하여 더 넓은 열을 만들 수 있다. 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 4 스팬 4 스팬 4 스팬 4 스팬 8 스팬 6 스팬 6 스팬 12 그리드 시스템은 반응성이 뛰어나며 화면 크기에 따라 열이 자동으로 다시 정렬된다….

2023-11-21

Bootstrap – Bootstrap 4 컨테이너

Bootstrap 4 컨테이너 컨테이너는 내부 콘텐츠를 채우는 데 사용되며 사용 가능한 두 가지 컨테이너 클래스가 있다. 클래스 .container는 반응형 고정 너비 컨테이너를 제공한다. 클래스 는 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를.container-fluid 제공한다. .컨테이너 .container-fluid 고정컨테이너 .container 클래스를 사용하여 반응형 고정 너비 컨테이너를 만든다. 너비(max-width)는 화면 크기에 따라 변경된다. 매우 작음 <576px 작음 ≥576px 중간 ≥768px 대형 ≥992px 초대형 ≥1200px 최대 너비 100% 540px 720px 960px 1140px 예제 <div class=”container”> <h1>My First Bootstrap Page</h1> <p>This…

2023-11-20

Bootstrap – Bootstrap 4 시작하기

Bootstrap 4 시작하기 Bootstrap은 더 빠르고 쉬운 웹 개발을 위한 무료 프런트 엔드 프레임워크다. Bootstrap에는 타이포그래피, 양식, 버튼, 표, 탐색, 모달, 이미지 캐러셀 등을 위한 HTML 및 CSS 기반 디자인 템플릿과 선택적 JavaScript 플러그인이 포함되어 있다. Bootstrap은 또한 반응형 디자인을 쉽게 만들 수 있는 기능을 제공한다. 예제 <div class=”jumbotron text-center”> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class=”container”> <div class=”row”> <div class=”col-sm-4″> <h3>Column 1</h3> <p>Lorem ipsum dolor..</p> </div> <div class=”col-sm-4″> <h3>Column 2</h3> <p>Lorem…

2023-11-19

Bootstrap – 버전 정보

Bootstrap 부트스트랩은 세계에서 가장 유명한 무료 CSS 프레임워크다. Bootstrap 3 Bootstrap의 가장 안정적인 버전이며 중요한 버그 수정 및 문서 변경을 위해 팀에서 계속 지원하고 있다. Bootstrap 4 새로운 구성요소, 더 빨라진 스타일시트, 더 빠른 응답성을 제공한다. 단, Internet Explorer 9 이하는 지원하지 않는다. Bootstrap 5 Bootstrap의 최신 버전이다. 단, Internet Explorer 11 이하에서는 지원되지 않으며, jQuery는 바닐라 JavaScript로 대체된다.

2023-11-18

A 요소 – 웹페이지, 전화, 문자 메시지, 메일 보내는 링크 거는 방법

<a> A 요소로 웹페이지, 전화 거는 링크, 문자 메시지, 메일 보내는 링크를 걸 수 있다. 어떻게 하는지 알아보자. 형식 <a href=”웹사이트 주소”>링크할 텍스트 / 이미지</a> 위와 같이 사용하면 링크를 걸 수 있다. 자세히 알아보자. 웹사이트 링크 걸기 가장 기본적으로 가장 많이 사용 되는 A 요소로 링크 거는 방법이다. 예시 <a href=”https://maz.kr/” target=”_blank” title=”Mingg’s Diary로 가기”>https://maz.kr</a> A 태그의 속성 target : 링크를 열 타겟을 지정한다. target=”_blank”: 새로운 창/탭에서 열기, target=”_self”: 현재 창에서 열기, target=”_parent”: 상위 프레임에서 열기, target=”_top”: 창 전체에서 열기…

2023-11-17

아코디언 스타일 메뉴 만들기

아코디언 메뉴 아코디언 스타일 메뉴를 만들 때 방법은 여러가지가 있다. 여기서는 HTML과 CSS만으로 아코디언 메뉴를 만드는 방법을 알아보자. 예시 HTML <!DOCTYPE html> <html lang=”ko”> <head> <meta charset=”UTF-8″> <title>Accordion Style</title> <link rel=”stylesheet” href=”./style.css”> </head> <body> <div class=”accordion”> <input type=”checkbox” name=”accordion” id=”answer01″> <label for=”answer01″>짱구는 못말려<small class=”arrow”>?</small></label> <div> <ul> <li class=”accountno”>신짱구</li> <li class=”accountno”>신영식</li> <li class=”accountno”>봉미선</li> <li class=”accountno”>신짱아</li> </ul> </div> <input type=”checkbox” name=”accordion” id=”answer02″> <label for=”answer02″>네모바지 스폰지밥<small class=”arrow”>?</small></label> <div> <ul> <li class=”accountno”>스폰지밥</li> <li class=”accountno”>뚱이</li> <li class=”accountno”>징징이</li> <li class=”accountno”>다람이</li> </ul> </div> </div> </body> </html> CSS…

2023-11-16

jQuery – AJAX – get() 및 post()

get() 및 post() jQuery get() 및 post() 메서드는 HTTP GET 또는 POST 요청을 통해 서버에서 데이터를 요청하는 데 사용된다. HTTP 요청: GET 대 POST 클라이언트와 서버 간의 요청-응답에 일반적으로 사용되는 두 가지 방법은 GET과 POST다. GET – 지정된 리소스에서 데이터를 요청한다. POST – 처리할 데이터를 지정된 리소스에 제출한다. GET은 기본적으로 서버에서 일부 데이터를 가져오는(검색) 데 사용된다. ⭐ GET 메서드는 캐시된 데이터를 반환할 수 있다. POST를 사용하여 서버에서 일부 데이터를 가져올 수도 있다. 그러나 POST 메서드는 데이터를 캐시하지 않으며 요청과 함께…

2023-11-15

jQuery – AJAX – load()

load() jQuery load() 메서드는 간단하지만 강력한 AJAX 메서드다. 이 load() 메서드는 서버에서 데이터를 로드하고 반환된 데이터를 선택한 요소에 넣는다. 형식 $(selector).load(URL,data,callback); 매개변수 URL : 로드하려는 URL을 지정한다. data : 요청과 함께 보낼 쿼리 문자열 키/값 쌍 집합을 지정한다. callback : 메소드가 완료된 후 실행될 함수의 이름이다. 예제 예제 파일 <h2>jQuery and AJAX is FUN!!!</h2> <p id=”p1″>This is some text in a paragraph.</p> 예제 $(“#div1”).load(“demo_test.txt”); 예제 $(“#div1”).load(“demo_test.txt #p1”); 예제 $(“button”).click(function(){ $(“#div1”).load(“demo_test.txt”, function(responseTxt, statusTxt, xhr){ if(statusTxt == “success”) alert(“External content loaded successfully!”);…

2023-11-14

jQuery – AJAX – Introduction

AJAX AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술이다. AJAX란? AJAX = 비동기 JavaScript 및 XML. 간단히 말해 AJAX는 전체 페이지를 다시 로드하지 않고 백그라운드에서 데이터를 로드하고 웹페이지에 표시하는 것이다. AJAX를 사용하는 애플리케이션의 예: Gmail, Google Maps, Youtube 및 Facebook 탭. jQuery와 AJAX jQuery는 AJAX 기능에 대한 여러 가지 방법을 제공한다. jQuery AJAX 방법을 사용하면 HTTP Get 및 HTTP Post를 모두 사용하여 원격 서버에서 텍스트, HTML, XML 또는 JSON을 요청할 수 있다. 그리고 외부…