부트스트랩4를 이용한 실제예제

<!-- 1.파비콘 넣기 -->
<!-- 2.container-fluid로 전체 구조를 감쌈 -->
<!-- 3.캐로셀 넣고 id명을 topCarousel로 변경 -->
/*4.캐로셀 안의 이미지 사이즈를 동일하게 맞추기 위해서 img태그를 삭제하고 .carousl-item에 이미지를 css로 넣고 코딩으로 사이즈를 맞춤*/
<!-- 5.캐로셀 캡션 구조를 추가하고 그 안에 텍스트 대신에 이미지로 변경 -->
/*6.캐로셀 안에 캡션대신 넣은 이미지 위치 맞추기*/
/*7.캐로셀의 컨텐츠의 가시성을 돋보이도록 캐로셀 배경 이미지를 어둡게 처리*/
<!-- 8.캐로셀의 left, right아이콘을 bs4의 svg코드로 변경하고 크기를 원하는 사이즈로 변경 -->
/*9.캐로셀의 prev, next버튼을 처음에는 안보이다가 캐로셀 컨텐츠에 마우스를 올리면 나타나도록 설정*/
/* 10.캐로셀의 prev, next의 위치가 화면 밖으로 조정되면서 overflow되어 스크롤이 생기는 현상을 없애기 위해 설정*/
/*11.캐로셀의 prev, next버튼 호버시 색상 바꾸기*/
/*12.캐로셀 하단 인디케이터 버튼 활성화시 스타일 변경*/
<!-- 13.캐로셀 안의 좌우에서 슬라이딩되면서 들어오는 컨텐츠에 사용할 animate.css를 포함 -->
<!-- 14.animate.css가 동작하도록 해당 클래스명(.animate__animated .animate__fadeInLeftBig) 추가 -->
<!-- 15.loading img넣기 -->
/*16.loading img위치 잡기*/
/*17.로딩 이미지가 윈도우가 로딩되었을 때에는 삭제되도록 구현*/ 스크립트
<!-- 18.캡션 안에 임의로 넣은 이미지가 화면크기가 작아지면 부모를 기준으로 같이 크기가 작아져서 레이아웃이 틀어져보이지 않도록 .img-fluid을 추가 -->           
<!-- 19.화면의 크기가 줄어도 carousel-caption안의 컨텐츠는 계속 보이도록 .d-none과 .d-md-block은 삭제 -->
<!-- 20.html과 css를 분리 -->
<!-- 21.navbar추가하고 li menu 7개 작성 -->
/*22.navber배경색 변경*/
/*23.nav의 높이를 변경하기 위해 navbar안의 a태그 상하에 padding을 설정*/
<!-- 24.네브 안의 li 구성요소가 중간으로 배치되기 위해 ul태그에 mx-auto클래스명 추가 -->
/*25.폰트체를 지정하기 위해 웹폰트 설정*/
<!-- 26.디바이스 사이즈에 따라 원하는 로고가 보이도록 설정 -->
<!-- 27.상단의 캐로셀과 네브바 컨텐츠를 header#top으로 설정 -->
28.두번째 컨텐츠를 section#birth로 지정
29.세번째 컨텐츠를 section#secret로 지정
/*30.#secret의 배경이미지*/
31.네번째 컨텐츠를 section#products로 지정
<!-- 32.scrollspy적용 -->
이미지를 가로기준, 세로기준 센터로 배치하는 방법
1.이미지를 가로기준 센터로 배치하려면
    1)부모 div.row 만들고 부모요소에 .justify-content-center를 준다.
    2)부모 div.row 만들고 자식요소인 img에 .mx-auto를 준다.

2.이미지를 우측으로 이동하고 싶다면
    1)부모 div.row 만들고 부모요소에 .justfiy-content-end를 준다.
    2)부모 div.row 만들고 자식요소인 img에 ml-auto를 준다.
    3)부모 없이 img자체에 float-right를 준다.
3.이미지를 세로기준 센터로 배치하려면
    1)부모 div.row 만들고 부모요소에 .align-items-center를 준다.
    2)부모 div.row 만들고 자식요소인 img에 my-auto를 준다.
    3)부모 div.row 만들고 자식요소에 .align-self-center를 준다.
33.네번째 컨텐츠를 section#products로 지정
/*34.#cf인 배경이미지*/
<!-- 35.유튜브 영상을 가져와서 가로크기에 맞게 세로크기도 같이 줄어들 수 있도록 .embed-responsive안에 넣어주고 태블릿 이상에서만 영상을 보여주고 스마트폰에서는 링크주소로 바꿔준다. -->
<!-- 36.네브바를 .sticky-top을 부여하여 스크롤시 0이 되었을 때 position:sticky로 변환할 수 있으며 전체를 감싸는 요소 바로 아래에 배치시킨다. -->
37.다섯번째 컨텐츠를 section#garden로 지정
<!-- 38.card deck component넣어줌 -->
<!-- 39.이미지 지우고 carousel넣기 .card-img-top -->
<!-- 40.small태그 지우고 구글 이미지 넣기 -->
<!-- 41.row클래스명을 가지고 있는 요소에 'row-cols-미디어사이즈-갯수'를 원하는 만큼 추가해서 화면크기에 따라 그리드가 변화하는 반응형 구현가능 -->
42.일곱번째 컨텐츠 section#contact:아코디언&form