IT
CSS tag 예시 / tailwind 태그 줄바꿈
agnusdei1207
2023. 8. 14. 18:46
반응형
SMALL
<div *ngIf="tags" class="flex flex-wrap gap-1">
<div
*ngFor="let tag of tags"
class="flex items-center justify-center gap-1 px-2 py-1 text-white bg-gray-400 min-w-max rounded-xl"
>
<div class="text-sm">{{tag}}</div>
<app-icon
name="teenyicons:x-small-outline"
class="w-5 h-5 cursor-pointer hover:text-danger-400"
(click)="deleteTag(tag)"
/>
</div>
</div>
1. 태그들의 부모 HTML 태그에 flex, flex-warp
2. 자식 태그에는 min-w-max 를 사용하여 글씨의 길이에 따라 줄바꿈 및 크기 조절이 되도록 설정
반응형
LIST