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 |
| 40 |
php formatter
siwon
|
2024.11.26
|
Votes -1
|
Views 1320
|
siwon | 2024.11.26 | -1 | 1320 |
| 39 |
html center 중앙정렬 tailwind
siwon
|
2024.07.27
|
Votes 0
|
Views 1639
|
siwon | 2024.07.27 | 0 | 1639 |
| 38 |
dropdown menu alpinejs 사용 버전
siwon
|
2024.04.30
|
Votes 0
|
Views 1565
|
siwon | 2024.04.30 | 0 | 1565 |
| 37 |
dropdown menu 간단 버전
siwon
|
2024.04.30
|
Votes 0
|
Views 1524
|
siwon | 2024.04.30 | 0 | 1524 |
| 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 2201
|
siwon | 2023.10.24 | 0 | 2201 |
| 35 |
session 과 쿠키
siwon
|
2023.10.24
|
Votes 0
|
Views 1461
|
siwon | 2023.10.24 | 0 | 1461 |
| 34 |
Late Static Binding (LSB):메서드 내부에서 현재 클래스의 정적 메서드 또는 프로퍼티를 호출할 때 사용
siwon
|
2023.10.24
|
Votes 0
|
Views 1285
|
siwon | 2023.10.24 | 0 | 1285 |
| 33 |
PHP 예외 처리(Exception Handling)
siwon
|
2023.10.10
|
Votes 0
|
Views 1606
|
siwon | 2023.10.10 | 0 | 1606 |
| 32 |
php exception
siwon
|
2023.10.10
|
Votes 0
|
Views 1802
|
siwon | 2023.10.10 | 0 | 1802 |
| 31 |
예외(Exception)를 처리하기 위해 try...catch 블록을 사용하는 방법
siwon
|
2023.10.10
|
Votes 0
|
Views 1340
|
siwon | 2023.10.10 | 0 | 1340 |
| 30 |
Preserving Parent Class Functionality in overriding
siwon
|
2023.09.26
|
Votes 0
|
Views 1173
|
siwon | 2023.09.26 | 0 | 1173 |
| 29 |
oop 세부항목
siwon
|
2023.09.26
|
Votes 0
|
Views 1190
|
siwon | 2023.09.26 | 0 | 1190 |
| 28 |
method chaining
siwon
|
2023.09.25
|
Votes 0
|
Views 1419
|
siwon | 2023.09.25 | 0 | 1419 |
| 27 |
interface implements
siwon
|
2023.09.19
|
Votes 0
|
Views 1242
|
siwon | 2023.09.19 | 0 | 1242 |
Re:interface implements
siwon
|
2023.10.24
|
Votes 0
|
Views 1050
|
siwon | 2023.10.24 | 0 | 1050 | |
| 26 |
abstract class : 부모 class로 사용되며 자식(extends 한)에게 abstract method를 강제함(그들만의 방식으로)
siwon
|
2023.09.19
|
Votes 0
|
Views 1136
|
siwon | 2023.09.19 | 0 | 1136 |
| 25 |
isset() / unset()
siwon
|
2023.09.18
|
Votes 0
|
Views 1314
|
siwon | 2023.09.18 | 0 | 1314 |
| 24 |
magic methods-어떤 상황이 되면 call 하지 않아도 자동으로 실행되는 메소드
siwon
|
2023.09.18
|
Votes 0
|
Views 1321
|
siwon | 2023.09.18 | 0 | 1321 |
| 23 |
MD(markdown) file
siwon
|
2023.09.12
|
Votes 0
|
Views 1240
|
siwon | 2023.09.12 | 0 | 1240 |
| 22 |
usort
siwon
|
2023.08.30
|
Votes 0
|
Views 1277
|
siwon | 2023.08.30 | 0 | 1277 |
| 21 |
closure=unanimous function
siwon
|
2023.08.30
|
Votes 0
|
Views 1305
|
siwon | 2023.08.30 | 0 | 1305 |
|
php 7.4에서 추가 화살표 함수 fn()=>
siwon
|
2023.10.24
|
Votes 0
|
Views 3970
|
siwon | 2023.10.24 | 0 | 3970 | |
| 20 |
reference variable &
siwon
|
2023.08.29
|
Votes 0
|
Views 1296
|
siwon | 2023.08.29 | 0 | 1296 |
|
참조(reference)한 original variable의 값을 바꿔버리기 때문에 조심해서 써야함
siwon
|
2023.08.30
|
Votes 0
|
Views 1227
|
siwon | 2023.08.30 | 0 | 1227 | |
| 19 |
PHP 변수 : 스칼라(Scalar), 복합(Composite), 그리고 리소스(Resource)
siwon
|
2023.08.22
|
Votes 0
|
Views 1376
|
siwon | 2023.08.22 | 0 | 1376 |
| 18 |
if : vs {}
siwon
|
2023.08.22
|
Votes 0
|
Views 1120
|
siwon | 2023.08.22 | 0 | 1120 |
| 17 |
null coalescing operator
siwon
|
2023.08.18
|
Votes 0
|
Views 1468
|
siwon | 2023.08.18 | 0 | 1468 |
| 16 |
arrary functions
siwon
|
2023.08.18
|
Votes 0
|
Views 1281
|
siwon | 2023.08.18 | 0 | 1281 |