IT정보 분류
마오카페 스타일시트
작성자 정보
- 최고관리자 작성
- 작성일
컨텐츠 정보
- 559 조회
- 목록
본문
나리야빌더용 공식 스타일시트
모바일 완전 최적화 + 인라인 스타일 + 글자수 제한 없음
패턴 A: 헤더 (표준화 완료)
✅ 완성형 - 어떤 회사명도 안전
<div style="background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); color: white; text-align: center; padding: 24px; margin-bottom: 20px; border-radius: 12px; box-shadow: 0 4px 8px rgba(33,150,243,0.3);"><h1 style="margin: 0; font-size: 24px; font-weight: bold; word-wrap: break-word; word-break: keep-all;">회사명</h1><p style="margin: 8px 0 0 0; font-size: 16px; opacity: 0.9; word-wrap: break-word; word-break: keep-all;">회사 한줄 소개</p><div style="background: rgba(255,255,255,0.1); border-radius: 20px; display: inline-block; padding: 6px 16px; margin-top: 12px; font-size: 14px; font-weight: 500;">핵심 강점</div></div>
명륜국제물류
중국 심천에서 한국까지 물류 One-Stop 서비스
10년 이상의 전문 물류 경험
패턴 B: 회사정보 (NEW - 세로 카드형)
???? NEW 추천 방식 - 글자수 제한 없음 + 모바일 완벽
기존 테이블 방식의 문제점:
• 가로 2칸에서 긴 텍스트 시 세로로 늘어남
• 회사별 글자수 차이로 레이아웃 깨짐
• 모바일에서 가독성 떨어짐
NEW 세로 카드형의 장점:
• 글자수 제한 완전 없음
• 모바일에서 절대 안 깨짐
• 깔끔하고 현대적인 디자인
• 나리야빌더 완벽 호환
• 가로 2칸에서 긴 텍스트 시 세로로 늘어남
• 회사별 글자수 차이로 레이아웃 깨짐
• 모바일에서 가독성 떨어짐
NEW 세로 카드형의 장점:
• 글자수 제한 완전 없음
• 모바일에서 절대 안 깨짐
• 깔끔하고 현대적인 디자인
• 나리야빌더 완벽 호환
<h2 style="color: #2196F3; font-size: 20px; margin: 25px 0 15px 0; padding-bottom: 8px; border-bottom: 2px solid #2196F3; position: relative;"><span style="background: #f8f9fa; padding: 0 15px; position: relative; z-index: 1;">회사 정보</span><div style="position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: linear-gradient(to right, #2196F3, rgba(33,150,243,0.3)); z-index: 0;"></div></h2><!-- 기본 정보 카드 --><div style="background: white; border-radius: 8px; padding: 18px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid #2196F3;"><h3 style="color: #1976D2; margin: 0 0 12px 0; font-size: 16px; font-weight: bold; display: flex; align-items: center;"><span style="margin-right: 8px; color: #2196F3; font-size: 18px;">●</span>기본 정보</h3><div style="font-size: 14px; line-height: 1.8; word-wrap: break-word; word-break: keep-all;"><div style="margin: 8px 0;"><strong>회사명:</strong> 深圳市明伦物流有限公司</div><div style="margin: 8px 0;"><strong>위치:</strong> 광동성 심천시 남산구 난유탠안공업구제1동805-806호</div><div style="margin: 8px 0;"><strong>규모:</strong> 200평 사무실 / 100만 RMB 등록자금</div><div style="margin: 8px 0;"><strong>경력:</strong> 10년 이상</div></div></div><!-- 연락처 정보 카드 --><div style="background: white; border-radius: 8px; padding: 18px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid #4CAF50;"><h3 style="color: #388E3C; margin: 0 0 12px 0; font-size: 16px; font-weight: bold; display: flex; align-items: center;"><span style="margin-right: 8px; color: #4CAF50; font-size: 18px;">●</span>연락처 정보</h3><div style="font-size: 14px; line-height: 1.8; word-wrap: break-word; word-break: keep-all;"><div style="margin: 8px 0;"><strong>담당자:</strong> 이명</div><div style="margin: 8px 0;"><strong>전화:</strong> <a href="tel:150-1853-6720" style="color: #4CAF50; text-decoration: none; font-weight: bold;">150-1853-6720</a></div><div style="margin: 8px 0;"><strong>위챗:</strong> 15018536720 / 134-3443-4074</div><div style="margin: 8px 0;"><strong>주소:</strong> 南海天安1栋805-806号</div></div></div>
회사 정보
●기본 정보
회사명: 深圳市明伦物流有限公司
위치: 광동성 심천시 남산구 난유탠안공업구제1동805-806호
규모: 200평 사무실 / 100만 RMB 등록자금
경력: 10년 이상
●연락처 정보
패턴 C: 서비스 (아코디언형 - 표준화 완료)
<h2 style="color: #4CAF50; font-size: 20px; margin: 25px 0 15px 0; padding-bottom: 8px; border-bottom: 2px solid #4CAF50; position: relative;"><span style="background: #f8f9fa; padding: 0 15px; position: relative; z-index: 1;">전문 서비스</span><div style="position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: linear-gradient(to right, #4CAF50, rgba(76,175,80,0.3)); z-index: 0;"></div></h2><!-- 서비스 1 --><div style="margin-bottom: 15px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"><div style="padding: 16px; background: linear-gradient(135deg, #2196F3, #1976D2); color: white; position: relative;"><h3 style="margin: 0; font-size: 18px; font-weight: bold;">서비스 제목</h3><span style="position: absolute; right: 16px; top: 16px; font-size: 20px; opacity: 0.8;">▼</span></div><div style="padding: 16px; background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);"><div style="font-size: 14px; line-height: 1.5;"><div style="margin: 6px 0; padding-left: 20px; position: relative; word-wrap: break-word; word-break: keep-all;"><span style="position: absolute; left: 0; top: 2px; color: #2196F3; font-weight: bold;">✓</span>서비스 항목 1</div><div style="margin: 6px 0; padding-left: 20px; position: relative; word-wrap: break-word; word-break: keep-all;"><span style="position: absolute; left: 0; top: 2px; color: #2196F3; font-weight: bold;">✓</span>서비스 항목 2</div></div></div></div>
패턴 D: 특징 카드 (모바일 최적화)
<h2 style="color: #F44336; font-size: 20px; margin: 25px 0 15px 0; padding-bottom: 8px; border-bottom: 2px solid #F44336; position: relative;"><span style="background: #f8f9fa; padding: 0 15px; position: relative; z-index: 1;">특별한 장점</span><div style="position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: linear-gradient(to right, #F44336, rgba(244,67,54,0.3)); z-index: 0;"></div></h2><style>@media (max-width: 768px) {.feature-card { width: 100% !important; margin-bottom: 15px !important; }.feature-container { flex-direction: column !important; }}</style><div class="feature-container" style="display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;"><div class="feature-card" style="flex: 1 1 calc(50% - 12px); min-width: 280px; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"><div style="height: 60px; background: linear-gradient(135deg, #2196F3, #1976D2); display: flex; align-items: center; justify-content: center;"><span style="font-size: 24px; color: white;">????</span></div><div style="padding: 14px;"><h4 style="margin: 0 0 8px 0; font-size: 15px; font-weight: bold; color: #1976D2;">장점 제목</h4><p style="margin: 0; font-size: 13px; line-height: 1.4; color: #333; word-wrap: break-word; word-break: keep-all;">장점에 대한 설명을 여기에 작성합니다.</p></div></div></div>
패턴 E: 통계 박스 (3단 → 모바일 1단)
<style>@media (max-width: 768px) {.stat-box { width: 100% !important; margin-bottom: 15px !important; }.stat-container { flex-direction: column !important; }}</style><div class="stat-container" style="display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;"><div class="stat-box" style="flex: 1 1 calc(33.33% - 12px); min-width: 200px; background: linear-gradient(135deg, #FF5722, #D84315); color: white; text-align: center; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(255,87,34,0.3);"><div style="font-size: 28px; font-weight: bold; margin-bottom: 8px;">10년+</div><div style="font-size: 14px; opacity: 0.9;">경험</div></div><div class="stat-box" style="flex: 1 1 calc(33.33% - 12px); min-width: 200px; background: linear-gradient(135deg, #9C27B0, #7B1FA2); color: white; text-align: center; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(156,39,176,0.3);"><div style="font-size: 28px; font-weight: bold; margin-bottom: 8px;">3일</div><div style="font-size: 14px; opacity: 0.9;">배송</div></div><div class="stat-box" style="flex: 1 1 calc(33.33% - 12px); min-width: 200px; background: linear-gradient(135deg, #009688, #00695C); color: white; text-align: center; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,150,136,0.3);"><div style="font-size: 28px; font-weight: bold; margin-bottom: 8px;">30명</div><div style="font-size: 14px; opacity: 0.9;">인력</div></div></div>
패턴 F: CTA (Call-to-Action - 표준화 완료)
<div style="background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); color: white; text-align: center; padding: 30px 20px; border-radius: 12px; box-shadow: 0 6px 20px rgba(33,150,243,0.3); margin-bottom: 20px;"><h2 style="margin: 0 0 12px 0; font-size: 22px; font-weight: bold;">지금 바로 문의하세요!</h2><p style="margin: 0 0 20px 0; font-size: 15px; opacity: 0.9;">전문 상담원이 빠르게 답변해 드립니다</p><a href="tel:150-1853-6720" style="display: inline-block; background-color: white; color: #2196F3; padding: 12px 20px; border-radius: 25px; text-decoration: none; font-weight: bold; font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.2);">전화: 150-1853-6720</a><p style="margin: 15px 0 0 0; font-size: 13px; opacity: 0.8;">* 추가 안내사항</p></div>
패턴 G: 푸터 (표준화 완료)
<div style="background: linear-gradient(135deg, #37474F, #263238); color: #B0BEC5; text-align: center; padding: 20px; border-radius: 8px;"><p style="margin: 0 0 6px 0; font-size: 14px; font-weight: 500;">© 2025 회사명 All rights reserved</p><p style="margin: 0; font-size: 12px; opacity: 0.8; word-wrap: break-word; word-break: keep-all;">회사 주소</p></div>
???? 완성된 비즈니스 광고 템플릿
사용법:
1. 아래 완성된 템플릿을 복사
2. 회사명, 서비스, 연락처만 교체
3. 나리야빌더에 바로 붙여넣기
4. 글자수 제한 걱정 없음!
1. 아래 완성된 템플릿을 복사
2. 회사명, 서비스, 연락처만 교체
3. 나리야빌더에 바로 붙여넣기
4. 글자수 제한 걱정 없음!
<html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>회사명 - 한줄소개</title><style>@media (max-width: 768px) {.feature-card, .stat-box { width: 100% !important; margin-bottom: 15px !important; }.feature-container, .stat-container { flex-direction: column !important; }}</style></head><body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 720px; margin: 0 auto; padding: 10px; background-color: #f8f9fa;"><!-- 패턴 A: 헤더 --><div style="background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); color: white; text-align: center; padding: 24px; margin-bottom: 20px; border-radius: 12px; box-shadow: 0 4px 8px rgba(33,150,243,0.3);"><h1 style="margin: 0; font-size: 24px; font-weight: bold; word-wrap: break-word; word-break: keep-all;">회사명</h1><p style="margin: 8px 0 0 0; font-size: 16px; opacity: 0.9; word-wrap: break-word; word-break: keep-all;">회사 한줄 소개</p><div style="background: rgba(255,255,255,0.1); border-radius: 20px; display: inline-block; padding: 6px 16px; margin-top: 12px; font-size: 14px; font-weight: 500;">핵심 강점</div></div><!-- 패턴 B: 회사정보 (NEW 세로 카드형) --><h2 style="color: #2196F3; font-size: 20px; margin: 25px 0 15px 0; padding-bottom: 8px; border-bottom: 2px solid #2196F3; position: relative;"><span style="background: #f8f9fa; padding: 0 15px; position: relative; z-index: 1;">회사 정보</span><div style="position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: linear-gradient(to right, #2196F3, rgba(33,150,243,0.3)); z-index: 0;"></div></h2><div style="background: white; border-radius: 8px; padding: 18px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid #2196F3;"><h3 style="color: #1976D2; margin: 0 0 12px 0; font-size: 16px; font-weight: bold; display: flex; align-items: center;"><span style="margin-right: 8px; color: #2196F3; font-size: 18px;">●</span>기본 정보</h3><div style="font-size: 14px; line-height: 1.8; word-wrap: break-word; word-break: keep-all;"><div style="margin: 8px 0;"><strong>회사명:</strong> 회사명을 입력하세요</div><div style="margin: 8px 0;"><strong>위치:</strong> 회사 위치를 입력하세요</div><div style="margin: 8px 0;"><strong>규모:</strong> 회사 규모를 입력하세요</div><div style="margin: 8px 0;"><strong>경력:</strong> 경력을 입력하세요</div></div></div><div style="background: white; border-radius: 8px; padding: 18px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid #4CAF50;"><h3 style="color: #388E3C; margin: 0 0 12px 0; font-size: 16px; font-weight: bold; display: flex; align-items: center;"><span style="margin-right: 8px; color: #4CAF50; font-size: 18px;">●</span>연락처 정보</h3><div style="font-size: 14px; line-height: 1.8; word-wrap: break-word; word-break: keep-all;"><div style="margin: 8px 0;"><strong>담당자:</strong> 담당자명</div><div style="margin: 8px 0;"><strong>전화:</strong> <a href="tel:전화번호" style="color: #4CAF50; text-decoration: none; font-weight: bold;">전화번호</a></div><div style="margin: 8px 0;"><strong>이메일:</strong> 이메일주소</div><div style="margin: 8px 0;"><strong>주소:</strong> 상세주소</div></div></div><!-- 패턴 F: CTA --><div style="background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); color: white; text-align: center; padding: 30px 20px; border-radius: 12px; box-shadow: 0 6px 20px rgba(33,150,243,0.3); margin-bottom: 20px;"><h2 style="margin: 0 0 12px 0; font-size: 22px; font-weight: bold;">지금 바로 문의하세요!</h2><p style="margin: 0 0 20px 0; font-size: 15px; opacity: 0.9;">전문 상담원이 빠르게 답변해 드립니다</p><a href="tel:전화번호" style="display: inline-block; background-color: white; color: #2196F3; padding: 12px 20px; border-radius: 25px; text-decoration: none; font-weight: bold; font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.2);">전화: 전화번호</a><p style="margin: 15px 0 0 0; font-size: 13px; opacity: 0.8;">* 추가 안내사항</p></div><!-- 패턴 G: 푸터 --><div style="background: linear-gradient(135deg, #37474F, #263238); color: #B0BEC5; text-align: center; padding: 20px; border-radius: 8px;"><p style="margin: 0 0 6px 0; font-size: 14px; font-weight: 500;">© 2025 회사명 All rights reserved</p><p style="margin: 0; font-size: 12px; opacity: 0.8; word-wrap: break-word; word-break: keep-all;">회사 주소</p></div></body></html>
관련자료
댓글 0
등록된 댓글이 없습니다.