bootstrap
41일차 2023-05-03
choi Hoon
2023. 5. 3. 19:53
BootStrap
자바스크립트도 사용하는 Workspace폴더에
Bootstrap폴더 생성 (좌측 위쪽 File에서 Open Folder) 여기서 html코드 생성
boostrap폴더 생성
boostrap폴더 생성/아래 css폴더와 js폴더 생성
css폴더 아래 2개 파일 복사 붙여 넣기
js폴더 아래 6개 파일 복사 붙여 넣기
Template.html
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Template</title>
<style>
/*
jumbotron 클래스는 Bootstrap에서 제공하는 컴포넌트 중 하나로,
전체 너비를 가지는 큰 박스 형태의 요소입니다.
이 클래스는 일반적으로 페이지 상단에 제목이나
중요한 내용을 강조하는데 사용됩니다.
*/
/*
container 클래스는 Bootstrap에서 제공하는 그리드 시스템에서
사용되며, 컨테이너 역할을 하는 요소를 감싸는 클래스입니다.
이 클래스는 페이지 내에서 최대 너비를 제한하고,
내부의 요소들을 중앙 정렬합니다.
*/
/*점보트론 세로폭 및 마진바톰 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>템플릿 제목</h1>
<p>요약 설명부분입니다</p>
</div>
</div>
</body>
</html>결과)
GetStared01.html
<!DOCTYPE html>
<html lang="en">
<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>BasicTemplate01.html</title>
<!-- CDN 방식:
네트웍이 연결되야 한다.
커스터마이징 불가하다
-->
<!--
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
-->
<!--다운로드 방식
네트웍이 연결 필요없다
커스터마이징 할 수 있다.
-->
<!-- src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"(예로)src안 주소를
복사하여 인터넷 주소창에 복사/다른이름으로 저장/이제 아래 script 경로에 파일넣기 -->
<!-- bootstrap폴더 생성/css 폴더 생성/bootstrap.min.css 등등 붙여넣기 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<script src="bootstrap/js/jquery.slim.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
</body>
</html>
결과)
Containers02.html
<!DOCTYPE html>
<html lang="en">
<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>Containers02.html</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<script src="bootstrap/js/jquery.slim.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!--responsive, fixed-width container:반응형 고정폭
즉 해상도에 따라 폭이 특정 크기로 고정된다
해상도 Extra small Small Medium Large Extra large
<576px ≥576px ≥768px ≥992px ≥1200px
max-width 100% 540px 720px 960px 1140px
-->
<!--By default, containers have 15px left and right padding, with no top or bottom padding-->
<!--
부트스트랩4는 기본 폰트 사이즈가 16px이다
마진 및 패딩과 관련된 속성들
m : margin
p : padding
t , b , l , r ,x , y
t : top
b : bottom
l : left
r : right
x : x축 -> left와 right를 의미
y : y축 -> top과 bottom을 의미
0, 1, 2, 3, 4, 5, auto(양수를 표현)
0 : 0을 의미
1 : .25rem( font-size가 16px이면, 4px) 크기
2 : .5rem( font-size가 16px이면, 8px) 크기
3 : 1rem( font-size가 16px이면, 16px) 크기
4 : 1.5rem( font-size가 16px이면, 24px) 크기
5 : 3rem( font-size가 16px이면, 48px) 크기
auto : margin의 자동으로 세팅
n1, n2, n3, n4, n5(음수를 표현)
n : negative을 의미
n1 : -.25rem( font-size가 16px이면, -4px) 크기
n2 : -.5rem( font-size가 16px이면, -8px) 크기
n3 : -1rem( font-size가 16px이면, -16px) 크기
n4 : -1.5rem( font-size가 16px이면, -24px) 크기
n5 : -3rem( font-size가 16px이면, -48px) 크기
-->
<div class="container">
<div class="container bg-danger pb-5" >
<h2>Responsive Fixed Container</h2>
<div class="container bg-warning">
<h1 class="bg-secondary">My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<h2>Container Padding</h2>
<!--
pl-4 : padding-left:1.5rem;를 의미
pt-4 : padding-top:1.5rem;를 의미
-->
<div class="container bg-warning pl-4 pt-4">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<!--
p-3 : padding:1rem;를 의미
my-3 : margin-top:1rem;margin-bottom:1rem;를 의미
border : border-style:solid;border-width:1px를 의미
border-XXX : XXX는 테두리의 색상에 해당
즉 부트스트랩4에서는 반드시 테두리의 색이 필수다(테두리 검은색이 기본값이 아니다)
--->
<h2>Container Border and Color</h2>
<div class="container bg-warning p-3 my-3 border border-dark">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<!--
bg-XXX :XXX는 배경의 색상에 해당
text-XXX는 XXX는 텍스트의 색상에 해당
-->
<h2>Container Background and Text Color</h2>
<div class="container bg-secondary text-white p-3 mb-3">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</div>
<h2>Responsive Containers</h2>
<!--
.container-sm : .container와 같다
.container-md : md 크기 이상(768px)만 해당 해상도의 고정폭 유지하고 미만에서는 100%
.container-lg : lg 크기 이상(992px)만 해당 해상도의 고정폭 유지하고 미만에서는 100%
.container-xl : xl 크기 이상(1200px)만 해당 해상도의 고정폭 유지하고 미만에서는 100% -->
<div class="container-md bg-info">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</div>
<!--full width container:해상도와 상관없이 항상 width 100%-->
<div class="container-fluid bg-success">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
결과)
GridSystem03.html
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>GridSystem03.html</title>
</head>
<body>
<!--
.col-숫자 (extra small devices -해상도 < 576px)
.col-sm-숫자 (small devices - 576px<= 해상도 <768px)
.col-md-숫자 (medium devices - 768px<= 해상도 < 992px)
.col-lg-숫자 (large devices - 992px<= 해상도 < 1200px)
.col-xl-숫자 (xlarge devices - 해상도>= 1200px)
-->
<div class="container">
<div class="jumbotron bg-info">
<h1>그리드 시스템</h1>
<p>Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns</p>
</div>
<h2>Three Equal Columns</h2>
<!--모든 해상도에서 영역을 균등하게 3등 분할할때-->
<div class="row"><!--"row"는 그리드 시스템을 사용하기 위한 클래스 (하위를 한 행으로 만들어줌)-->
<div class="col bg-success">.col</div>
<div class="col bg-warning">.col</div>
<div class="col bg-danger">.col</div>
</div>
<h2>Responsive Columns</h2>
<!--576px(sm크기)이상에서 균등하게 4등분할/ 576px 미만에서 it will automatically stack(576px미만에서 row가 안먹힘 div하나가 한블락 엘리먼트처럼 먹음) (width 100%)-->
<div class="row">
<div class="col-sm-3 bg-success">.col-sm-3</div>
<div class="col-sm-3 bg-warning">.col-sm-3</div>
<div class="col-sm-3 bg-danger">.col-sm-3</div>
<div class="col-sm-3 bg-dark">.col-sm-3</div>
</div>
<h2>Two Unequal Responsive Columns</h2>
<!--576px이상에서 1:2비율로 2등분할 576px 미만에서 it will automatically stack (width 100%)-->
<div class="row">
<div class="col-sm-4 bg-danger">.col-sm-4</div>
<div class="col-sm-8 bg-warning">.col-sm-8</div>
</div>
<h2>Auto Layout Columns</h2>
<!--숫자 제거시 자동으로 균등하게 배분된다-->
<!--576px이상에서는 균등하게 5등분 576px 미만에서 it will automatically stack (width 100%)-->
<div class="row"><!--576px이상일때만 5등분, 미만이 되버리면 스택처럼 1블락 영역을 혼자 다 먹음-->
<div class="col-sm bg-success">1 of 5</div>
<div class="col-sm bg-warning">2 of 5</div>
<div class="col-sm bg-danger">3 of 5</div>
<div class="col-sm bg-dark">4 of 5</div>
<div class="col-sm bg-success">5 of 5</div>
</div>
<h2>Extra Small Grid</h2>
<!--
모든 해상도에서 균등하게 분할 : col 사용
모든 해상도에서 특정 비율대로 분할: col-숫자 사용
즉 Extra Small 클래스 적용하면 된다
-->
<h4>모든 해상도에서 균등하게 분할</h4>
<div class="row">
<div class="col bg-success">1 of 3</div>
<div class="col bg-dark">2 of 3</div>
<div class="col bg-success">3 of 3</div>
</div>
<h4>모든 해상도에서 특정 비율로 분할</h4>
<div class="row"> <!--12를 기준으로 3:3:6(나머지) 결국 1:1:2 비율로 해상도가 나뉨-->
<div class="col-3 bg-success">1 of 3</div>
<div class="col-3 bg-dark">2 of 3</div>
<div class="col bg-success">3 of 3</div>
</div>
<h2>Grid Combination</h2>
<!--576px이상 768px미만(sm크기)에서는 1:3분할
768px이상(md의 경계점)에서는 1:1분할
576px미만에서는 블록방향(stack으로 쌓인다)
-->
<h4>Combination Two</h4>
<div class="row">
<div class="col-sm-3 col-md-6 bg-success"><!-- 12를 기준으로 sm의 크기일때는 3대9(1:3), md크기일때는6:6(1:1) -->
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 bg-info">
<p>Sed ut perspiciatis...</p>
</div>
</div>
<h4>Combination Three</h4>
<!--576px이상 768px미만에서는 1:3분할
768px이상 992px미만(md크기)에서는 1:1분할
992px이상(lg의 경계점)에서는 1:2분할
576px미만에서는 블록방향
-->
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 bg-success"><!-- 12를 기준으로 sm일때 비율(1:3), md일떄 비율(1:1), lg일때 비율(1:2)-->
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
<h4>Combination Four</h4>
<!--576px이상 768px미만에서는 1:3분할
768px이상 992px미만에서는 1:1분할
992px이상 1200px미만에서는 1:2분할
1200px이상에서는 1:5분할
576px미만에서는 블록방향(100%)
-->
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
<h2>Setting One Column Width</h2>
<!--하나의 컬럼만 숫자지정 : 나머지 모든 컬럼이 남은 컬럼을 균등하게 나눠 갖는다-->
<!--모든 해상도에에서 1:2:1분할
컬럼수를 지정하지 않으면 나머지가
균등하게 배분된다
-->
<div class="row">
<div class="col bg-success">col</div>
<div class="col-6 bg-warning">col-6</div>
<div class="col bg-info">col</div>
</div>
<h2>Row Cols</h2>
<!--
row-cols-* : *는 컬럼의 수다. 의미는 하나의 행을 몇개의 컬럼으로
구성하는지에 대한 설정이다
이 클래스는 row 클래스를 지정한 div에 지정한다
row-cols-*-*:해상도에따라 컬럼의 수를 조절할때 사용
첫번째 *는 크기(sm,md,lg,xl) ,두번째 *는 컬럼 수
역시 행에 지정한다
※컬럼을 구성하는 DIV에는 Extra Small 즉 col 클래스 지정하자
-->
<h4>모든 해상도에 동일한 컬럼수 적용</h4>
<div class="row row-cols-2">
<!--
모든 해상도(Extra Small)에서 2개의 컬럼이
하나의 행을 만든다(각 행은 1:1로 균등분할)
-->
<div class="col bg-danger">1 of 4</div><!--1행 1열-->
<div class="col bg-dark">2 of 4</div><!--1행 2열-->
<div class="col bg-info">3 of 4</div><!--2행 1열-->
<div class="col bg-primary">4 of 4</div><!--2행 2열-->
</div>
<h4>해상도에 따라 행의 컬럼수 다르게 적용</h4>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4">
<!--행을 2개로 나누는게 기본,
행의 칼럼을 sm크기 이상일때 칼럼을 3개로 나눰,
md크기 이상일때 칼럼을 4개로 나뉨
-->
<!--
Extra Small(< 576)에서는 컬럼 2개가 하나의 행
Small(576<= 크기 < 768)에서는 컬럼 3개가 하나의 행
Medium(768 <=)이상에서는 컬럼 4개가 하나의 행
※매칭이 안되는 컬럼들은 다음 행의 해당 영역에 배치된다
-->
<div class="col bg-danger">1 of 4</div>
<div class="col bg-dark">2 of 4</div>
<div class="col bg-info">3 of 4</div>
<div class="col bg-primary">4 of 4</div>
<div class="col bg-dark">5 of 5</div>
</div>
<h2>Equal Height</h2>
<!--
If one of the column is taller than the other (due to text or CSS height),
the rest will follow:
-->
<div class="row"><!--행을 3개로 나뉨 해상도 상관없이-->
<div class="col bg-success">Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.</div>
<div class="col bg-warning">.col</div>
<div class="col bg-success">.col</div>
</div>
<h2>Nested Columns</h2>
<!--컬럼속의 또 다른 행-->
<div class="row">
<div class="col-8 bg-warning p-4"><!--1행을 8주고 여기가 196줄이면 208줄에서 col4주고 있음(2:1비율)-->
.col-8
<div class="row"><!--1행 1열 속에서 col을 나뉨 6:6 (1:1)비율로-->
<div class="col-6 bg-light p-3">.col-6</div>
<div class="col-6 bg-secondary p-3">.col-6</div>
</div>
</div>
<!--
d-flex :display:flex;와 같다
justify-content-center : justify-content:center;
align-items-center : align-items:center;
-->
<!--여기가 1행 2열-->
<div class="col-4 bg-success p-4 d-flex justify-content-center align-items-center" >.col-4</div>
</div>
<h2>No Gutters</h2>
<!--no-gutters :행에 주는 클래스로 컬럼의 양 사이드의 여분 여백(15px씩)을 제거한다-->
<div class="row no-gutters">
<div class="col-3 bg-success">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-9 bg-warning">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
<h2>클래스 row의 의미</h2>
<!--화면 분할해서 컨텐츠를 배치할 경우에는 row와 col을
사용하자
단, 분할하지 않는 경우는 꼭 row와 col클래스를
사용할 필요는 없다(여백의 미를 고려하지 않는다면)
-->
<h4>.row 지정</h4>
<!--
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
속성이 추가됨
-->
<div class="row bg-danger text-justify"><!--띄어쓰기가 없음 끝에 더 깔끔함-->
<div class="col">
벤처기업가가 3고(고금리·고환율·고물가) 현상과 투자시장 위축 등 경제위기 극복을 위한 해결책으로 기업가정신을 강조했다. 강삼권 벤처기업협회장은 15일 서울 동대문디자인플라자(DDP)에서 열린 세계기업가정신주간 한국행사(GEW KOREA 2022)에서 “위기를 극복하고 경쟁에서 살아남는 힘의 원천은 '혁신'에 기반한 기업가정신”이라면서 “경제협력개발기구(OECD) 국가들은 포스트 코로나 시대에 새 가치를 창출하는 성장동력으로 '기업가정신'을 주목하고 있다”고 말했다. 기업가정신은 기업 본질인 이윤 추구와 사회적 책임 수행을 위해 기업가가 마땅히 갖춰야 할 자세나 정신을 말한다.
강 회장은 “10대 경제강국 위상에 걸맞게 경제인이 기업가정신으로 무장해서 사회적으로 선한 영향을 미쳐야 한다”면서 “벤처기업인은 대기업 낙수효과만 기대해선 안 되고 창의경영, 기술혁신, 도전 등을 잊지 않고 추구해야 한다”고 강조했다. 후배 창업가를 향해선 “생존이 가장 중요한 시기이므로 기관투자가나 벤처캐피털(VC) 투자에만 얽매이지 말고 개인투자자나 개인투자조합 등을 통해 최소한 필요 자금을 유치하려는 노력이 필요하다”면서 “견실한 기업으로 나아가는 리스트럭처(구조조정) 계기로 삼으면 이 시기가 지난 뒤 급성장하는 회사가 될 것”이라고 조언했다.
</div>
</div>
<h4>.row 미 지정</h4>
<!--
일반적인 DIV로 diplay:block이다
좌우여백 없다
-->
<!--text-justify는 flex container만 주는 속성이 아니다 (단독 가능)-->
<div class="bg-warning text-justify" >
<div class="col">
벤처기업가가 3고(고금리·고환율·고물가) 현상과 투자시장 위축 등 경제위기 극복을 위한 해결책으로 기업가정신을 강조했다. 강삼권 벤처기업협회장은 15일 서울 동대문디자인플라자(DDP)에서 열린 세계기업가정신주간 한국행사(GEW KOREA 2022)에서 “위기를 극복하고 경쟁에서 살아남는 힘의 원천은 '혁신'에 기반한 기업가정신”이라면서 “경제협력개발기구(OECD) 국가들은 포스트 코로나 시대에 새 가치를 창출하는 성장동력으로 '기업가정신'을 주목하고 있다”고 말했다. 기업가정신은 기업 본질인 이윤 추구와 사회적 책임 수행을 위해 기업가가 마땅히 갖춰야 할 자세나 정신을 말한다.
강 회장은 “10대 경제강국 위상에 걸맞게 경제인이 기업가정신으로 무장해서 사회적으로 선한 영향을 미쳐야 한다”면서 “벤처기업인은 대기업 낙수효과만 기대해선 안 되고 창의경영, 기술혁신, 도전 등을 잊지 않고 추구해야 한다”고 강조했다. 후배 창업가를 향해선 “생존이 가장 중요한 시기이므로 기관투자가나 벤처캐피털(VC) 투자에만 얽매이지 말고 개인투자자나 개인투자조합 등을 통해 최소한 필요 자금을 유치하려는 노력이 필요하다”면서 “견실한 기업으로 나아가는 리스트럭처(구조조정) 계기로 삼으면 이 시기가 지난 뒤 급성장하는 회사가 될 것”이라고 조언했다.
</div>
</div>
</div>
</body>
</html>
결과)
