BS
1. BS
-부트스트랩(Bootstrap) : 웹 프런트엔드 개발 프레임워크
-트위터에서 웹 디자인을 설계하기 위해 CSS의 클래스 선택자에 정의된 스타일 시트와
자바스크립트 플러그인의 라이브러리
2. BS 핵심 요소
1)CSS
2)Grid system
3)컴포넌트
4)JS 플러그인
그리드 시스템(Grid system)
1. 그리드 시스템
-반응형,유동형 레이아웃을 지원하는 구역 분할 시스템(총 12분할)
-Magic Number12
-하나의 요소가 차지할 크기를 1칸에서 12칸까지 설정해줄 수 있음.
-하나의 요소가 차지할 크기를 해상도 별로 따로 설정해줄 수 있음.
2. 반응형 웹페이지
-디바이스 장치에서 레이아웃이 달라지는 반응형 웹페이지를 만들 때 기본적으로꼭 포함해야 하는 meta 태그
<meta name="viewport" content="width=device-width, initial-scale=1.0">-미디어 쿼리 규칙
@media (디바이스 사이즈) {
CSS 스타일
}
3. container, container-fluid
-레이아웃을 만드는 가장 상위 요소
-전체 가로 폭을 정하는 클래스 값
-.container : 고정폭 레이아웃, 반응형을 만들 때 사용
-.container-fluid : 좌우로 꽉찬 레이아웃을 만들 때 사용,
가로 해상도에 상관없이 100%의 가로폭을 가짐
4. .row
-.container 또는 .container-fluid 안에 .row로 행을 만든다.
5. .col- size - n
-.row 안에 col- ~ - n 클래스로 열을 만든다.
- size 안에는 sm,md,lg,xl,xxl 중의 하나가(미디어 사이즈) 들어감.
- n은 1부터 12까지의 수 중 하나가 들어감.
- 1~12 : 행을 12등분하여 그중 몇 개를 사용할지 정함.
-행을 12등분 했으므로 숫자의 합이 12면 .container(.container-fluid)를 꽉 채움.
12보다 크면 다음 줄로 넘어감.
그리드 옵션(Grid options)
화면 크기(해상도)에 따라 가로 사이즈가 달라지는 옵션 추가
위에서 말했던 col-size-n의 뜻은
화면 크기가 size 이상이면 column이 row의 n칸을 차지하고 size보다 작을 때에는
가로 사이즈가 화면 전체가 된다는 뜻이다.
예를 들어 .col-sm-4의 뜻은
화면 크기가 576px 이상일 땐 row 4칸을 차지하고 576px보다 작을 때에는 화면 전체의
가로 사이즈를 가진다는 뜻이다.
그리드 시스템 예제01.
-meta 태그 필수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹</title>
<link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">-스타일 설정
<style>
h1{
border: 1px solid gray;
}
.row:nth-of-type(1){
background-color: #02CBFB;
}
.row:nth-of-type(2){
background-color: #81C1F1;
}
.row:nth-of-type(3){
background-color: #AFF3FC;
}
</style>
</head>-그리드 옵션
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xl-12">
<h1 class="text-center">Happy</h1>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<h1 class="text-center">Happy</h1>
</div>
<div class="col-sm-4">
<h1 class="text-center">Happy</h1>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h1 class="text-center">Happy</h1>
</div>
<div class="col-sm-4">
<h1 class="text-center">Happy</h1>
</div>
<div class="col-sm-4">
<h1 class="text-center">Happy</h1>
</div>
</div>
</div>
</body>
</html>-결과
그리스 시스템 예제02.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--메타 태그 꼭 포함하기-->
<title>css를 활용한 반응형 웹 코딩</title><style>
*{
padding: 0; margin: 0;
}
body{
background-color: pink;
}
#wrapper{
border: 1px solid gray;
width: 80%;
margin: 0 auto;
font-size: 2vw;
}
nav li{
list-style: none;
float: left;
border: 1px solid gray;
width: 20%;
box-sizing: border-box;
text-align: center;
}
nav ul{
overflow: hidden;
}
header h1{
text-align: center;
margin-bottom: 20px;
}
header{
padding: 20px 0 0 0;
border: 1px solid gray;
}
.content{
padding: 10px;
}
footer{
border: 1px solid gray;
height: 100px;
line-height: 100px;
text-align: center;
}/*디바이스 장치가 최대 767 이하일 때 : 스마트폰용*/
@media (max-width: 767px) {
body{
background-color: purple;
}
#wrapper{
width: 100%;
font-size: 2em;
}
nav li{
width: 100%;
}
}
/*디바이스 장치가 최소 768 이상일 때 : 테블릿용*/
@media (min-width: 768px) {
body{
background-color: orange;
}
#wrapper{
width: 100%;
}
}
/*디바이스 장치가 최소 992 이상일 때 : laptop 컴퓨터 작은 모니터*/
@media (min-width: 992px) {
body{
background-color: lightblue;
}
#wrapper{
width: 100%;
}
}
/*디바이스 장치가 최소 1200 이상일 때 : laptop 컴퓨터 큰 모니터*/
@media (min-width: 1200px) {
body{
background-color: #4BF887;
}
}
</style></head>
<body>
<div id="wrapper">
<header>
<h1>반응형 웹</h1>
<nav>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
</nav>
</header>
<div class="content">
<h2>반응형 웹은 미디어쿼리를 사용하여 스타일링합니다.</h2>
<p>이제 베타 2의 최신 기능 및 변경사항을 앱에서 사용해 볼 수 있습니다.
시작하려면 베타 버전을 다운로드하고 도구를 업데이트하세요.
이제 Android 12 베타를 개발자와 사용자가 모두 사용할 수 있으므로
앱의 호환성을 테스트하고 필요한 업데이트를 출시하는 것이 중요합니다.
새로운 기능을 사용해 보고 Issue Tracker를 통해 의견을 공유해 보세요.
</p>
</div>
<footer>
<h1>designed by</h1>
</footer>
</div>
</body>
</html>
