일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- formgroup
- Oracle LISTAGG 사용 예시
- angular route
- angular modal
- 호버
- 옵저버블
- ApexChart
- 모달
- mysql if
- ajax 사용 예시
- prisma
- 아이오닉 스크롤 이벤트
- modal
- 앵귤러 모달
- Angular Router
- scroll
- 스크롤 이벤트 감지
- 앵귤러 애니메이션
- 스크롤 이벤트
- TAILWIND
- flex-1
- 검색
- summary
- angular animation
- angular button
- egov spring ajax 사용 예시
- 셀렉트박스 커스텀
- Ionic modal
- Router
- route
- Today
- Total
목록전체 글 (599)
깜놀하는 해므찌로
import { ApplicationConfig, importProvidersFrom } from '@angular/core'; import { provideRouter, withEnabledBlockingInitialNavigation, } from '@angular/router'; import { appRoutes } from './app.routes'; import { HttpClientModule } from '@angular/common/http'; import { NgxsModule } from '@ngxs/store'; export const appConfig: ApplicationConfig = { providers: [ provideRouter(appRoutes, withEnabledBl..
메뉴를 검색해주세요 {{item}} 1. 검색 돋보기 넣기 : 부모 태그에 relative 명시 후 돋보기 img에 absolute 속성 및 rigt 로 위치 선정 2. 검색어 입력 시 돋보기와 글씨가 겹치지 않게 하기 위해 input 태그 안에 pr pl 패딩 주기 3. 스크롤바 y 축만 생성되도록 내부 w 길이가 더 작도록 설정하기 4. 스크롤바 x 축은 가리도록 over-flow-x-hidden 5. input 최대 길이 설정 시 길이를 줄이기 위해, 자기 부모 태그의 길이를 취하기 위해 w-full 6. absolute 를 사용하여 돋보기 마크를 인풋에 넣기 7. transition-all 을 활용하여 특정 조건 시 [ngClass] rotate 180 되도록 수정 ::-webkit-scrollb..
npm install --force @nextcss/color-tools 1. 설치 /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,ts}"], theme: { extend: { colors: { primary: generateColors("#001650"), }, }, }, plugins: [], }; function generateColors(color) { const { toneMap } = require("@nextcss/color-tools"); return { DEFAULT: color, ...toneMap(color), }; } 2. tailwind.config.js 내부에 컬러..
1. ion 태그는 shadow dom 을 생성 2. shadow dom 속성을 다루기 위해 전용 변수에 접근하자 3. 모달 전용 scss 생성 ion-modal { --border-radius: 0.5rem !important; } 4. radius 설정 5. global.scss 에 import
import { Component, Input } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Router, Route } from '@angular/router'; import { IconComponent } from '../icon/icon.component'; import { ClickOutsideDirective } from '@team-lepisode/directives'; @Component({ selector: 'client-menu-dropdown', standalone: true, imports: [CommonModule, IconComponent, ClickOutsideDirective], ..
1. page.scss 생성 main { @apply flex flex-col gap-5 px-6 py-7; } 2. 메인 태그 default CSS 설정 3. @apply : tailwind 사용 가능 @import "./theme/page.scss"; 4. global.scss 에 import 하기
0. 프론트엔드 연결 / 백엔드 연결 크게 두 가지 연결 방식이 존재합니다. 이번 글에서는 비교적 간단한 로직으로 구현이 가능한 프론트 엔드로 구현 예시를 설명합니다. 1. 최상단 템플릿에 선언 2. 클릭 이벤트 달기 restApiKey = ''; javascriptApiKey = ''; public ngOnInit(): void { Kakao.init(this.javascriptApiKey); // 자바스크립트 key Init 하기 console.log(Kakao.isInitialized()); // javascript DK 가 정상적으로 실행되면 true => javascript key 유효성 검사 } 3. 자바스크립트 API KEY INIT https://developers.kakao.com/ Ka..