[Bootstrap v5.0] 플렉스를 이용한 요소 배치 방법(d-flex)
"d-flex"는 `<div>` 태그 내부의 요소들을 인라인으로 배치시키는 기능을 가지고 있다. `<a>` 태그로 다른 태그를 감싸게 되면 인라인 판정이 감싼 태그 전체로 적용되지만, 이를 막기 위해 `<a>` 태그를 `<div>` 내부에 위치시켜 원하는 레이아웃을 설정할 수 있다.
Apr 12, 2024
d-flex란??
d-flex는 해당
<div> 태그 내부의 요소들을 in-line으로 배치시켜준다.예시 코드1
<div class="card d-flex"> <div th:each="orderItem : ${order.orderItemDtoList}" class="d-flex mb-3"> <a th:href="'/item/' +${orderItem.itemId}" class="text-dark"> <div class="repImgDiv"> <img th:src="${orderItem.imgUrl}" class="rounded repImg" th:alt="${orderItem.itemNm}"> </div> <div class="align-self-center w-75"> <span th:text="${orderItem.itemNm}" class="fs24 font-weight-bold"></span> <div class="fs18 font-weight-light"> <span th:text="${orderItem.orderPrice} +'원'"></span> <span th:text="${orderItem.count} +'개'"></span> </div> </div> </a> </div> </div>
위 코드를 실행할 경우
<a> 태그로 다른 태그를 감싸게 되면 in-line 판정이 감싼 태그 전체로 적용된다.예시 코드2
<div class="card d-flex"> <div th:each="orderItem : ${order.orderItemDtoList}" class="d-flex mb-3"> <div class="repImgDiv"> <a th:href="'/item/' +${orderItem.itemId}" class="text-dark"> <img th:src="${orderItem.imgUrl}" class="rounded repImg" th:alt="${orderItem.itemNm}"> </a> </div> <div class="align-self-center w-75"> <a th:href="'/item/' +${orderItem.itemId}" class="text-dark"> <span th:text="${orderItem.itemNm}" class="fs24 font-weight-bold"></span> <div class="fs18 font-weight-light"> <span th:text="${orderItem.orderPrice} +'원'"></span> <span th:text="${orderItem.count} +'개'"></span> </div> </a> </div> </div> </div>
이를 막기 위해
<a> 태그를 <div> 내부에 위치시켜서 원하는 레이아웃을 설정할 수 있다.Share article