반응형
- 디자인이 상당히 어렵다. 전문 퍼블리셔를 빌려야 한다.
- 빌리지 않고. 깔끔한 디자인을 낼 수 있는 라이브러리다.
- 디테일하게 들어가면 퍼블리셔를 빌려야 한다.
- 00장_참고사이트
- ※ 참고 사이트 ※
(1) 부트스트랩5 공식 홈페이지
https://getbootstrap.kr/docs/5.0/getting-started/introduction/
(2) 학습 홈페이지
https://www.w3schools.com/bootstrap5/bootstrap_navs.php
- 템플릿.html
- 템플릿 적으면 라이브러리를 쓸 수 있게 하는거다.
- 부트스트랩 사이트에서 다운로드를 한거다.
-
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 --></head><body>
</body></html>
- 01장_컨테이너
- 클래스를 사용한다.
- <div class = "container">
- 양끝에 공백을 둔다.
- 기본적인것은 콘테이너이다.
- 콘테이너를 기본으로 두고 그 안에서 디자인을 한다.
- 명칭을 가지고 디자인을 한다.
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 --><style>.sample {border: 10px solid #ffeb3b;}</style>
</head><body><!--아무 뜻이 없는 단어 를 모은 사이트 텍스트 테스트할 때 사용한다.//쓸데 없는 말을 만들어주는 사이트-->
<!--[1] container는 양쪽 사이드를 버리고 가운데로 컨텐츠를 정리할 때 사용하는 개념이다.-->
<div class="container sample">모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</div>
<hr>
<div class="sample">모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</div></body></html>
- 02_container_fluid.html
- container - fluid는 꽉 체워준다.
<!DOCTYPE html><html lang="ko">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 --><style>.sample {border: 10px solid #ffeb3b;}</style>
</head>
<body>
<!--아무 뜻이 없는 단어 를 모은 사이트 텍스트 테스트할때 사용한다.-->
<!--[2] container-fluid는 항상 화면에 가득채워준다.아무것도 안적은거와는 미묘한 차이가있다.-->
<!-- container-fluid --><div class="container-fluid sample">모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</div>
<br><div class="container sample">모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</div></body>
</html>
- 부트스트랩을 사용하는 이유.
- 내가 css(퍼블리셔)가 아니지만.
- 적당한 디자인을 만들기 위해서
- 제일 중요한 부분 => 적당하다.
- 욕심을 내면 안된다. 그러면 퍼블리셔 css가 된다.
- 대충 만들어져 있다.
- 부트스트랩을 사용하는 이유
- 반응형
- 모바일
- pc . 터블릿
- 위의 것들을 사용할 때. 화면을 완전히 다르게 구성하는 것
- 부트스트랩은 반응형을 쉽게 만들 수 있다.
- 네이버는 반응형이 아니다.
- 03_break_point.html
- 어떤 일정 사이즈보다 작으면 화면을 바꾸는거다.
<!DOCTYPE html><html lang="ko">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 -->
<style>.sample {border: 10px solid #ffeb3b;}</style>
</head>
<body>
<!--아무 뜻이 없는 단어 를 모은 사이트 텍스트 테스트할때 사용한다.--><!--[3] Break point : container에 접미사롤 붙여서 기능을한다.[3-1] 각 화면사이즈가 단어사이즈보다 작거나 같아지면 화면에 가득찬다.[3-2] 화면사이즈가 단어사이즈보다 크면 기본 container 사이즈가 된다.
sm: >= 576px : 576px 보다 화면이 작아지면 가득 채워지고, 커지면 컨테이너가 된다.md: >= 768px : 768px //lg: >= 992pxxl: >= 1200pxxxl: >= 1400px-->
<!-- container-sm --><div class="container-sm sample">모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</div>
<br>
<!-- container-md --><div class="container-md sample">모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</div>
<br>
<!-- container-lg --><div class="container-lg sample">모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</div>
<br>
<!-- container-xl --><div class="container-xl sample">모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</div>
<br>
<!-- container-xxl --><div class="container-xxl sample">모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</div>
</body>
</html>
02장_컬럼
- 부트스트랩은 총 12칸으로 나눠져있다.
- 웹페이지를 12개로 나눠져 있다.
- 한 줄을 세로 row
- 한 칸을 가로 col => 12개
- 01_col.html
- 대략적으로 사용하는거다.
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 --><style>.row {border: 3px solid red;}
/* 자주 사용되므로 통으로 암기 필수홀수 odd짝수 even*/.row > div:nth-child(odd) {background-color: lightblue;}.row > div:nth-child(even) {background-color: lightgreen;}</style>
</head><body>
<!--[1] container 의 자식 태그로 row와 col을 설정할 수 있다.[2] row는 세로를 뜻하며, table의 tr을 생각하면 쉽다.[3] col은 가로를 뜻하며, table의 td를 생각하면 쉽다.[3-1] col은 총 12까지 설정 가능하다. 12가 초과하게 되면 다음 줄로 넘어간다.--><div class="container"><h3>1행 12열</h3><div class="row"><div class="col">1</div><div class="col">2</div><div class="col">3</div><div class="col">4</div><div class="col">5</div><div class="col">6</div><div class="col">7</div><div class="col">8</div><div class="col">9</div><div class="col">10</div><div class="col">11</div><div class="col">12</div></div></div>
<br>
<div class="container"><h3>1행 12열 중 12열을 사용한다</h3><div class="row"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div>
<br>
<div class="container"><h3>1행 12열 중 6열을 사용해 절반만 채워진다</h3><div class="row"><div class="col-2">1</div><div class="col-2">2</div><div class="col-2">3</div></div></div>
<br>
<div class="container"><h3>1행 12열 중 13열을 사용해 다음 줄로 넘어간다</h3><div class="row"><div class="col-4">1</div><div class="col-4">2</div><div class="col-5">3</div></div></div>
</body></html>
- 02_fluid_col.html
- 컨테이너만 플루이드
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 --><style>.row {border: 3px solid red;}
/* 자주 사용되므로 통으로 암기 필수 */.row > div:nth-child(odd) {background-color: lightblue;}.row > div:nth-child(even) {background-color: lightgreen;}</style>
</head><body>
<!--[1] container 의 자식 태그로 row와 col을 설정할 수 있다.[2] row는 세로를 뜻하며, table의 tr을 생각하면 쉽다.[3] col은 가로를 뜻하며, table의 td를 생각하면 쉽다.[3-1] col은 총 12까지 설정 가능하다. 12가 초과하게 되면 다음 줄로 넘어간다.--><div class="container-fluid"><h3>1행 12열</h3><div class="row"><div class="col">1</div><div class="col">2</div><div class="col">3</div><div class="col">4</div><div class="col">5</div><div class="col">6</div><div class="col">7</div><div class="col">8</div><div class="col">9</div><div class="col">10</div><div class="col">11</div><div class="col">12</div></div></div>
<br>
<div class="container-fluid"><h3>1행 12열 중 12열을 사용한다</h3><div class="row"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div>
<br>
<div class="container-fluid"><h3>1행 12열 중 6열을 사용해 절반만 채워진다</h3><div class="row"><div class="col-2">1</div><div class="col-2">2</div><div class="col-2">3</div></div></div>
<br>
<div class="container-fluid"><h3>1행 12열 중 13열을 사용해 다음 줄로 넘어간다</h3><div class="row"><div class="col-4">1</div><div class="col-4">2</div><div class="col-5">3</div></div></div>
</body></html>
- 03_col_break.html
- 콜브레이크
- col도 브레이크가 된다.
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 -->
<style>.row {border: 3px solid red;}
.row > div:nth-child(odd) {background-color: lightblue;}.row > div:nth-child(even) {background-color: lightgreen;}</style>
</head><body><!--[반응형으로 만들기]부트스트랩으로 웹 사이트를 만들 때에는 항상 두 가지 이상의 경우를 고려해서 만들어야 한다.최소 모바일 화면과 PC화면 또는 테블릿까지 고려해 사이즈를 만들어야 한다.
(1) 모바일은 sm 기준(2) 테블릿은 md 기준(3) PC는 사이즈를 정하지 않아도 된다.
이후 우리는 모바일과 PC 만을 고려해 작성할 예정이다.--><!--[1] col 이외 추가 옵션을 주어 반응형으로 쉽게 만들 수 있다.[1-1] col-3 은 항상 가로 3칸 적용이다.[1-2] [col-6 col-sm-3] 은 왼쪽부터 순서대로 해석하면 안된다.그때 그때마다 해석이 달라져서 경우의 수대로 학습해야 한다.위 방법은 브라우저가 sm보다 클 경우 가로 3칸 적용을 하고, sm보다 작아지면 가로 6칸 적용이다.-->
<div class="container"><h1>col-3</h1><div class="row"><div class="col-3">1</div> <!-- 항상 3크기를 유지한다. --><div class="col-3">2</div><div class="col-3">3</div><div class="col-3">4</div><!--여기들의 배치를 어떻게 할꺼냐. --></div></div>
<br><!-- 분할 개수가 동일할 경우에는 col-3을 col로 축약할 수 있다. --><div class="container"><h1>col-3</h1><div class="row"><div class="col">1</div><div class="col">2</div><div class="col">3</div><div class="col">4</div></div></div>
<br>
<div class="container"><h1>col-6 col-sm-3</h1><div class="row"><div class="col-sm-3 col-6">1</div> <!-- 브라우저가 sm 사이즈보다 크면 3크기를 유지하다가 sm 보다 작아지면 6크기로 바뀐다. --><div class="col-sm-3 col-6">2</div><div class="col-sm-3 col-6">3</div><div class="col-sm-3 col-6">4</div><!--작아지면 2개 2개가 된다. 이게 콜브레이크이다.col-sm-3 col-6" => sm보다 크면 3개씩작으면 6개씩 먹는것--></div></div>
<br>
<div class="container"><h1>col-3 col-sm-6</h1><div class="row"><div class="col-sm-6 col-3">1</div> <!-- 브라우저가 sm 사이즈보다 크면 3크기를 유지하다가 sm 보다 작아지면 6크기로 바뀐다. --><div class="col-sm-6 col-3">2</div><div class="col-sm-6 col-3">3</div><div class="col-sm-6 col-3">4</div><!--반대로 클때는 2개 2개이다.작아지면 4개가 된다. --></div></div>
<br>
<div class="container"><h1>col-12 col-sm-3 </h1><div class="row"><div class="col-sm-3 col-12">1</div> <!-- 브라우저가 sm 사이즈보다 크면 3크기를 유지하다가 sm 보다 작아지면 12크기로 바뀐다. --><div class="col-sm-3 col-12">2</div><div class="col-sm-3 col-12">3</div><div class="col-sm-3 col-12">4</div><!--작아지면 4개가 된다. --></div></div>
<br><div class="container"><h1>col-6 col-md-4</h1><div class="row"><div class="col-md-4 col-6">1</div> <!-- 브라우저가 md 사이즈보다 크면 4크기를 유지하다가 md 보다 작아지면 6크기로 바뀐다. --><div class="col-md-4 col-6">2</div><div class="col-md-4 col-6">3</div><div class="col-md-4 col-6">4</div><!--클때는 3개작아지면 2개 2개 --></div></div>
</body></html>
03장_마진과패딩
- 김철수 (컨텐츠가 있다.)
- 이민수
- 컨텐츠와 컨텐츠 사이가 마진이다.
- 패딩 (내부 공백)
- 01_inline과block.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 부트스트랩 5.2.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<!-- 부트스트랩 5.2.3 -->
</head>
<body>
<!--
[인라인 inline]
(1) 개념
인라인 태그는 컨텐츠 크기만큼만 공간을 차지한다.
즉, width와 height 및 margin과 padding이 없다.
(2) 종류
span, a, em
-->
<h3>inline</h3>
<a>AAAAAAAAAAAAAAAAAAAAA</a>
<span>SPAN</span>
<em>EM</em>
<br><br><br><br>
<!--
[블럭 block]
(1) 개념
블럭 태그는 혼자 한 줄을 전부 차지한다.
즉, width와 height 및 margin과 padding 속성이 적용된다.
(2) 종류
div, p, h1
-->
<h3>block</h3>
<h1>H1</h1>
<div>DIV</div>
<p>P</p>
<br><br><br><br>
<!--
[인라인블럭 inline-block]
(1) 개념
인라인블럭 태그는
inline처럼 줄바꿈 없이 한 줄에 다른 컨텐츠들과 나란히 배치되지만,
block처럼 width와 height 및 margin과 padding 속성이 적용된다.
(2) 종류
button, input, select
-->
<h3>inline-block</h3>
<button>button</button>
<input type="text">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>
- 02_margin.html
- 부트스랩은 마진을 7개를 줄 수 있다.
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 --><style>.row {border: 3px solid red;}
.row > div:nth-child(odd) {background-color: lightblue;}.row > div:nth-child(even) {background-color: lightgreen;}</style></head><body>
<!--[margin]1. margin이란 서로 다른 컨텐츠 사이의 공백을 의미한다.2. <br> 태그 대신 margin을 통한 간격 조절을 권장한다.3. 키워드(1) my = margin y (y축 = 세로[상하])(2) mx = margin x (x축 = 가로[좌우])(3) mt = margin top(4) mb = margin bottom(5) ms = margin start(= left )(6) me = margin end(= right )(7) m = 상하좌우 margin 적용
* 수치는 1~5 사이 적용 가능--><div class="container"><div class="my-5"><h3>my-5(상, 하)</h3><div class="row"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div><div class="container"><div class="mx-5 mb-5"><h3>mx-5 mb-5(좌우와 아래)</h3><div class="row"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div><div class="container"><div class="ms-5 mb-5"><h3>ms-5 mb-5(왼쪽과 아래)</h3><div class="row"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div><div class="container"><div class="me-5"><h3>me-5(오른쪽만)</h3><div class="row"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div>
<div class="container"><div class="m-5"><h3>m-5(상하좌우 전부 적용)</h3><div class="row"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div>
</body></html>
- 03_padding.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 -->
<style>.row {border: 3px solid red;}
.row > div:nth-child(odd) {background-color: lightblue;}.row > div:nth-child(even) {background-color: lightgreen;}</style></head><body>
<!--[padding]1. 컨텐츠가 박스 안에 가득차게되면 시각적으로 보기 좋지 않다.2. padding을 적용해 이를 보기좋게 만들 수 있다.3. 키워드(1) py = padding y (y축 = 세로[상하])(2) px = padding x (x축 = 가로[좌우])(3) pt = padding top (상)(4) pb = padding bottom (하)(5) ps = padding start (왼쪽)(6) pe = padding end (오른쪽)(7) p = 상하좌우 padding 적용
* 수치는 1~5 사이 적용 가능--><div class="container"><div class="mt-5 mb-5"><h3>py-3</h3><div class="row py-3"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div><div class="container"><div class="mb-5"><h3>px-3</h3><div class="row px-3"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div><div class="container"><div class="mb-5"><h3>py-3 px-3</h3><div class="row py-3 px-3"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div>
<div class="container"><div class="mb-5"><h3>pt-3</h3><div class="row pt-3"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div>
<div class="container"><div class="mb-5"><h3>pb-3</h3><div class="row pb-3"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div>
<div class="container"><div class="mb-5"><h3>ps-3</h3><div class="row ps-3"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div>
<div class="container"><div class="mb-5"><h3>pe-3</h3><div class="row pe-3"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div>
<div class="container"><div class="mb-5"><h3>p-3</h3><div class="row p-3"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></div>
</body></html>
- 04_col_margin.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 -->
<style>.row {border: 3px solid red;}
.row > div:nth-child(odd) {background-color: lightblue;}.row > div:nth-child(even) {background-color: lightgreen;}</style></head><body>
<!--[margin]1. margin이란 서로 다른 컨텐츠 사이의 공백을 의미한다.2. <br> 태그 대신 margin을 통한 간격 조절을 권장한다.3. 키워드(1) my = margin y (y축 = 세로[상하])(2) mx = margin x (x축 = 가로[좌우])(3) mt = margin top(4) mb = margin bottom(5) ms = margin start(= left )(6) me = margin end(= right )(7) m = 상하좌우 margin 적용
* 수치는 1~5 사이 적용 가능--><div class="container"><div class="my-5"><h3>col my-5</h3><div class="row"><div class="col-4 my-5">1</div><div class="col-4 my-5">2</div><div class="col-4 my-5">3</div></div></div></div><div class="container"><div class="mb-5"><h3>col me-5</h3><div class="row"><div class="col me-5">1</div><div class="col me-5">2</div><div class="col">3</div></div></div></div>
<div class="container"><div class="m-5"><h3>col m-5</h3><div class="row"><div class="col m-5">1</div><div class="col m-5">2</div><div class="col">3</div></div></div></div>
</body></html>
- 05_col_padding.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 부트스트랩 5.2.3 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"crossorigin="anonymous"></script><!-- 부트스트랩 5.2.3 --><style>.row {border: 3px solid red;}
.row > div:nth-child(odd) {background-color: lightblue;}.row > div:nth-child(even) {background-color: lightgreen;}</style></head><body>
<!--[padding]1. 컨텐츠가 박스 안에 가득차게되면 시각적으로 보기 좋지 않다.2. padding을 적용해 이를 보기좋게 만들 수 있다.3. 키워드(1) py = padding y (y축 = 세로[상하])(2) px = padding x (x축 = 가로[좌우])(3) pt = padding top (상)(4) pb = padding bottom (하)(5) ps = padding start (왼쪽)(6) pe = padding end (오른쪽)(7) p = 상하좌우 padding 적용
* 수치는 1~5 사이 적용 가능--><div class="container"><div class="mt-5 mb-5"><h3>col padding 미적용</h3><div class="row"><div class="col-4">첫번째</div><div class="col-4">두번째</div><div class="col-4">세번째</div></div></div></div>
<div class="container"><div class="mt-5 mb-5"><h3>col px-5</h3><div class="row"><div class="col-4 px-5">첫번째</div><div class="col-4 px-5">두번째</div><div class="col-4 px-5">세번째</div></div></div></div>
<div class="container"><div class="mt-5 mb-5"><h3>col py-5</h3><div class="row"><div class="col-4 py-5">첫번째</div><div class="col-4 py-5">두번째</div><div class="col-4 py-5">세번째</div></div></div></div>
<div class="container"><div class="mt-5 mb-5"><h3>col p-5</h3><div class="row"><div class="col-4 p-5">첫번째</div><div class="col-4 p-5">두번째</div><div class="col-4 p-5">세번째</div></div></div></div></body></html>
반응형
'코딩 > 7-부트스트랩 Bootstrap' 카테고리의 다른 글
| Bootstrap => 14장 ~ 16장 ~ 프로젝트 (1) | 2025.06.17 |
|---|---|
| Bootstrap => 9장 ~ 13장 (0) | 2025.06.17 |
| Bootstrap => 7장 ~ 8장 (0) | 2025.06.17 |
| Bootstrap => 4장 ~ 6장 (0) | 2025.06.17 |
| Bootstrap => 4장 ~ 6장 (1) | 2025.06.17 |