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 1007
|
siwon | 2024.11.26 | -1 | 1007 |
| 39 |
html center 중앙정렬 tailwind
siwon
|
2024.07.27
|
Votes 0
|
Views 1334
|
siwon | 2024.07.27 | 0 | 1334 |
| 38 |
dropdown menu alpinejs 사용 버전
siwon
|
2024.04.30
|
Votes 0
|
Views 1303
|
siwon | 2024.04.30 | 0 | 1303 |
| 37 |
dropdown menu 간단 버전
siwon
|
2024.04.30
|
Votes 0
|
Views 1274
|
siwon | 2024.04.30 | 0 | 1274 |
| 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 1870
|
siwon | 2023.10.24 | 0 | 1870 |
| 35 |
session 과 쿠키
siwon
|
2023.10.24
|
Votes 0
|
Views 1223
|
siwon | 2023.10.24 | 0 | 1223 |
| 34 |
Late Static Binding (LSB):메서드 내부에서 현재 클래스의 정적 메서드 또는 프로퍼티를 호출할 때 사용
siwon
|
2023.10.24
|
Votes 0
|
Views 1104
|
siwon | 2023.10.24 | 0 | 1104 |
| 33 |
PHP 예외 처리(Exception Handling)
siwon
|
2023.10.10
|
Votes 0
|
Views 1401
|
siwon | 2023.10.10 | 0 | 1401 |
| 32 |
php exception
siwon
|
2023.10.10
|
Votes 0
|
Views 1606
|
siwon | 2023.10.10 | 0 | 1606 |
| 31 |
예외(Exception)를 처리하기 위해 try...catch 블록을 사용하는 방법
siwon
|
2023.10.10
|
Votes 0
|
Views 1166
|
siwon | 2023.10.10 | 0 | 1166 |
| 30 |
Preserving Parent Class Functionality in overriding
siwon
|
2023.09.26
|
Votes 0
|
Views 978
|
siwon | 2023.09.26 | 0 | 978 |
| 29 |
oop 세부항목
siwon
|
2023.09.26
|
Votes 0
|
Views 987
|
siwon | 2023.09.26 | 0 | 987 |
| 28 |
method chaining
siwon
|
2023.09.25
|
Votes 0
|
Views 1219
|
siwon | 2023.09.25 | 0 | 1219 |
| 27 |
interface implements
siwon
|
2023.09.19
|
Votes 0
|
Views 1062
|
siwon | 2023.09.19 | 0 | 1062 |
Re:interface implements
siwon
|
2023.10.24
|
Votes 0
|
Views 884
|
siwon | 2023.10.24 | 0 | 884 | |
| 26 |
abstract class : 부모 class로 사용되며 자식(extends 한)에게 abstract method를 강제함(그들만의 방식으로)
siwon
|
2023.09.19
|
Votes 0
|
Views 986
|
siwon | 2023.09.19 | 0 | 986 |
| 25 |
isset() / unset()
siwon
|
2023.09.18
|
Votes 0
|
Views 1132
|
siwon | 2023.09.18 | 0 | 1132 |
| 24 |
magic methods-어떤 상황이 되면 call 하지 않아도 자동으로 실행되는 메소드
siwon
|
2023.09.18
|
Votes 0
|
Views 1124
|
siwon | 2023.09.18 | 0 | 1124 |
| 23 |
MD(markdown) file
siwon
|
2023.09.12
|
Votes 0
|
Views 1079
|
siwon | 2023.09.12 | 0 | 1079 |
| 22 |
usort
siwon
|
2023.08.30
|
Votes 0
|
Views 1048
|
siwon | 2023.08.30 | 0 | 1048 |
| 21 |
closure=unanimous function
siwon
|
2023.08.30
|
Votes 0
|
Views 1112
|
siwon | 2023.08.30 | 0 | 1112 |
|
php 7.4에서 추가 화살표 함수 fn()=>
siwon
|
2023.10.24
|
Votes 0
|
Views 3789
|
siwon | 2023.10.24 | 0 | 3789 | |
| 20 |
reference variable &
siwon
|
2023.08.29
|
Votes 0
|
Views 1110
|
siwon | 2023.08.29 | 0 | 1110 |
|
참조(reference)한 original variable의 값을 바꿔버리기 때문에 조심해서 써야함
siwon
|
2023.08.30
|
Votes 0
|
Views 1063
|
siwon | 2023.08.30 | 0 | 1063 | |
| 19 |
PHP 변수 : 스칼라(Scalar), 복합(Composite), 그리고 리소스(Resource)
siwon
|
2023.08.22
|
Votes 0
|
Views 1170
|
siwon | 2023.08.22 | 0 | 1170 |
| 18 |
if : vs {}
siwon
|
2023.08.22
|
Votes 0
|
Views 954
|
siwon | 2023.08.22 | 0 | 954 |
| 17 |
null coalescing operator
siwon
|
2023.08.18
|
Votes 0
|
Views 1262
|
siwon | 2023.08.18 | 0 | 1262 |
| 16 |
arrary functions
siwon
|
2023.08.18
|
Votes 0
|
Views 1070
|
siwon | 2023.08.18 | 0 | 1070 |