Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 호버
- route
- angular route
- Oracle LISTAGG 사용 예시
- 앵귤러 모달
- 스크롤 이벤트
- 모달
- summary
- angular button
- mysql if
- 옵저버블
- flex-1
- 검색
- 스크롤 이벤트 감지
- ajax 사용 예시
- TAILWIND
- 아이오닉 스크롤 이벤트
- Router
- Ionic modal
- angular animation
- angular modal
- Angular Router
- formgroup
- ApexChart
- scroll
- modal
- 셀렉트박스 커스텀
- prisma
- egov spring ajax 사용 예시
- 앵귤러 애니메이션
Archives
- Today
- Total
깜놀하는 해므찌로
CSS tag 예시 / tailwind 태그 줄바꿈 본문
반응형
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
'IT' 카테고리의 다른 글
nestjs search 검색 controller service 기본 구조 예시 feat.Prisma (0) | 2023.08.16 |
---|---|
Angular 컴포넌트 cli 생성 시 앞에 이름 / prefix 수정하기 (0) | 2023.08.15 |
Nestjs 비밀번호 / 비밀번호 확인과 같이 클래스 내 다른 property와 일치한 지 검증하고 싶을 때 (0) | 2023.08.13 |
Nx nest Angular Guard 활용 예시 JWT Bearer (0) | 2023.08.11 |
Angular NX Interceptor 활용 예시 / JWT Bearer (0) | 2023.08.10 |