사탕박물관 만들기 - 1

반응형 만들때 하나의 큰 박스를 반응형으로 만들고 싶으면 class container-fluid 꼭 넣기

 

div로 덩어리 나누기 감 익히기 

   <div class="row align-items-center">

      <div class="col-lg-6">

        <div class="display-1 text-center d-none d-lg-block mt-5" id="headGroup">

          <h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>

          <h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>

        </div>

      </div>

      <div class="col-lg-6">

        <img src="imgs/hand2.png" alt="" class="img-fluid">

      </div>

    </div>

 

위같은 부분 row로 나눌만큼 div로 구분해줘야됨 ( img-fluid 반응형 ) 

h1에 css를 주고 싶으면 id를 정확히 주고 h1으로 연결해줄것 

#headGroup h1이라고 안하면 css가 안먹는 경우가 있었음.

        <div class="text-center row justify-content-center" id="textBox">

          <div class="second col-10 col-lg-8 mb-5">

            <h2>MUSEUM OF CANDY</h2>

            <img src="imgs/lolli_icon.png" alt="" class="img-fluid d-none d-lg-inline">

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cum magnam provident optio

              accusamus porro?

              Provident reiciendis ipsa dolores enim placeat sequi deleniti ea rerum, explicabo, maiores ab delectus

              commodi.

              Excepturi, sed fugit. Enim, quo repellendus quasi distinctio hic ullam, voluptas sit rem, cum minima

              accusamus blanditiis odit ducimus qui ab quibusdam aut aliquam impedit voluptates beatae corporis

              voluptatum? Veniam!</p>

          </div>

        </div>

위 같은 경우 p의 lorem 문장이 col을 전부 채워 보기가 싫기 때문에 문장을 좁혀주기 위해 최상위 div에서 

row를 해 보이지 않는 다른 div와 h2,img,p가 있는 div를 flex 처리해줬다. 

맨처음 row를 최상위 div가 아닌 h2,img,p의 div에 넣어 h2, img, p가 서로 flex처리가 되어 낭패를 겪음

알고리즘적으로 접근하기.

<nav id="mainNavbar" class="navbar navbar-expand-md py-0 fixed-top">

 

fixed-top을 해줘야지 nav가 아닌 다른 section들이 nav와 겹친다.