dropdown menu alpinejs 사용 버전
<div x-data="{ open1: false, open2: false, open3: false }" @click.away="open1 = false; open2 = false; open3 = false;" class="relative">
<!-- Button 1 -->
<div class="relative inline-block text-left">
<button @click="open1 = !open1" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
Dropdown 1
<!-- Heroicon name: chevron-down -->
<svg x-bind:class="{ 'transform rotate-180': open1 }" class="-mr-1 ml-2 h-5 w-5 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div x-show="open1" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 1-1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 1-2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 1-3</a>
</div>
</div>
</div>
<!-- Button 2 -->
<div class="relative inline-block text-left">
<button @click="open2 = !open2" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
Dropdown 2
<!-- Heroicon name: chevron-down -->
<svg x-bind:class="{ 'transform rotate-180': open2 }" class="-mr-1 ml-2 h-5 w-5 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div x-show="open2" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 2-1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 2-2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 2-3</a>
</div>
</div>
</div>
<!-- Button 3 -->
<div class="relative inline-block text-left">
<button @click="open3 = !open3" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
Dropdown 3
<!-- Heroicon name: chevron-down -->
<svg x-bind:class="{ 'transform rotate-180': open3 }" class="-mr-1 ml-2 h-5 w-5 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div x-show="open3" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 3-1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 3-2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 3-3</a>
</div>
</div>
</div>
</div>
| Number | Title | Author | Date | Votes | Views |
| 39 |
html center 중앙정렬 tailwind
siwon
|
2024.07.27
|
Votes 0
|
Views 403
|
siwon | 2024.07.27 | 0 | 403 |
| 38 |
dropdown menu alpinejs 사용 버전
siwon
|
2024.04.30
|
Votes 0
|
Views 522
|
siwon | 2024.04.30 | 0 | 522 |
| 37 |
dropdown menu 간단 버전
siwon
|
2024.04.30
|
Votes 0
|
Views 469
|
siwon | 2024.04.30 | 0 | 469 |
| 36 |
The Standard PHP Library (SPL) is a collection of classes and interfaces that provide core functionality to PHP developers.
siwon
|
2023.10.24
|
Votes 0
|
Views 737
|
siwon | 2023.10.24 | 0 | 737 |
| 35 |
session 과 쿠키
siwon
|
2023.10.24
|
Votes 0
|
Views 578
|
siwon | 2023.10.24 | 0 | 578 |
| 34 |
Late Static Binding (LSB):메서드 내부에서 현재 클래스의 정적 메서드 또는 프로퍼티를 호출할 때 사용
siwon
|
2023.10.24
|
Votes 0
|
Views 589
|
siwon | 2023.10.24 | 0 | 589 |
| 33 |
PHP 예외 처리(Exception Handling)
siwon
|
2023.10.10
|
Votes 0
|
Views 619
|
siwon | 2023.10.10 | 0 | 619 |
| 32 |
php exception
siwon
|
2023.10.10
|
Votes 0
|
Views 1045
|
siwon | 2023.10.10 | 0 | 1045 |
| 31 |
예외(Exception)를 처리하기 위해 try...catch 블록을 사용하는 방법
siwon
|
2023.10.10
|
Votes 0
|
Views 633
|
siwon | 2023.10.10 | 0 | 633 |
| 30 |
Preserving Parent Class Functionality in overriding
siwon
|
2023.09.26
|
Votes 0
|
Views 495
|
siwon | 2023.09.26 | 0 | 495 |
| 29 |
oop 세부항목
siwon
|
2023.09.26
|
Votes 0
|
Views 496
|
siwon | 2023.09.26 | 0 | 496 |
| 28 |
method chaining
siwon
|
2023.09.25
|
Votes 0
|
Views 566
|
siwon | 2023.09.25 | 0 | 566 |
| 27 |
interface implements
siwon
|
2023.09.19
|
Votes 0
|
Views 489
|
siwon | 2023.09.19 | 0 | 489 |
Re:interface implements
siwon
|
2023.10.24
|
Votes 0
|
Views 425
|
siwon | 2023.10.24 | 0 | 425 | |
| 26 |
abstract class : 부모 class로 사용되며 자식(extends 한)에게 abstract method를 강제함(그들만의 방식으로)
siwon
|
2023.09.19
|
Votes 0
|
Views 494
|
siwon | 2023.09.19 | 0 | 494 |
| 25 |
isset() / unset()
siwon
|
2023.09.18
|
Votes 0
|
Views 517
|
siwon | 2023.09.18 | 0 | 517 |
| 24 |
magic methods-어떤 상황이 되면 call 하지 않아도 자동으로 실행되는 메소드
siwon
|
2023.09.18
|
Votes 0
|
Views 518
|
siwon | 2023.09.18 | 0 | 518 |
| 23 |
MD(markdown) file
siwon
|
2023.09.12
|
Votes 0
|
Views 552
|
siwon | 2023.09.12 | 0 | 552 |
| 22 |
usort
siwon
|
2023.08.30
|
Votes 0
|
Views 513
|
siwon | 2023.08.30 | 0 | 513 |
| 21 |
closure=unanimous function
siwon
|
2023.08.30
|
Votes 0
|
Views 570
|
siwon | 2023.08.30 | 0 | 570 |
|
php 7.4에서 추가 화살표 함수 fn()=>
siwon
|
2023.10.24
|
Votes 0
|
Views 925
|
siwon | 2023.10.24 | 0 | 925 | |
| 20 |
reference variable &
siwon
|
2023.08.29
|
Votes 0
|
Views 566
|
siwon | 2023.08.29 | 0 | 566 |
|
참조(reference)한 original variable의 값을 바꿔버리기 때문에 조심해서 써야함
siwon
|
2023.08.30
|
Votes 0
|
Views 606
|
siwon | 2023.08.30 | 0 | 606 | |
| 19 |
PHP 변수 : 스칼라(Scalar), 복합(Composite), 그리고 리소스(Resource)
siwon
|
2023.08.22
|
Votes 0
|
Views 615
|
siwon | 2023.08.22 | 0 | 615 |
| 18 |
if : vs {}
siwon
|
2023.08.22
|
Votes 0
|
Views 476
|
siwon | 2023.08.22 | 0 | 476 |
| 17 |
null coalescing operator
siwon
|
2023.08.18
|
Votes 0
|
Views 590
|
siwon | 2023.08.18 | 0 | 590 |
| 16 |
arrary functions
siwon
|
2023.08.18
|
Votes 0
|
Views 486
|
siwon | 2023.08.18 | 0 | 486 |
| 15 |
http request form method GET POST
siwon
|
2023.08.17
|
Votes 0
|
Views 550
|
siwon | 2023.08.17 | 0 | 550 |