질문 내용
- 부트스트랩의 row 와 col 속성을 활용하여 다름을 구현하시오.
- 부트스트랩 row 와 col 속성을 정리 하세요.
- 부트 스트랩에서 grid 시스템에 대하여 설명하시오.
- 부트 스트랩에서 이미지를 반응형으로 만들어 보시오.
- 부트스트랩에서 마진 패딩을 주는 방법은?
개인 작성
- 일정한 화면 크기 이하에서는 width가 100퍼가 되도록 짜기
- CSS는 넣지 않은 상태.
- 배운 내용과 row, col을 활용한 구현
<!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>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this response page to see the effect!</p>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-md-4">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4">
<h2>Column 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
- row, col
- row
- 하나의 행 당 기본적으로는 12개의 열을 가진다.
- column을 감싸는 역할을 한다. - col
- 열
- 가로 사이즈를 조절할 수 있다.
- .col-size-n : 화면의 크기가 size 이상일 경우 -column이 row의 n칸을 차지하며, 그보다 작으면 column의 가로 사이즈 화면 전체가 된다.
참조 사이트 :
- [Bootstrap] 부트스트랩 그리드 시스템 (Grid System)
- 부트스트랩
- 그리드 시스템
- 웹 페이지를 유연하게 구성하고 레이아웃을 조정하는 데 사용
- 컨테이너(Container): 모든 컨텐츠를 감싸는 가장 바깥쪽 요소
- 행(Row): 컨테이너 내에서 그리드 열을 정의하는 요소. 각 행은 12개의 열(column)로 구성.
- 열(Column): 행 내에서 실제 콘텐츠를 담는 그리드 요소. 열의 너비는 12개의 열 중 일부 또는 전체를 차지 가능.
-
이미지의 클래스 명에 img-fluid 나 w-100를 추가해주면 된다.
물론, 이미지를 추가할 땐 해당 이미지의 부모 요소에, width 값을 특정해야 한다. -
클래스명에 m mt mb ml mr p pt pb pl pr 들 중 부여하고자 하는 마진이나 패팅을 부여한다.
수치는 1~5까지.
m-5 : 모든 마진을 5만큼 부여
mt-1 : margin-top을 1만큼 부여
등등...이외에도 my mx가 있다.
my : margin-top과 margin-bottom 두 개 값을 설정
mx : margin-left와 margin-right 두 개 값을 설정
두리둥둥