SNS 섹션 결과물
index.html
<!-- SNS 섹션 -->
<section id="sns-links" class="py-5">
<div class="container text-center text-white">
<h2 class="fw-bold mb-3">ART Cook SNS</h2>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, sequi.</p>
<div class="d-flex justify-content-evenly mt-4 w-50 m-auto">
<a href="#" class="btn btn-danger btn-lg rounded-pill px-4">
<i class="bi bi-youtube"></i>
</a>
<a href="#" class="btn btn-primary btn-lg rounded-pill px-4">
<i class="bi bi-facebook"></i>
</a>
<a href="#" class="btn btn-warning btn-lg rounded-pill px-4">
<i class="bi bi-instagram"></i>
</a>
</div>
</div>
</section>
<div>
- d-flex : 자식 요소인 앵커 태그를 flexbox로 나열
- justify-content-evenly : 앵커 태그 간격 배치
- mt-4 : 마진 탑 값을 4px 부여
- w-50 : 너비를 50px로 설정
- m-auto : 웹 브라우저 사이즈가 달라져도 간격이 벌어지지 않음
<btn>
- btn-색상 : 버튼 색상을 바꾸어 줌
- btn-lg : 버튼의 크기를 large 사이즈로 키움
- rounded-pill : 버튼을 알약 모양으로 변환
- px-4: 패딩 값을 4px 부여
<i>
Bootstrap에서 제공하는 icon을 사용한다. <head>에 다음 코드를 삽입
<!-- Bootstrap ICON CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
다음 링크에서 원하는 Icon의 Icon font를 복사해서 사용한다.
https://icons.getbootstrap.com/
Bootstrap Icons
Official open source SVG icon library for Bootstrap
icons.getbootstrap.com
style.css
/* SNS 영역 */
#sns-links {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)), url(../images/sns-bg.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
{ #sns-links }
- background-attachment : 배경 이미지가 뷰포트에 고정되어 스크롤 시에도 움직이지 않음
'Web > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 웹사이트 만들기 - 서비스 섹션 (1) | 2024.10.25 |
|---|---|
| [Bootstrap] 웹사이트 만들기 - 연락처 섹션 (0) | 2024.10.25 |
| [Bootstrap] 웹사이트 만들기 - 포트폴리오 섹션 (0) | 2024.10.25 |
| [Bootstrap] 웹사이트 만들기 - 프로필 섹션 (0) | 2024.10.25 |
| [Bootstrap] 웹사이트 만들기 - 헤더 영역 (0) | 2024.10.25 |