실시간TAG
#그래픽카드 #조텍 #빌런
공지
이벤트
특집/기획
뉴스/정보
커뮤니티
질문/토론
빌런포럼
장터/핫딜
브랜드로그
운영공지
이용가이드
이벤트
체험단 모집
특가 이벤트
당첨/발표
리뷰
CPU/MB VGA 메모리/스토리지 케이스/파워/쿨러 노트북/PC 가전/음향 공유기/주변기기 키보드/마우스 가젯 (gadget)
르포/기획
컴퓨텍스 지스타
B컷
인터뷰
영상
수컷학개론
라떼는
사건/사고
지름신
기술
가전 모바일 컴퓨터 전자부품 카메라 과학 인공지능 블록체인 반도체 보안
산업
건설 부동산 에너지 제조 항공우주 유통
문화/연예
공연 예술 방송 영화 출판 음악
생활
가구 결혼 미용 반려동물 쇼핑 주류 여행
건강
의료 제약 병원 식품
금융/경제
창업 노동 프랜차이즈 보험/연금 암호화폐 금융/은행
사회
게임
스포츠
레트로
자동차
자유게시판
출석/가입 일상/생활 이슈/논란 여행/맛집 상품/홍보 취미/교양
유머게시판
유머 감동
리뷰/사용기
그래픽카드 시피유/메인보드 디스플레이 전원공급장치 메모리/스토리지 케이스/쿨링 키보드/마우스 기타 주변기기 노트북/PC 팁/강좌 구매/체험 모바일/스마트폰
갤러리
데스크셋업 DIY/튜닝 일상/여행/맛집
버그/건의
18+게시판
AI이미지 후방/은꼴 연예인 인플루언서/BJ 성인정보 18+질문
질문/답변
일반/상식 조립/견적 쇼핑/장소 휴대폰구매 인터넷신청 법률/전문지식
고민상담
토론
설문조사 주제토론
H/W포럼
PC/노트북 모바일/태블릿 TV/음향 영상/카메라 생활/주방가전
게임포럼
온라인게임 PC게임 콘솔게임 모바일게임 e스포츠/대회
투자포럼
주식 부동산 전자화폐
스포츠포럼
축구 야구 이종격투기 기타 스포츠
컬쳐포럼
영화 드라마 애니 만화/웹툰 문학/소설 공연
여행포럼
국내여행 해외여행 캠핑/아웃도어 축제/행사
개발포럼
개발뉴스 개발 팁/강좌
18+포럼
전자담배 성인용품 캣파이트 도색잡지
핫딜정보
PC/가전핫딜 게임/SW핫딜 취미용품핫딜 기타핫딜 인터넷가입 휴대폰특가
중고장터
팝니다 삽니다 무료나눔
공지
이벤트
특집/기획
뉴스/정보
커뮤니티
질문/토론
빌런포럼
장터/핫딜
브랜드로그
빌런 TOP 20
일간 l 주간 l 월간
1
[모바일] 삼성 갤럭시 S27 울트라, 적외선 대신 ‘편광광 인식’ 인증 시스템 도입 가능
2
[자유게시판] 날씨가 점점 어두워지네요
3
[모바일] 삼성 OneUI 8.5 전체 변경점 공개… AI·연결성·보안·워치 기능 전반 업그레이드
4
[컴퓨터] TSMC·대만, 미국 반도체에 5천억 달러 투자
5
[일상/생활] U23 경기 있군요.
6
[컴퓨터] 조텍코리아, RTX 5070 Ti AMP Extreme Infinity 한정 수량 특가 판매
7
[르포/기획] [칼럼] 캠핑의 몰락, 준비된 비극이다
8
[모바일] 아이폰 17 판매 급등… A19·A19 Pro 칩셋 주문량 두 달 만에 500만 개 증가
9
[컴퓨터] 팬서 레이크 기반 코어 울트라 X7 358H 성능, 최대 92% 향상
10
[모바일] 삼성, 첫 번째 투명 스마트폰 ‘갤럭시 글래스’로 아이폰을 제압?
11
[일상/생활] 집에 실거미가 좀 보이네요
12
[주제토론] 원망스럽도다... 동양 귀신 VS 서양 귀신
13
[취미/교양] 국산 인디 게임 숲속의 작은 마녀 스팀으로 발매!
14
[컴퓨터] 엔비디아 CEO 젠슨 황 “AI를 비난하지 말라”
15
[조립/견적] 모니터암 어떤게 좋을까요?
16
[컴퓨터] 인텔 Arc B770 GPU, 펌웨어 유출로 BMG-G31 존재 재확인
17
[자유게시판] 오늘도 출첵완료~
18
[모바일] 애플, 중국 시장 달래기 카드 꺼냈다
19
[게임] 디스패치 300만장 판매 돌파
20
[이벤트] 빌런 신규 가입자를 위한 특별한 이벤트
1
[컴퓨터] TRYX(트라익스), CES 2026 통해 혁신적인 신제품 3종 공개
2
[리뷰] 전기세, 공간, 성능 사이에서 찾은 현실적 해답! ZOTAC ZBOX CI343 Edge 미니베어본
3
[컴퓨터] 인텔 CFO, ‘Arrow Lake Refresh’ CPU 발표 확인… AMD 라이젠과의 데스크톱 격차는 여전히 문제
4
[일상/생활] 겨울철 전기차 주행거리, 이렇게 하면 극대화할 수 있다
5
[이슈/논란] 다운증후군 21번 염색체 제거 성공
6
[컴퓨터] 대원씨티에스, ASUS Prime·Dual GeForce RTX 5050 OC 그래픽카드 2종 출시
7
[영상] PC 메모리 가격 실화? 메모리 시장 심층 분석! 에센코어x파인인포 연말 세미나
8
[PC게임] 디트로이트 비컴 휴먼
9
[컴퓨터] ASUS, ROG 매트릭스 RTX 5090 써멀 리퀴드 메탈 도포 방식 개선
10
[게임] PC방 게임 이용 시간, 전년대비 6% 감소
11
[게임] 넥슨 '아크 레이더스' 스팀 혁신상
12
[게임] 아이온 2 매출 1,000억 원 돌파
13
[르포/기획] 알리에서 라이젠 9600X 시피유 구매하다
14
[게임] 아크 레이더스 1200만 장 판매를 돌파
15
[성인정보] 마돈나 2월 기대 신인 이치카
16
[컴퓨터] 카드사 5만원 추가 할인까지! 조텍, 2026년 대비 RTX 5080 및 RTX 5070 Ti 그래픽카드 특가 진행
17
[컴퓨터] 엔비디아, RTX 50 시리즈 중 RTX 5060 계열에 우선순위
1
[인플루언서/BJ] 넷플릭스 불량연애 출연자 과거 논란
2
[성인정보] 현재 성인 웹툰 추천 티어표
3
[이슈/논란] [충격] 유명 런닝화 호카 총판 대표 폭력, 하청업체 관계자 폐건물로 불러 폭행
4
[인공지능] 구글, AI 프로 요금제 59% 할인
5
[PC게임] 란스 시리즈 - 스팀판 트레일러
6
[컴퓨터] MSI 엔비디아 RTX 5090 그래픽카드, 16핀 전원 커넥터 실화로 손상
7
[설문조사] [빌런 설문조사] 가장 가지고 싶은 30만원 이하 27인치 QHD 게이밍 모니터는?
8
[PC게임] [2025 BEST 게임 어워드] Escape from Duckov - 덕코프 행복 줍줍 게임
9
[컴퓨터] AMD 9950X3D2 CPU 벤치마크 결과 유출
10
[컴퓨터] 메모리 공급 부족 사태 마이크로소프트 경영진 격분, 구글은 구매 책임자 해고
11
[모바일] 삼성전자, 독자 GPU 개발 성공...AI 생태계 확장
12
[게임] 2026년 게임시장 판을 흔들 출시작
13
[가전] 삼성 프리스타일+ 휴대용 프로젝터, CES 2026 첫 공개 예정
14
[컴퓨터] 삼성전자, ‘갤럭시 북6 시리즈’ 공개
15
[이벤트] 1월 베스트 빌런 댓글러를 찾습니다.
16
[컴퓨터] D램 메모리 제조사, 고객 ‘선별 공급’ 단계로 진입
17
[후방/은꼴] 스타워즈를 참 좋아합니다.
18
[컴퓨터] AMD 차세대 RDNA 5 라데온 GPU, 2027년 중반 출시 전망
19
[이벤트] 슈퍼플라워 2025 하반기 설문조사 이벤트 진행
20
[PC게임] 한국게임사 다큐 [세이브 더 게임] 예고편
인텔 코어 울트라7
전체 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
조텍
  • 종합
  • 뉴스/정보
  • 커뮤니티
  • 질문/토론
