1. 부트스트랩 사용시 장점은?
부트스트랩이란 프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임 워크입니다.
HTML과 CSS 기반의 템플릿 양식,버튼,네비게이션 및 기타 페이지를 구성하는 요소 포함합니다.
장점은 웹페이지 개발시 레이아웃을 간편하게 적용하고, 여러 개발자가 하나의 프로젝트를 개발할때의 상황을 고려해 통일성을 제공합니다.(또 코딩의 양도 줄어듭니다)
2. 부트스트랩 그리드 시스템에 대하여 설명하시오.
웹 페이지를 유연하게 구성하고 레이아웃을 조정하는 데 사용합니다.
- 컨테이너(Container): 모든 컨텐츠를 감싸는 가장 바깥쪽 요소
- 행(Row): 컨테이너 내에서 그리드 열을 정의하는 요소. 각 행은 12개의 열(column)로 구성.
- 열(Column): 행 내에서 실제 콘텐츠를 담는 그리드 요소. 열의 너비는 12개의 열 중 일부 또는 전체를 차지 가능.
3. 아래를 구현하시오.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 p-3 col-lg-3 p-3 bg-primary text-white"> 컬럼 </div>
<div class="col-md-6 p-3 col-lg-3 p-3 bg-dark text-white"> 컬럼 </div>
<div class="col-md-6 p-3 col-lg-3 p-3 bg-primary text-white"> 컬럼 </div>
<div class="col-md-6 p-3 col-lg-3 p-3 bg-primary text-white"> 컬럼 </div>
</div>
</div>
</body>
</html>4. 별자리 소개 페이지를 만드시오.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body class="bg-dark text-white">
<header>
<img class="img-fluid" src="http://192.168.1.69:5500/1.%20%EB%B3%84%EC%9E%90%EB%A6%AC%20%EC%86%8C%EA%B0%9C%20%ED%8E%98%EC%9D%B4%EC%A7%80/header-img.jpg" alt="밤하늘">
</header>
<section class="container ">
<header class="my-5 text-center">
<h1 class="fw-bold">별자리</h1>
<p class="text-info">Lorem ipsum dolor sit, amet consectetur</p>
</header>
<h2 class="text-warning fw-bold">북두칠성</h2>
<p class="text2">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nos temporibus
officiis reiciendis dicta ullam nihil ut illo ex, odio quas. Eaque
molestiae, consequuntur autem excepturi cor libero ea iste! Quo dolores
officia molestias dolorem.
</p>
<h2 class="text-warning fw-bold">카시오페이아</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nos temporibus
officiis reiciendis dicta ullam nihil ut illo ex, odio quas. Eaque
molestiae, consequuntur autem excepturi cor libero ea iste! Quo dolores
officia molestias dolorem.
</p>
</section>
</body>
</html>