CSS

1. 개요 https://dinfree.com/lecture/frontend/122_css_6.html https://www.w3schools.com/bootstrap5/

Bootstrap은 모바일 우선(Mobile-First) 전략을 기반으로 설계되어 다양한 화면 크기에 자동으로 적응하는 반응형 웹페이지를 쉽게 만들 수 있습니다.

부트스트랩은 전세계적으로 가장 많이 사용되는 오픈소스 CSS Framework 이다.

부트스트랩을 기반으로 하는 다양한 응용 라이브러리가 있으며 부트스트랩을 일부를 보완해 여러분들만의 CSS 라이브러리를 구축해 나갈수 있다.

부트스트랩을 제대로 사용하기 위해서는 앞에서 배운 HTML과 CSS 의 기본개념을 확실하게 이해하고 있어야 합니다.

특히 DOM, CSS의 상속관계, 선택자, 블럭/인라인, position 등에 대한 완전한 이해가 필요 합니다.

만일 부트스트랩을 잘 사용할 수 있게 된다면 다른 CSS라이브러리들도 얼마든지 도입해 사용할 수 있는 능력을 갖추게 되었다고 볼 수 있다.

Bootstrap은 모바일 우선으로 개발되었으며 반응형 웹 구현에 적합하다.

부트스트랩의 원래 이름은 트위터 블루프린트(Twitter Blueprint)로 트위터의 개발자 마크 오토(Mark Otto)와 Jacob Thornton이 만들었다.

기존에 여러 인터페이스에 대응하기 위한 다양한 라이브러리들이 존재했지만, 정형화되지 않아 유지와 보수에 어려움이 있었다.

트위터의 개발자였던 마크 오토는 이를 통합하기 위해 부트스트랩을 만들었고 트위터의 다른 개발자들이 개발에 기여하기 시작했다.

Bootstrap

부트스트랩이라는 이름은 2011년 8월 19일 오픈 소스가 발표되면서 지어졌다.

2012년 1월 31일 발표되었다. 12컬럼 그리드 레이아웃과 반응형 디자인이 포함되었다.

jQuery의 의존성으로 node.js 등에서 bootstrap을 사용할 때 많은 문제점이 있었다.

Bootstrap 4 vs Bootstrap 5 비교

10. 네임 스페이스 데이터 속성 (속성의 이름이 data- *에서 data-bs- *로 변경)

11. Popper.js V2(자바스크립트 라이브러리 Popper.js의 버전 2를 사용)

부트스트랩은 다음과 같이 라이브러리를 추가하면 바로 사용할 수 있다. 사용하는 버전은 계속 변경된다.

모든 장치에서 올바를 렌더링 및 터치 확대 조절을 보장하려면 아래와 같이 <head>에 반응형 뷰포트 메타 태그를 추가한다.

bootstrap은 박스 요소들의 일관된 사이즈 계산을 위해 전체 태그에 대해 box-sizing 속성을 border-box 로 변경해 사용하고 있습니다.

기본적으로 HTML 태그 속성들이 부트스트랩에 의해 초기화 되어 기존과는 조금 다르게 보인다.

부트스트랩을 사용한 다는 것은 부트스트랩에서 정의된 다양한 클래스(컴포넌트)들을 HTML에 적용하고 관련된 속성들을

다음은 샘플 코드를 실행하여 보자. 반응형 web 페이지이다. 브라우저의 윈도우 크기를 변경해 본다.

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Example</title>

integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">

integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>

</head>

<body>

<h1>My First Bootstrap Page</h1>

<p>Resize this responsive page to see the effect!</p>

</div>

</header>

<button type="button" class="btn">Basic</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-light">Light</button>

<p>여기에 예시 텍스트가 들어갑니다. 이 영역은 콘텐츠를 설명하기 위해 사용됩니다.</p>

<p>좀 더 구체적인 내용을 이곳에 작성할 수 있습니다. 사용자에게 유용한 정보를 제공하세요.</p>

</div>

<p>여기에 예시 텍스트가 들어갑니다. 이 영역은 콘텐츠를 설명하기 위해 사용됩니다.</p>

<p>좀 더 구체적인 내용을 이곳에 작성할 수 있습니다. 사용자에게 유용한 정보를 제공하세요.</p>

</div>

<p>여기에 예시 텍스트가 들어갑니다. 이 영역은 콘텐츠를 설명하기 위해 사용됩니다.</p>

<p>좀 더 구체적인 내용을 이곳에 작성할 수 있습니다. 사용자에게 유용한 정보를 제공하세요.</p>

</div>

</section>

</body>

</html>

Bootstrap

Bootstrap 4 vs Bootstrap 5 비교