부트스트랩이란?
부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다.
출처 - [네이버 지식백과] 부트스트랩 [Bootstrap] (두산백과)
사용법
html 파일의 <head>에 <link rel="stylesheet" href="css/bootstrap.css">를 입력한다.
점보트론
홈페이지를 소개할 때 사용하는 컴포넌트.
점보트론(Jumbotron)은 대형 전광판을 의미하는 단어이다. 점보트론은 부트스트랩에서 홈페이지를 소개하는 메인 전광판 역할을 한다. 컴포넌트 중에서 가장 돋보이는 컴포넌트이며 버튼 등 다양한 컴포넌트가 포함될 수 있다.
사용법
<body>에 <div class="jumbotron">와 같이 사용한다.
네비게이션 바
홈페이지 전체 구성을 보여주는 컴포넌트.
네비게이션을 통해서 다른 페이지로 이동하게 하거나 사용자가 원하는 기능을 찾아서 스스로 이동할 수 있도록 한다.
네비게이션 바는 일반적으로 HTML 소스코드의 가장 위쪽에 위치하며 자바스크립트가 함께 사용된다.
사용법
<nav> 태그를 사용한다.
ex)
<nav class="navbar navbar-default">
참고문헌: https://getbootstrap.com/docs/4.1/components/navbar/#supported-content
외부 스타일 시트
HTML 문서의 디자인을 정의할 때 HTML 소스 코드 안에서 디자인을 정의하는 것이 아니라 외부적으로 CSS 파일을 생성하여 정의하는 방법이다. 일반적으로 전체 프로젝트에서 공통적으로 사용되는 디자인은 외부 스타일 시트로 정의하고 개별적인 페이지에서 사용되는 디자인은 내부적으로 정의하여 사용하는 경우가 많다.
사용법
@import url(주소);
반응형 웹 디자인마다 다를 수 있기 때문에 디자인을 통일시키기 위해 미디어 쿼리를 수정해야함
ex)
@media (max-width: 767px) { /* 해상도가 작을 때 드랍다운 아이템에 마우스를 올렸을 때 */
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
}
'웹프로그래밍' 카테고리의 다른 글
| CSS / 구글 웹폰트 사용하는 방법 (0) | 2020.06.11 |
|---|---|
| React란 무엇인가? (0) | 2020.06.09 |
| 자바스크립트 기본문법 (0) | 2020.06.05 |
| 자주 사용하는 html 태그들 (0) | 2020.06.03 |
