IT정보 분류

마오카페 스타일시트

작성자 정보

  • 최고관리자 작성
  • 작성일

컨텐츠 정보

본문

나리야빌더용 공식 스타일시트 - 완전 모바일 최적화

나리야빌더용 공식 스타일시트

모바일 완전 최적화 + 인라인 스타일 + 글자수 제한 없음

패턴 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 세로 카드형의 장점:
• 글자수 제한 완전 없음
• 모바일에서 절대 안 깨짐
• 깔끔하고 현대적인 디자인
• 나리야빌더 완벽 호환
<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년 이상

연락처 정보

담당자: 이명
위챗: 15018536720 / 134-3443-4074
주소: 南海天安1栋805-806号

패턴 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. 글자수 제한 걱정 없음!
<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
등록된 댓글이 없습니다.
전체 55 / 1 페이지
RSS
  • 완벽한 단일 박스 템플릿
    등록자 최고관리자
    등록일 06.27 조회 335

    IT정보 ???? 완벽한 단일 박스 템플릿 이 템플릿은 모바일 반응형 문제를 완전히 해결한 단일 박스 구조입니다. 박스가 2개, 3개로 나뉘면서 발생하는…

  • sfd
    등록자 최고관리자
    등록일 06.26 조회 276

    IT정보 # 이번 포스팅에서는 이우 상업 도시에서 초보자들이 이 시장에서 효율적으로 소싱할 수 있는 팁과 전략에 대해 알아보겠습니다. 이우는 가장 인기 …

  • D
    등록자 최고관리자
    등록일 06.26 조회 215

    코인정보 # 이번 포스팅에서는 이우 상업 도시에서 초보자들이 이 시장에서 효율적으로 소싱할 수 있는 팁과 전략에 대해 알아보겠습니다.이우는 가장 인기 있…

  • 등록자 최고관리자
    등록일 06.26 조회 181

    코인정보 타오바오구매대행 완벽 가이드 - 2025년 최신 정보 1. 개요 및 핵심 정보 타오바오구매대행이란 무엇인가? - 타오바오 글로벌 배송 서비스는 …

  • ㅇㅎ
    등록자 최고관리자
    등록일 06.26 조회 362

    IT정보 광저우 도매시장 가이드: 한국인이 많이 찾는 8곳광저우는 의류, 전자제품, 액세서리, 신발 등 다양한 상품을 대량 구매할 수 있는 아시아 최대 …

  • 등록자 최고관리자
    등록일 06.26 조회 273

    IT정보 안녕하세요. 까페 의류매니저입니다.이번 포스팅에서는 이우 상업 도시에서 초보자들이 이 시장에서 효율적으로 소싱할 수 있는 팁과 전략에 대해 알아…

  • 이우시장 구역별 효율적 소싱 팁과 위치
    등록자 최고관리자
    등록일 06.26 조회 268

    IT정보 안녕하세요. 까페 의류매니저입니다.이번 포스팅에서는 이우 상업 도시에서 초보자들이 이 시장에서 효율적으로 소싱할 수 있는 팁과 전략에 대해 알아…

  • gpt4o_html_나리야빌더 HTML 공식 기술 지침…
    등록자 최고관리자
    등록일 06.17 조회 367

    IT정보 나리야빌더 HTML 공식 기술 지침서 (BS4-Basic 테마 최적화) 버전: 2.0최종 업데이트일: 2025-06-17 ???? 환경 정보 플…

  • 타오바오구매대행 완벽 가이드 - 2025년 최신 정보
    등록자 최고관리자
    등록일 06.16 조회 605

    IT정보 타오바오구매대행 완벽 가이드 - 2025년 최신 정보 1. 개요 및 핵심 정보 타오바오구매대행이란 무엇인가? - 타오바오 글로벌 배송 서비스는 …

  • ㄴㅇㄹㄴㅇㄹ
    등록자 최고관리자
    등록일 06.16 조회 256

    AI뉴스 ???? 모바일 반응형 + 듀얼박스 테스트 박스 1 테스트 이 박스가 모바일에서도 제대로 표시되고, 옆 박스와 찌그러짐 없이 나란히 배치되는지 …

  • ㅇㅇㅇ
    등록자 최고관리자
    등록일 06.16 조회 252

    코인정보 ???? 모바일 반응형 + 듀얼박스 테스트 박스 1 테스트 이 박스가 모바일에서도 제대로 표시되고, 옆 박스와 찌그러짐 없이 나란히 배치되는지 …

  • ㄴㄹㅇㄴㅇㄹㅇㄴ
    등록자 최고관리자
    등록일 06.16 조회 506

    IT정보 나리야 스타일 확인용 콘텐츠 2025년 패션 물류 리포트 주요 트렌드 요약 이번 주에는 린넨 소재와 백팩의 수요가 크게 증가하였습니다. 특히 2…

  • ㅗㅗㅓㄹ홇
    등록자 최고관리자
    등록일 06.16 조회 347

    IT정보 나리야 스타일 확인용 콘텐츠 2025년 패션 물류 리포트 주요 트렌드 요약 이번 주에는 린넨 소재와 백팩의 수요가 크게 증가하였습니다. 특히 2…

  • ㅇㅇㅇㅀㅇㄹ
    등록자 최고관리자
    등록일 06.16 조회 427

    IT정보 나리야 스타일 확인용 콘텐츠 2025년 패션 물류 리포트 주요 트렌드 요약 이번 주에는 린넨 소재와 백팩의 수요가 크게 증가하였습니다. 특히 2…

  • ㅇㅇㅇㅇㅇㅇㅇㅇ
    등록자 최고관리자
    등록일 06.16 조회 595

    IT정보 ```html# 타오바오구매대행 완벽 가이드 - 2025년 최신 정보## 1. 개요 및 핵심 정보### 타오바오구매대행이란 무엇인가?타오바오 글…