일단 시안을 본다.

데스크탑 시안

모바일 시안

모바일 시안에서는 전체 col-12 를 먹고 있고, 데스크탑 시안으로 넘어오면서 col-10을 먹고 있기 때문에 바꿔준다.

<div class="col-12 col-md-10">
	
</div>

디자인 시안을 보면서 비슷한 구조가 보이면 공통으로 스타일 줄 생각을 해본다. ( 패턴을 찾는다. )

공통 스타일을 발견하면 상단부분에 스타일을 정의해준다.

bootstrap

/* 부트스트랩의 row에 가운데 정렬을 할 수 있는 방법 */

<div class="row justify-content-center"></div>

img 사이즈를 잡을때 width와 height중 딱 떨어지는것을 기준으로 잡는다.

주목할 만한 팁

✨ 3가지 형제 요소에게 마진 bottom을 줄건데 마지막은 빼고 주겠다.

.program .col-md-4:last-child {
	margin-bottom : 0px;
}