order-first order-sm-5 이게 무슨뜼인지를 모르겟습니다;;; 채택완료
order-first
order-0
order-1
order-last
이건 알겠는뎅...
order-first order-sm-5 이렇게 같이 있을떄 order-sm-5 의미하는걸 모르겠네요
이리 저리해봐도 이해가 안갑니다;;;
답변 2개
반응형 레이아웃에서 모빌 화면 기준(sm) 요소의 순서를 다르게 배치하기 위한 설정입니다.
반응형 조건이기 때문에 화면 크기가 작을 때는 영향을 주지 않고,
화면이 커지면 order 값이 5로 설정됩니다.
<div class="order-first order-sm-5">해당요소</div>, 이 랩을 예시로 하자면~
order-first order-sm-5 클래스는 Tailwind CSS의 반응형 순서 지정 클래스이며,
화면 크기에 따라 요소의 순서를 다르게 조정할 때 사용됩니다.
먼저 order-first는 화면 크기가 작을 때(기본적으로 모바일 화면에서),
이 요소를 무조건 가장 맨 앞으로 위치시키며(order 값을 매우 낮은 값으로 설정하여),
이후 화면 크기가 sm(640px) 이상의 너비가 되면 order-sm-5 클래스가 활성화되어,
해당 요소의 순서가 다섯 번째 위치(order 값 5)로 재배치됩니다.
다시 말해, 모바일 환경에서는 맨 처음에 배치,
sm 사이즈(640px) 이상 화면부터는 다섯 번째 순서로
요소의 배치가 변경되는 반응형 레이아웃 구성을 가능하게 하는 클래스 조합입니다.
order-sm-5는 작은 화면(sm 이하)이 아니라, sm 이상일 때 적용됩니다.
화면이 640px 미만(기본)일 땐 적용되지 않고, 640px 이상일 때 order가 5로 적용됩니다.
다시 말하면, col-sm-1에서의 sm과 order-sm-5에서의 sm이 다르게 동작하는 것이 아니라
동일한 논리로 동작합니다.
따라서 반대가 아닙니다. 같은 원칙(해당 너비 이상 적용)에 따라 작동합니다.
※ 아래의 원칙만 기억하시면 됩니다~
＊접두사 없을 때: 모든 화면에서 기본 적용
＊sm: 640px 이상
＊md: 768px 이상
＊lg: 1024px 이상
＊xl: 1280px 이상
＊2xl: 1536px 이상
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인