TOP1 [모바일] 삼성 갤럭시 S27 울트라, 적외선 대신 ‘편광광 인식’ 인증 시스템 도입 가능
TOP2 [자유게시판] 날씨가 점점 어두워지네요
TOP3 [모바일] 삼성 OneUI 8.5 전체 변경점 공개… AI·연결성·보안·워치 기능 전반 업그레이드
TOP4 [컴퓨터] TSMC·대만, 미국 반도체에 5천억 달러 투자
TOP5 [일상/생활] U23 경기 있군요.
TOP6 [컴퓨터] 조텍코리아, RTX 5070 Ti AMP Extreme Infinity 한정 수량 특가 판매
TOP7 [모바일] 아이폰 17 판매 급등… A19·A19 Pro 칩셋 주문량 두 달 만에 500만 개 증가
TOP8 [컴퓨터] 팬서 레이크 기반 코어 울트라 X7 358H 성능, 최대 92% 향상
TOP9 [모바일] 삼성, 첫 번째 투명 스마트폰 ‘갤럭시 글래스’로 아이폰을 제압?
TOP10 [일상/생활] 집에 실거미가 좀 보이네요
TOP1 [모바일] 삼성 갤럭시 S27 울트라, 적외선 대신 ‘편광광 인식’ 인증 시스템 도입 가능
TOP2 [모바일] 삼성 OneUI 8.5 전체 변경점 공개… AI·연결성·보안·워치 기능 전반 업그레이드
TOP3 [컴퓨터] TSMC·대만, 미국 반도체에 5천억 달러 투자
TOP4 [컴퓨터] 조텍코리아, RTX 5070 Ti AMP Extreme Infinity 한정 수량 특가 판매
TOP5 [모바일] 아이폰 17 판매 급등… A19·A19 Pro 칩셋 주문량 두 달 만에 500만 개 증가
TOP6 [컴퓨터] 팬서 레이크 기반 코어 울트라 X7 358H 성능, 최대 92% 향상
TOP7 [모바일] 삼성, 첫 번째 투명 스마트폰 ‘갤럭시 글래스’로 아이폰을 제압?
TOP8 [컴퓨터] 엔비디아 CEO 젠슨 황 “AI를 비난하지 말라”
TOP9 [컴퓨터] 인텔 Arc B770 GPU, 펌웨어 유출로 BMG-G31 존재 재확인
TOP10 [모바일] 애플, 중국 시장 달래기 카드 꺼냈다
TOP1 [자유게시판] 날씨가 점점 어두워지네요
TOP2 [일상/생활] U23 경기 있군요.
TOP3 [일상/생활] 집에 실거미가 좀 보이네요
TOP4 [취미/교양] 국산 인디 게임 숲속의 작은 마녀 스팀으로 발매!
TOP5 [자유게시판] 오늘도 출첵완료~
TOP6 [일상/생활] 겨울철 전기차 주행거리, 이렇게 하면 극대화할 수 있다
TOP7 [일상/생활] 빌런찾기 이벤트 당첨 5060ti 간단 후기
TOP8 [리뷰/사용기] 직접 구매한 내돈내산 조텍 ZOTEC RTX5080 AMP INFINITY 구매 후 장단점
TOP9 [유머] 인간 쾌락 순위 1위는?
TOP1 [주제토론] 원망스럽도다... 동양 귀신 VS 서양 귀신
TOP2 [조립/견적] 모니터암 어떤게 좋을까요?
TOP3 [설문조사] [빌런 설문조사] 가장 가지고 싶은 30만원 이하 27인치 QHD 게이밍 모니터는?
TOP4 [주제토론] 국립 공원이 잔반통을 없앤다고 합니다
TOP5 [일반/상식] 더운날 캠핑은 어디로 가시나요?
TOP6 [쇼핑/장소] 음감용 헤드셋, 이어폰 추천 좀 굽신굽신
TOP7 [조립/견적] 미니 PC 관련 질문드립니다!
브랜드로그
0 / 0
탁탁몰 AI챗봇
인사이 댓글 이벤트
빌런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.