헤더 영역 만들기
Bootstrap을 이용해서 웹사이트 만들기 실습을 진행해 보자.
헤더 영역 결과물
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이젠 ART COOK</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- 헤더 영역 -->
<header class="d-flex justify-content-center flex-column align-items-center">
<h1 class="display-3 fw-bold mb-5">이젠 ART Cook</h1>
<h4 class="fs-2 mb-3">요리와 아트의 만남</h4>
<p class="lead mb-5">아름다운 한 끼로 삶의 색체를 더하다</p>
<button type="button" class="btn btn-outline-warning rounded-pill">ART Cook 대표 요리 보기</button>
</header>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
<header>
- d-flex : header 영역의 자식 요소들을 flexbox로 나열
- flex-column : 자식 요소들을 수평(기본값)이 아닌 수직으로 배치
- justify-content-center : 자식 요소들을 수평 가운데 정렬
- align-items-center : 자식 요소들을 수직 가운데 정렬
<h1>
- display-3 : 폰트 크기 확대
- fw-bold : 폰트 굵기 조절
- mb-5 : margin-bottom을 5px 부여
<h4>
- fs-2 : 폰트 사이즈 지정
<p>
- lead : 폰트가 두드러지는 효과
<button>
- btn-outline-warning : Bootstrap에 저장되어 있는 버튼 테마 지정
- rounded-pill : 버튼 radius를 알약 모양으로 지정
style.css
/* 헤더 영역 */
header {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)), url(../images/main-bg.jpg);
height: 100vh;
background-size: cover;
background-position: center top;
color: white;
}
{ header }
- linear-gradient : 위 쪽부터 rgba 블랙 컬러의 투명도 0.8~0.2 그라데이션 효과
- height : vh(viewport height) 단위를 사용해서 반응형으로 배경 이미지 사이즈 조절
- background-size : cover값을 주어 배경 이미지가 헤더의 전체 영역을 채우도록 조정
- background-position : center top(가로 위치, 세로 위치) 지정
- color : header에 포함된 text의 색깔을 white로 지정
'Web > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 웹사이트 만들기 - 포트폴리오 섹션 (0) | 2024.10.25 |
|---|---|
| [Bootstrap] 웹사이트 만들기 - 프로필 섹션 (0) | 2024.10.25 |
| [Bootstrap] 반응형 레이아웃 (0) | 2024.10.25 |
| [Bootstrap] Bootstrap CSS 실습 (2) | 2024.10.24 |
| [Bootstrap] Bootstrap 적용 방법 (0) | 2024.10.24 |