실시간TAG
#이벤트 #그래픽카드 #신제품 #AI
공지
이벤트
특집/기획
뉴스/정보
커뮤니티
질문/토론
빌런크루
빌런포럼
장터/핫딜
브랜드로그
운영공지 이용가이드
이벤트 체험단 모집 특가 이벤트 당첨/발표
리뷰
CPU/MB VGA 메모리/스토리지 케이스/파워/쿨러 노트북/PC 가전/음향 공유기/주변기기 키보드/마우스 가젯 (gadget)
취재현장
컴퓨텍스 지스타 일러스타페스 기자간담회 팝업스토어 다나와 아카데미 B컷 인터뷰 영상 수컷학개론 라떼는 르포/기획 사건/사고 지름신 데스크테리어 18+
기술
가전 모바일 컴퓨터 전자부품 카메라 과학 인공지능 블록체인 반도체 보안
산업
건설 부동산 에너지 제조 항공우주 유통
문화/연예
공연 예술 방송 영화 출판 음악
생활
가구 결혼 미용 반려동물 쇼핑 주류 여행
건강
의료 제약 병원 식품
금융/경제
창업 노동 프랜차이즈 보험/연금 암호화폐 금융/은행 사회 게임 스포츠 레트로 자동차
18+뉴스
상품/홍보
자유게시판
출석/가입 일상/생활 이슈/논란 여행/맛집 상품/홍보 취미/교양
유머게시판
유머 감동
리뷰/사용기
그래픽카드 시피유/메인보드 디스플레이 전원공급장치 메모리/스토리지 케이스/쿨링 키보드/마우스 기타 주변기기 노트북/PC 팁/강좌 구매/체험 모바일/스마트폰
갤러리
데스크셋업 DIY/튜닝 일상/여행/맛집 행사/축제 버그/건의
18+게시판
AI이미지 후방/은꼴 야설/망가 연예인 인플루언서/BJ 성인정보 18+질문
질문/답변
일반/상식 조립/견적 쇼핑/장소 휴대폰구매 인터넷신청 법률/전문지식 고민상담
토론
설문조사 주제토론
H/W포럼
PC/노트북 모바일/태블릿 TV/음향 영상/카메라 생활/주방가전
게임포럼
온라인게임 PC게임 콘솔게임 모바일게임 e스포츠/대회
투자포럼
주식 부동산 전자화폐
스포츠포럼
축구 야구 이종격투기 기타 스포츠
컬쳐포럼
영화 드라마 애니 만화/웹툰 문학/소설 공연
여행포럼
국내여행 해외여행 캠핑/아웃도어 축제/행사
개발포럼
개발뉴스 개발 팁/강좌
18+포럼
전자담배 성인용품 캣파이트 도색잡지
핫딜정보
PC/가전핫딜 게임/SW핫딜 취미용품핫딜 기타핫딜 인터넷가입 휴대폰특가
중고장터
팝니다 삽니다 무료나눔
공지
이벤트
특집/기획
18+
뉴스/정보
커뮤니티
질문/토론
빌런크루
빌런포럼
장터/핫딜
브랜드로그
빌런 TOP 20
일간 l 주간 l 월간
1
[컴퓨터] 이엠텍아이엔씨, SAPPHIRE Radeon RX 9070 XT·RX 9070·RX 9070 GRE 구매 시 ‘귀무자’ 게임 증정
2
[컴퓨터] 잘만테크, 듀얼챔버 어항 케이스 ‘D30 / D40 / D40F’ 시리즈 출시
3
[컴퓨터] 엔비디아, 게임스컴 2026서 DLSS 4.5·RTX 등 게이밍 기술 대거 공개
4
[컴퓨터] 추석 배 선물 세트 500명 추첨! 탁탁몰, 고객 감사 추석 선물 이벤트 진행
5
[컴퓨터] 서린씨앤아이, 리안리 HydroShift II OLED Curved 및 O11 Vision Compact 구매 시 스텔스 키트 증정 프로모션 진행
6
[컴퓨터] 서린씨앤아이, 리안리 HydroShift II OLED Curved 및 O11 Vision Compact 구매 시 스텔스 키트 증정
7
[컴퓨터] 다나와, 경희대서 ‘2026 인텔&다나와 아카데미 페스티벌’ 개최
8
[컴퓨터] 에이수스, 96% 무선 커스텀 키보드 ‘ROG Strix Morph 96 Wireless’ 출시
9
[컴퓨터] 긱스타, 반투명 키캡 기계식 키보드 'GKG108ADE' 출시 기념 예판
10
[컴퓨터] MSI, RTX 50 시리즈 구매자 대상 ‘컨트롤 레조넌트’ 게임 코드 증정 프로모션 진행
11
[컴퓨터] 엔비디아 DGX 스파크에 최적화된 퍼플렉시티 ‘포터블 컴퓨터’ 에이전트 출시
12
[컴퓨터] MSI, 9월 2일 G마켓 G라이브 출격…노트북·데스크탑·QD-OLED 모니터 특가
13
[가전] 오랄케어 시스템, ‘다이슨 카메라젯’ 전동 칫솔 + 구강 세정기 출시
14
[컴퓨터] 차갑고 조용하고, 쿨링팬까지 아주 큰 너… 얼마면 돼?
15
[키보드/마우스] 레이저 나가 V3 프로 [써보니] MMO·MOBA 맞춤형 게이밍 마우스
16
[일상/생활] 축의금 20만원이 아니라 200만원이라니
17
[유통] 플레이오토 ‘2026 코리아 이커머스 페어’ 참가…AI 실전 스케일업 전략 공개
18
[컴퓨터] 디앤디컴, 타이치 시리즈 최초 순백의 감성 끝판왕 'ASRock X870E Taichi White' 출시
19
[컴퓨터] 마이크로닉스, WIZMAX 스텔라 포토 상품평 이벤트 진행
20
[VGA] 귀무자 : Way of the Sword 추천 그래픽카드 [벤치마크] 보급형 VGA 10종
1
[컴퓨터] ‘레트로 PC케이스의 재해석’ 마이크로닉스, 실버스톤 FLP03 컴퓨존 예약판매 진행
2
[컴퓨터] 이엠텍아이엔씨, SAPPHIRE Radeon RX 9070 XT·RX 9070·RX 9070 GRE 구매 시 ‘귀무자’ 게임 증정
3
[컴퓨터] 마이크로닉스, WIZMAX 스텔라 포토 상품평 이벤트 진행
4
[컴퓨터] 추석 배 선물 세트 500명 추첨! 탁탁몰, 고객 감사 추석 선물 이벤트 진행
5
[인공지능] 엔비디아, IFA 2026서 로컬 AI 가속하는 신기술·생태계 공개
6
[컴퓨터] 서린씨앤아이, 리안리 HydroShift II OLED Curved 및 O11 Vision Compact 구매 시 스텔스 키트 증정
7
[일상/생활] 용용체로 싸우는 사람들
8
[후방/은꼴] 인스타 골반 라인
9
[컴퓨터] 다나와, 경희대서 ‘2026 인텔&다나와 아카데미 페스티벌’ 개최
10
[여행/맛집] 홍콩. 딤섬 전문점 육안거(구 연향거 / 六安居, Luk On Kui)
11
[인플루언서/BJ] 일본 비키니 모델 키 184cm 보고 깜짝 놀랐네
12
[일상/생활] 미국 위험 주 살인율 순위
13
[일상/생활] 폭주 오토바이 무리, 도로 위 스릴
14
[후방/은꼴] [약후]일광욕하는 마이크로 비키니녀[댓글수
15
[일상/생활] 귀신도 고칼로리라니
16
[컴퓨터] 에이수스, 96% 무선 커스텀 키보드 ‘ROG Strix Morph 96 Wireless’ 출시
17
[컴퓨터] 엔비디아, 게임스컴 2026서 DLSS 4.5·RTX 등 게이밍 기술 대거 공개
18
[후방/은꼴] 노예가 니코로빈과 나미
1
[전자부품] RTX 5080 190만원대 특가! 조텍, 지포스 그래픽카드 특가 진행
2
[컴퓨터] RTX 5090, 단돈 100원! 탁탁몰, 조텍 RTX 5090 ‘100원딜’ 이벤트 진행
3
[컴퓨터] 한정판 굿즈 제공! 조텍, RTX 50 그래픽카드 리뷰 이벤트 7월 진행
4
[컴퓨터] RTX 5080 190만원대 한정 특가! 조텍, 지포스 그래픽카드 선착순 특가 진행
5
[컴퓨터] 조텍코리아 여름 휴가 안내
6
[컴퓨터] RTX 5070 광복절 기념 81만 5천원! 조텍, 역대급 8.15 특가 진행
7
[컴퓨터] 한정판 1:1 선물 제공! 조텍, RTX 50 그래픽카드 리뷰 이벤트 8월 진행
8
[케이스/파워/쿨러] 다크플래쉬 FLOATRON F1 케이스 [써보니] 공중부양 섀시로 발상을 깨다
9
[컴퓨터] '음식물 처리기 샀더니 5080이?' 인사이 X 조텍 '유부남 취향 저격' 이색 콜라보 이벤트
10
[가전] 인사이, 음식물 처리기 구매 고객 대상 조텍 RTX 5080 증정 이벤트 진행
11
[컴퓨터] 한정판 굿즈 제공! 조텍, RTX 50 그래픽카드 리뷰 이벤트 7월 진행
12
[B컷] 다크플래쉬 DRX90 AERO MESH RGB 케이스 [B컷]
13
[케이스/파워/쿨러] 다크플래쉬 DK200 NEO MESH 케이스 [써보니] 식스팬이면 뜨거운 여름도 가뿐하지!
14
[컴퓨터] 다크플래쉬, ‘DN-360D ARGB V1.5’ 출시…쿨링 성능·편의성 업그레이드
15
[B컷] 다크플래쉬 FLOATRON F1 케이스
16
[케이스/파워/쿨러] 다크플래쉬 DRX90 AERO MESH RGB 케이스 [써보니] 사면 메쉬로 숨통을 틔운 실용형 쿨링 케이스
17
[컴퓨터] 다크플래쉬, BM-07C 이동식 TV 모니터 거치대 스탠드 출시
18
[가전] ‘65형 대형 TV까지 지원’…다크플래쉬, BM-07C 이동식 TV 모니터 거치대 스탠드 출시
19
[컴퓨터] 다크플래쉬, 4만 원대 게이밍 케이스 'DK200 NEO MESH RGB 식스팬' 출시
20
[컴퓨터] 다크플래쉬, 다나와 히트브랜드 PC 케이스 부문 4년 연속 선정
구매후기 이벤트
전체 l 공지 l 이벤트 l 특집/기획 l 뉴스/정보 l 커뮤니티 l 질문/토론 l 빌런크루 l 빌런포럼 l 장터/핫딜 l 브랜드로그
[개발 팁/강좌] Spring boot에서 tailwindcss 사용하기
처음 글 올리네요. ㅎㅎ Spring boot에서 Tailwind CSS를 사용하고 싶어서 다음과 같은 방식을 고안하게 되었습니다. 저는 템플릿을 Thymeleaf(타임리프)를 좋아해서 이 기준으로 작성하겠습니다. Framework : String boot 4 Template : Thymeleaf(타임리프) CSS : Tailwind CSS 미리 Node.js 설치해 주세요. 우선 프로젝트 하나를 생성합니다. 그 다음 리소스를 생성합니다. 우선 index.html 을 다음과 같은 내용으로 생성합니다. 경로 : src/main/resources/template/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tailwind TEST</title> </head> <body> <div>Tailwind CSS</div> </body> </html> 그 다음 스타일 시트를 생성합니다. 우선 스타일시트 파일 확인용이라 아무 스타일이나 입력해주세요. 경로 : src/main/resources/static/css/default.css @charset "UTF-8"; html, body { height: 100%; place-items: center; place-self: center; place-content: center; } div { width: 10rem; height: 5rem; margin: 0 auto; background: lightcoral; border: 1px red solid; } 그럼 두 경로에 파일이 보이실 꺼에요. 그다음 index.html head에 다음 테그를 삽입해 주세요. <link rel="stylesheet" href="./../static/css/default.css"> 스타일이 적용되는지 확인합니다. 적용 확인이 되면 그다음 head에 다음 tag를 삽입해 주세요. <!-- Tailwind CSS dynamic Style CDN 스타일 완성후 삭제 --> <script src="https://unpkg.com/@tailwindcss/browser@4"></script> 개발자 모드를 활용해 실시간으로 스타일이 적용되는지 확인해주세요. 확정 된 스타일을 index.html파일에 적용합니다. 이런 식으로 스타일을 적용하여 완성된 스타일을 default.css로 빌드하여 적용해 보도록 하겠습니다. src랑 같은 위치에 node 경로를 생성해주세요. 그 다음 node안에 package.json 파일 생성 후 다음 내용을 입력해 주세요. { "dependencies": { "@tailwindcss/forms": "^0.5.6", "autoprefixer": "^10.4.16", "fs-extra": "^11.1.1", "heroicons": "^2.0.18", "postcss": "^8.4.31", "tailwindcss": "^3.3.3", "update-browserslist-db": "^1.2.3" } } 터미널에서 다음 명령을 실행하세요. npm install 빌드를 정상적으로 실행하기 위해 postcss 설정 파일을 생성합니다. node/postcss.config.js module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ] } 이제 node안에 css파일을 하나 생성합니다. node/default.css 아래의 내용을 추가합니다. @tailwind base; @tailwind components; html, body { @apply h-full place-items-center place-self-center place-content-center; } div { @apply w-[10rem] h-[5rem] mx-auto rounded shadow-lg shadow-black/15 bg-red-200 text-center place-content-center } 다음으로 할 작업은 nodejs 빌드 스크립트 추가입니다. 저는 node폴더에서 실행하는 기준으로 작성하겠습니다. 우선 빌드 대상은 node안에 있어야 함으로 node/tmpl 에 복사하고 빌드하도록 하겠습니다. 우선 node/tmpl 에 복사하는 스크립트를 작성하겠습니다. node/copy.js 파일을 생성합니다. const fsExtra = require('fs-extra'); console.log('Resource init!'); const sourceDirectory1 = './../src/main/resources/templates'; // 원본 디렉토리 경로 const targetDirectory1 = './tmpl/t'; // 대상 디렉토리 경로 console.log('Try copy '${sourceDirectory1}' -> ${targetDirectory1}'); fsExtra.copy(sourceDirectory1, targetDirectory1, err => { if (err) { console.error('Error copying directory:', err); } else { console.log('Directory copied successfully! 1'); } }); console.log('Finished : ${new Date().toISOString()}'); 그 다음 터미널에서 실행해 복사를 확인합니다. node copy.js index.html에서 <script src="https://unpkg.com/@tailwindcss/browser@4"></script> 를 삭제하고 정합니다. 다음은 tailwindcss 빌드 입니다. -i : 인풋 -o : 아웃풋 터미널에서 아래 명령을 실행헤 주세요. npx tailwindcss build -i default.css -o ../src/main/resources/static/css/default.css 그 다음 적용여부를 확인하면 완료입니다. 그리고 빌드를 쉽게 하기 위해 package.json의에 빌드 스크립트를 추가합니다. 빌드 대상 폴더 비우기 rm -rf tmpl 빌드 대상 복사 node copy.js tailwindcss 빌드 tailwindcss build -i default.css -c tailwind.config.js -o 압축버전 빌드 (공백 삭제 등 용량 최적화) --minify 추가 { "scripts": { "css": "rm -rf tmpl && node copy.js && tailwindcss build -i default.css -c tailwind.config.js -o ../src/main/resources/static/assets/v2/css/default.css", "css-min": "rm -rf tmpl && node copy.js && tailwindcss build --minify -i default.css -c tailwind.config.js -o ../src/main/resources/static/assets/v2/css/default.css" }, "dependencies": { "@tailwindcss/forms": "^0.5.6", "autoprefixer": "^10.4.16", "fs-extra": "^11.1.1", "heroicons": "^2.0.18", "postcss": "^8.4.31", "tailwindcss": "^3.3.3", "update-browserslist-db": "^1.2.3" } } 이렇게 하면 빌드 시 아래화 같이 커맨드를 입력하면 됩니다. 일반 : npm run css 압축 : npm run css-min gradle에서 빌드 시 위 내용을 자동 실행 하고 싶으면 build.gradle 다음 내용을 추가하면 됩니다. task nodePreBuild(type: Exec) { // node 폴더 위치를 절대 경로로 계산 workingDir = file("${projectDir}/node") // Windows와 Mac/Linux 호환성 처리 if (System.getProperty('os.name').toLowerCase().contains('windows')) { executable 'cmd' args '/c', 'npm', 'run', 'css' } else { executable 'sh' args '-c', 'npm run css' } // 3. 디버깅을 위한 출력 (Gradle 실행 시 콘솔에 찍힘) doFirst { println "--------- CSS Build Start ---------" println "Working Directory: ${workingDir}" println "Executable: ${executable}" println "Arguments: ${args}" println "-----------------------------------" } } processResources.dependsOn nodePreBuild 궁금하신건 댓글 달아주세요. Tailwind CSS 좋아하는데… 요즘 많이 힘들다고 하네요. 많이 응원해주세요. ㅎㅎ
2026.01.16
1
1
1
브랜드로그
0 / 0
이엠텍, PALIT 지포스 RTX 50 게이밍 PC 단 1시간 G마켓 라이브 특가 진행 이엠텍 @emtek 2시간전
서린씨앤아이, 네이버 스마트스토어 추석 세일 진행… 최대 50% 할인 서린씨앤아이 @seorincni 4시간전
서린씨앤아이, 리안리 유니팬 CL FLEX 시리즈 공식 출시 서린씨앤아이 @seorincni 4시간전
한정판 굿즈 제공! 조텍, RTX 50 그래픽카드 리뷰 이벤트 9월 진행 조텍X탁탁몰 @zotac 5시간전
파인인포, ‘MY PC-BTI’ PC 성향 테스트 이벤트 진행…“나의 PC 유형은?” 파인인포 @pineinfo 5시간전
런칭특가
  • 종합
  • 뉴스/정보
  • 커뮤니티
  • 질문/토론
