위 사진을 보면 div class=”container-fluid py-5″를 div class=”main”으로 한번 더 감쌌다.
나의 추측 : 해당 div를 조작하기 위해선 .container-fluidpy-5면 됐을것이다.(띄어쓰기를 어떻게 표현하지?)
질문은 상황에 대한 질문자의 인지 수준을 나타낸다.
– 삽질을 많이 했던 내 경험
나 : 튜터님 왜 container-fluid-py-5로 클래스 이름을 묶어주면 css 클래스 선택자가 작동하지 않나요?
튜터님 : div class=”container-fluid py-5″는 두 개의 클래스를 참조한다는 뜻이에요. -로 마음대로 묶어주면 안돼요. 속성값을 수정하고 싶다면 두 클래스 중에 하나를 선택해서 진행할수도 있죠.
나 : 그러면 왜 main이라는 클래스로 div태그를 한번더 감싸줬나요?
튜터님 : container-fluid나 py-5 두 클래스 중에 하나를 선택해 덮어써도 돼요. 하지만 부트스트랩에서 제공한 클래스들의 속성은 그대로 가지고 가는게 좋습니다. 그리고 py-5는 아마 padding-x와 padding-y값을 조절하는 클래스일 것입니다.
우리는 편하기 위해 부트스트랩에서 제공한 설정값들을 쓰는 것이기에, 덮어쓰는 것보단 main으로 하나를 묶어서 조절해줍니다.
그리고, 클로닝하는 페이지가 아랫부분에 내용이 많이 들어갈 것으로 보이니, div를 하나 묶어주면 이러한 상황에서 코딩을 더 효율적으로 할 수 있겠죠.
이미지 cdn