부트스트랩으로 display: flex; 편하게 사용하기

1. html에 클래스로 정의되어있는 내장 클래스명을 기입해서 사용 

 

<div class="container">
                    <h2>동아는 지금<span>최신 소식을 통해 알맞은 서비스를 이용해 보세요.</span></h2>
                    <ul class="row">
                        <li class="col-lg-6 col-md-12">
                            <a href="#">
                                <img src="images/now_01.jpg" alt="큐브수학">
                                <dl>
                                    <dt>초등 수학 시작부터 끝까지, 큐브수학S!</dt>
                                    <dd>2021-04-21 ~ 2021-10-31</dd>
                                </dl>
                            </a>
                        </li>
                        <li class="col-lg-6 col-md-12">
                            <a href="#">
                                <img src="images/now_02.png" alt="어학교재">
                                <dl>
                                    <dt>
                                        EBS 어학 교재 과월호 15% 할인</dt>
                                    <dd>2021-08-02 ~ 2021-10-31</dd>
                                </dl>
                            </a>
                        </li>
                    </ul>
                </div>

 

col단독으로도 쓸수있고 사이즈별로 12단을 나눠서 사용

=> pc에선 2개씩 반반 나뉘어 보이고 태블릿에선 1단짜리로 보이게함 

offset을 붙이면 그 col만큼 비워쓸수있음 

css에서 작성안해도 html자체 태그에서 

 d-flex justify-content-between align-items-center 이렇게 플렉스속성 정의 바로가능 -> 부트스트랩 내장클래스명 

 

2. 부트스트랩 사이트에서 아이콘을 다운로드받을수도 있고 font로 가져올수도있다 

<i class="bi bi-journal-check"></i> 

 

 

※ css에 배경컬러 이런거 클래스따로 정의해서 작성하고 클래스 기입해주는 방식 

아니면 엘리쌤처럼 :root해서 하는것도 좋음 

항상 태그명 선언하고 작성하고 이렇게만 할수있다고 생각하지않기! 

다양하게 기입할수있고 안티패턴쓰지않도록