CSS Library
- 미리 만들어진 CSS 스타일들의 모음이다.
- 자주 사용하는 스타일들을 class로 만들어 두어 요소에 class만 적용하면 사용할 수 있다.
- ex) Bootstrap, Foundation, Tailwind
Bootstrap
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
- 가장 유명한 CSS Library
- 반응형 사이트를 제작하기 위한 class들을 제공한다.
- Bootstrap github
bootstrap/dist/css/bootstrap.css at main · twbs/bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. - twbs/bootstrap
github.com
사용법
- 다음 코드를 html의 head 태그 안에 삽입(cdn 방식)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>- 문서에 설명된 class를 사용하여 style을 꾸밈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: brown;
}
.box-margin {
margin: 1rem;
}
.my-flex {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="my-flex">
<div class="box box-margin"></div>
<div class="box box-margin"></div>
<div class="box box-margin"></div>
</div>
<br>
<div class="d-flex justify-content-center">
<div class="box m-3"></div>
<div class="box m-3"></div>
<div class="box m-3"></div>
</div>
</body>
</html>
CDN
- CDN은 Content Delivery Network의 약자로, 전 세계에 분산된 서버 네트워크를 통해 웹 콘텐츠를 사용자에게 더 빠르게 제공하는 시스템이다.
- CDN은 웹사이트의 정적 콘텐츠(이미지, CSS/JS 파일 등)를 사용자와 지리적으로 가까운 서버에 캐시(임시 저장)하여, 사용자가 해당 콘텐츠를 요청할 때 가까운 서버에서 빠르게 받을 수 있게 한다.
- 웹사이트의 로딩 시간이 단축되고, 서버의 부하가 줄어들며, 전반적인 사용자 경험이 향상된다.
반응형 웹 디자인
- 반응형 웹 디자인(responsive web design)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.
- 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다.
- ex)
- 반대는 적응형 웹디자인이라고 한다.
Grid
- Bootstrap에서 제공하는 반응형 웹 페이지를 설계하기 위한 도구이다.
- 화면을 12등분 하여 요소가 차지하는 공간을 부여한다.
사용법
- .container
- grid를 사용하기 위한 container이다.
- 간단한 여백과 중앙정렬을 위한 class이며, 생략해도 무방하다.
- .row
- 자식 요소들을 12등분하여 표현한다.
- 자식 요소는 col- 로 이루어진 class를 가져야 한다.
- .col
- row가 차지하는 width의 12등분 중 얼마나 차지하는지를 정해준다.
- .col-숫자로 사용하며, 숫자가 생략되면 나머지 공간을 n등분 하여 차지한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col border"> content</div>
<div class="col border"> content</div>
<div class="col border"> content</div>
</div>
</div>
<br>
<div class="container-fluid text-center">
<div class="row">
<div class="col border"> content</div>
<div class="col border"> content</div>
<div class="col border"> content</div>
</div>
</div>
</body>
</html>
반응형 사용법
- 다음 표의 breakpoint에 대해 반응한다.Breakpoint Class infix Dimensions
Breakpoint Class infix Dimensions Extra small None <576px Small sm ≥576px Medium md ≥768px Large lg ≥992px Extra large xl ≥1200px Extra extra large xxl ≥1400px - .col-사이즈-숫자로 사용하며, 사이즈보다 클 시 숫자의 공간을 차지한다.
- 다음 예시는
- lg보다 클 시 2-4-6
- md보다 클 시 8-2-2
- 나머지 경우 1-1-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col col-lg-2 col-md-8 border">content</div>
<div class="col col-lg-4 col-md-2 border">content</div>
<div class="col col-lg-6 col-md-2 border">content</div>
</div>
</div>
</body>
</html>
Bootstrap component
- 많은 CSS Library들은 바로 사용가능한 component들을 제공한다.
- Modal
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
- Navbar
Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
getbootstrap.com
- Carousel
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
getbootstrap.com
- Accordion
Accordion
Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
getbootstrap.com
CSS Library
- 미리 만들어진 CSS 스타일들의 모음이다.
- 자주 사용하는 스타일들을 class로 만들어 두어 요소에 class만 적용하면 사용할 수 있다.
- ex) Bootstrap, Foundation, Tailwind
Bootstrap
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
- 가장 유명한 CSS Library
- 반응형 사이트를 제작하기 위한 class들을 제공한다.
- Bootstrap github
bootstrap/dist/css/bootstrap.css at main · twbs/bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. - twbs/bootstrap
github.com
사용법
- 다음 코드를 html의 head 태그 안에 삽입(cdn 방식)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>- 문서에 설명된 class를 사용하여 style을 꾸밈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: brown;
}
.box-margin {
margin: 1rem;
}
.my-flex {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="my-flex">
<div class="box box-margin"></div>
<div class="box box-margin"></div>
<div class="box box-margin"></div>
</div>
<br>
<div class="d-flex justify-content-center">
<div class="box m-3"></div>
<div class="box m-3"></div>
<div class="box m-3"></div>
</div>
</body>
</html>
CDN
- CDN은 Content Delivery Network의 약자로, 전 세계에 분산된 서버 네트워크를 통해 웹 콘텐츠를 사용자에게 더 빠르게 제공하는 시스템이다.
- CDN은 웹사이트의 정적 콘텐츠(이미지, CSS/JS 파일 등)를 사용자와 지리적으로 가까운 서버에 캐시(임시 저장)하여, 사용자가 해당 콘텐츠를 요청할 때 가까운 서버에서 빠르게 받을 수 있게 한다.
- 웹사이트의 로딩 시간이 단축되고, 서버의 부하가 줄어들며, 전반적인 사용자 경험이 향상된다.
반응형 웹 디자인
- 반응형 웹 디자인(responsive web design)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.
- 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다.
- ex)
- 반대는 적응형 웹디자인이라고 한다.
Grid
- Bootstrap에서 제공하는 반응형 웹 페이지를 설계하기 위한 도구이다.
- 화면을 12등분 하여 요소가 차지하는 공간을 부여한다.
사용법
- .container
- grid를 사용하기 위한 container이다.
- 간단한 여백과 중앙정렬을 위한 class이며, 생략해도 무방하다.
- .row
- 자식 요소들을 12등분하여 표현한다.
- 자식 요소는 col- 로 이루어진 class를 가져야 한다.
- .col
- row가 차지하는 width의 12등분 중 얼마나 차지하는지를 정해준다.
- .col-숫자로 사용하며, 숫자가 생략되면 나머지 공간을 n등분 하여 차지한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col border"> content</div>
<div class="col border"> content</div>
<div class="col border"> content</div>
</div>
</div>
<br>
<div class="container-fluid text-center">
<div class="row">
<div class="col border"> content</div>
<div class="col border"> content</div>
<div class="col border"> content</div>
</div>
</div>
</body>
</html>
반응형 사용법
- 다음 표의 breakpoint에 대해 반응한다.Breakpoint Class infix Dimensions
Breakpoint Class infix Dimensions Extra small None <576px Small sm ≥576px Medium md ≥768px Large lg ≥992px Extra large xl ≥1200px Extra extra large xxl ≥1400px - .col-사이즈-숫자로 사용하며, 사이즈보다 클 시 숫자의 공간을 차지한다.
- 다음 예시는
- lg보다 클 시 2-4-6
- md보다 클 시 8-2-2
- 나머지 경우 1-1-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col col-lg-2 col-md-8 border">content</div>
<div class="col col-lg-4 col-md-2 border">content</div>
<div class="col col-lg-6 col-md-2 border">content</div>
</div>
</div>
</body>
</html>
Bootstrap component
- 많은 CSS Library들은 바로 사용가능한 component들을 제공한다.
- Modal
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
- Navbar
Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
getbootstrap.com
- Carousel
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
getbootstrap.com
- Accordion
Accordion
Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
getbootstrap.com