TOP1 [컴퓨터] 이엠텍아이엔씨, SAPPHIRE Radeon RX 9070 XT·RX 9070·RX 9070 GRE 구매 시 ‘귀무자’ 게임 증정
TOP2 [컴퓨터] 잘만테크, 듀얼챔버 어항 케이스 ‘D30 / D40 / D40F’ 시리즈 출시
TOP3 [컴퓨터] 엔비디아, 게임스컴 2026서 DLSS 4.5·RTX 등 게이밍 기술 대거 공개
TOP4 [컴퓨터] 추석 배 선물 세트 500명 추첨! 탁탁몰, 고객 감사 추석 선물 이벤트 진행
TOP5 [컴퓨터] 서린씨앤아이, 리안리 HydroShift II OLED Curved 및 O11 Vision Compact 구매 시 스텔스 키트 증정 프로모션 진행
TOP6 [컴퓨터] 서린씨앤아이, 리안리 HydroShift II OLED Curved 및 O11 Vision Compact 구매 시 스텔스 키트 증정
TOP7 [컴퓨터] 다나와, 경희대서 ‘2026 인텔&다나와 아카데미 페스티벌’ 개최
TOP8 [컴퓨터] 에이수스, 96% 무선 커스텀 키보드 ‘ROG Strix Morph 96 Wireless’ 출시
TOP9 [컴퓨터] 긱스타, 반투명 키캡 기계식 키보드 'GKG108ADE' 출시 기념 예판
TOP10 [일상/생활] 축의금 20만원이 아니라 200만원이라니
TOP1 [컴퓨터] 이엠텍아이엔씨, SAPPHIRE Radeon RX 9070 XT·RX 9070·RX 9070 GRE 구매 시 ‘귀무자’ 게임 증정
TOP2 [컴퓨터] 잘만테크, 듀얼챔버 어항 케이스 ‘D30 / D40 / D40F’ 시리즈 출시
TOP3 [컴퓨터] 엔비디아, 게임스컴 2026서 DLSS 4.5·RTX 등 게이밍 기술 대거 공개
TOP4 [컴퓨터] 추석 배 선물 세트 500명 추첨! 탁탁몰, 고객 감사 추석 선물 이벤트 진행
TOP5 [컴퓨터] 서린씨앤아이, 리안리 HydroShift II OLED Curved 및 O11 Vision Compact 구매 시 스텔스 키트 증정 프로모션 진행
TOP6 [컴퓨터] 서린씨앤아이, 리안리 HydroShift II OLED Curved 및 O11 Vision Compact 구매 시 스텔스 키트 증정
TOP7 [컴퓨터] 다나와, 경희대서 ‘2026 인텔&다나와 아카데미 페스티벌’ 개최
TOP8 [컴퓨터] 에이수스, 96% 무선 커스텀 키보드 ‘ROG Strix Morph 96 Wireless’ 출시
TOP9 [컴퓨터] 긱스타, 반투명 키캡 기계식 키보드 'GKG108ADE' 출시 기념 예판
TOP10 [컴퓨터] 차갑고 조용하고, 쿨링팬까지 아주 큰 너… 얼마면 돼?
TOP1 [일상/생활] 축의금 20만원이 아니라 200만원이라니
TOP2 [후방/은꼴] 노예가 니코로빈과 나미
TOP3 [일상/생활] 청년에게 문화비 15만원 지원 소식
TOP4 [후방/은꼴] 다나 8월 언더붑 밑캠.
TOP5 [후방/은꼴] 거유
TOP6 [여행/맛집] 상다리가 휘어졌던 광저우의 어느 식당
TOP7 [일상/생활] 방학 마무리 국밥과 암뽕순대
TOP8 [일상/생활] 고도비만, 운동만으로는 살 안 빠지는 진짜 이유
TOP9 [후방/은꼴] 블랙 란제리와 레깅스를 입은 도이
TOP10 [일상/생활] 10억 복권 양보한 동료 이야기
TOP1 [설문조사] 어떤 이벤트를 해볼까요?
TOP2 [주제토론] 여러분의 첫 휴대폰은 뭐였나요?
TOP3 [조립/견적] 스팀 머신 가격은 얼마나 될까요?
TOP4 [주제토론] 낙태 찬성vs반대
TOP5 [조립/견적] 아수스 화이트 보드 중에 제일 상급은 어떤 제품일까요??
TOP6 [토론] 놀이공원 매직패스 논쟁
TOP7 [조립/견적] 이 제품을 사면 그래픽카드를 안사도 될까요?
TOP8 [일반/상식] 더운날 캠핑은 어디로 가시나요?
TOP9 [일반/상식] 이 맥주, 정체가 뭘까요?
빌런
조텍 프로모션
빌런18+ 소개 이용약관 개인정보처리방침 광고 및 제휴문의
커뮤니티 빌런 18+ ( Villain ) Beta 2.0
본사 l 서울 금천구 가산디지털1로 33-33 대륭테크노타운2차 7층 705-5호
운영 l 경기도 고양시 덕양구 동축로 70 현대프리미어캠퍼스5층 B동 A5-48
대표전화 l 010-4588-4581 서비스 시작일 l 2025-08-15 전자우편 l master@villain.city
커뮤니티 빌런 18+ ( Villain ) 의 모든 콘텐츠(영상,기사, 사진)는 출처를 표기하는 조건으로 무단 전재와 복사, 배포 등을 허용합니다.
Copyright © 커뮤니티 빌런 18+ ( Villain ) All Rights Reserved.