mmalmmizal

  • 홈
  • 태그
  • 방명록
프로필사진

mmalmmizal

  • 분류 전체보기 (62)
    • Java (2)
    • Solidity (3)
    • Python (11)
    • JS.TS (8)
    • C&C++ (8)
    • NestJS (1)
    • Algorithm (1)
    • React (2)
    • nodejs (1)
    • Tip (3)
    • git (3)
    • R (1)
    • 자료구조 (1)
    • 운영체제 (6)
    • 블록체인&Web3 (7)
    • TODO (0)
    • HTML&CSS (2)

Tag

shallow comparison, array.prototype.filter(), 노션, solidity #event, uniswap, 노션창모드, 최소힙, ES모듈, chatgpt답변정리, openzeppelin, polygon pos, 운영체제의 이해 #지은이 김용석, metamask #, nestjs, web3, while-else구문 #신기할지도, sepolia, useState, uups, option tag,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Github

Archives

Calendar

«   2025/09   »
일 월 화 수 목 금 토
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

방문자수Total

  • Today :
  • Yesterday :

HTML&CSS 2

CSS Modules과 tailwind 적용하기

CSS Modules 팀원과 같은 이름의 스타일 클래스를 작성해서 스타일이 겹치는 일 발생했다. 각자의 컴포넌트에서 제한된 스타일 클래스를 사용하기 위해 CSS Module을 이용하였다. 파일명 규칙*.module.css주요 특징클래스가 컴포넌트 범위로 스코프 제한됨 (충돌 없음)사용 방법import styles from './file.module.css'import styles from './MyComponent.module.css';export default function MyComponent() { return Hello CSS Modules;} Tailwind CSS도 함께 적용하기 animation background-position을 이동시켰을 때 시각적으로 변화를 주기 위해 back..

HTML&CSS 2025.06.15

간단한 CSS 로딩 애니메이션 만들기 (원형, 바)

@keyframes CSS 애니메이션을 정의할 때 사용하는 규칙특정 애니메이션 이름을 기준으로 시작부터 끝까지의 스타일 변화를 지정할 수 있다. deg degree의 약자 360deg = 2rad = 1turn @keyframes circle{ from{ transform:rotate(0deg); } to{ transform: rotate(360deg); }}.circle{ width:40px; height:40px; border: 5px solid #3498db; border-top: 4px solid transparent; border-radius:50%; animation: circle 1s infinite}.progre..

HTML&CSS 2025.06.06
이전
1
다음
더보기

Copyright © Kakao Corp. All rights reserved.

티스토리툴바