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 |
Tags
- 스크롤 이벤트 감지
- summary
- flex-1
- 호버
- angular route
- modal
- 옵저버블
- route
- 앵귤러 모달
- formgroup
- angular animation
- 셀렉트박스 커스텀
- 스크롤 이벤트
- ajax 사용 예시
- Ionic modal
- angular button
- 검색
- 모달
- Router
- angular modal
- prisma
- egov spring ajax 사용 예시
- 앵귤러 애니메이션
- TAILWIND
- Angular Router
- 아이오닉 스크롤 이벤트
- scroll
- mysql if
- ApexChart
- Oracle LISTAGG 사용 예시
Archives
- Today
- Total
깜놀하는 해므찌로
CSS 줄바꿈 grid 본문
반응형
SMALL
<div title="항목들" class="grid grid-cols-3 gap-2">
<div
[id]="pageId"
*ngFor="let admin of admins | paginate:
{ itemsPerPage: pageInfo.itemsPerPage, currentPage: pageInfo.currentPage, totalItems: pageInfo.totalItems}; let i = index"
title="항목"
class="flex flex-col justify-evenly w-[22.75rem] h-32 shadow-md rounded-md border px-4 py-2 cursor-pointer"
>
<div class="flex justify-between items-center py-2">
<div class="flex gap-2.5">
<div><img src="\assets\icon\Vector.png" /></div>
<div class="font-bold">{{admin.name}}</div>
</div>
<app-badge [style]="setBadgeStyle(admin.Auth)"
>{{admin.Auth}}</app-badge
>
</div>
<div class="border border-gray-200"></div>
<!-- 선 -->
<div class="flex items-center text-gray-800 font-medium">
<div>ID :</div>
<div class="px-1">{{admin.id}}</div>
</div>
<div class="flex flex-row justify-between">
<div class="text-gray-500">
{{admin.registeredAt | date: 'YYYY-MM-dd'}} 등록 됨
</div>
</div>
</div>
</div>
반응형
LIST
'IT' 카테고리의 다른 글
Angular Ionic ion radio checked 예시 / *ngFor checked radio (0) | 2023.04.20 |
---|---|
Typescript 객체 배열 검색 / 객체 속성으로 검색하기 예시 (1) | 2023.04.20 |
태그 이름 자동 변경 / auto tag rename (0) | 2023.04.19 |
CSS 텍스트 강제로 한 줄 작성 tailwind (0) | 2023.04.19 |
HTML details summary 예시 (0) | 2023.04.18 |