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 / 2 페이지
RSS
  • ㄴㅇㄹㅇㄴㄹ
    등록자 최고관리자
    등록일 06.16 조회 459

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

  • 3가지테스트- html 선택
    등록자 최고관리자
    등록일 06.14 조회 475

    IT정보 [1] 일반 텍스트 입력 이건 그냥 일반 텍스트입니다. 줄바꿈은 엔터만 사용했고, 마크다운이나 HTML 태그는 없습니다. --- [2] 마크다운…

  • 3가지테스트_html 미선택
    등록자 최고관리자
    등록일 06.14 조회 403

    IT정보 [1] 일반 텍스트 입력 이건 그냥 일반 텍스트입니다. 줄바꿈은 엔터만 사용했고, 마크다운이나 HTML 태그는 없습니다. --- [2] 마크다운…

  • ✨ 이모티콘 렌더링 테스트 ✨
    등록자 최고관리자
    등록일 06.10 조회 591

    IT정보 ⭐✨☀️✨ ☺️☹️✌️☝️✊☀️⛵⛴️✈️⚙️⚒️️⛏️️️❤️⌨️️⚙️✂️️️️️️️️️️✉️✒️⛅⛈️☔⚡☘️✨☄️️⚡☁️ ☕☎️

  • 광고 HTML 기본 구조 (참조용 - 실제 생성은 위 규칙에 따라 수행):
    등록자 최고관리자
    등록일 06.10 조회 557

    IT정보 {{JSON_DATA.광고_제목}} {{JSON_DATA.메인_서비스_명}} {{JSON_DATA.강조_문구}} {{JSON_DATA.슬로건}}…

  • ㅇㅇㅇ中韩跨平台趋势报告 (2024.05)
    등록자 최고관리자
    등록일 06.10 조회 408

    기타 中韩跨平台趋势报告 中韩跨平台趋势报告 (2024.05) 数据来源:百度指数·微博热搜·抖音热榜 · 更新周期:weekly ???? 百度指数: 韩国科技类…

  • 마오카페 스타일시트
    등록자 최고관리자
    등록일 06.08 조회 556

    IT정보 나리야빌더용 공식 스타일시트 - 완전 모바일 최적화 나리야빌더용 공식 스타일시트 모바일 완전 최적화 + 인라인 스타일 + 글자수 제한 없음 패턴…

  • 딥시크R1모델_HTML_中 젊은이들 '한국風'에 빠진 이유 HOT 3
    등록자 최고관리자
    등록일 06.08 조회 545

    IT정보 中 젊은이들 '한국風'에 빠진 이유 HOT 3 6월 1~7일 中 SNS 집계 데이터 기준 2100만+ 중국인 한류 콘텐츠 시청 37.8%↑ 한국…

  • 중국을 사로잡은 K-웨이브 2025
    등록자 최고관리자
    등록일 06.08 조회 414

    AI뉴스 2025년 6월 중국 한류 트렌드: K-뷰티와 K-푸드가 이끄는 새로운 열풍 ???????? 중국을 사로잡은 K-웨이브 2025 6월 첫째 주,…

  • 광저우 도매시장 가이드: 한국인이 많이 찾는 8곳 소개
    등록자 최고관리자
    등록일 05.25 조회 716

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

  • 中韩跨平台趋势报告 (2024.05)_tinymce test
    등록자 최고관리자
    등록일 05.23 조회 1381

    IT정보 中韩跨平台趋势报告 (2024.05) 数据来源:百度指数·微博热搜·抖音热榜 · 更新周期:weekly ???? …

  • 中韩跨平台趋势报告 (2024.05)_html 버전용
    등록자 최고관리자
    등록일 05.22 조회 968

    IT정보 中韩跨平台趋势报告 (2024.05) - 테스트 페이지 中韩跨平台趋势报告 (2024.05) 数据来源:百度指数·微博热搜·抖音热榜 · 更新周期:wee…

  • 중국 트렌드 핫이슈 BEST 3 5월 3째주
    등록자 최고관리자
    등록일 05.22 조회 1091

    IT정보 오늘의 중국 트렌드 핫이슈 BEST 3 [이슈1] 샤오홍슈 패션 키워드 급상승! 중국 Z세대, 샤오홍슈(小红书, RED)에서 ‘하이틴룩’, ‘여…

  • 중국 심천에서 한국까지 물류 One-Stop 서비스: 명륜국제물류
    등록자 최고관리자
    등록일 05.22 조회 1518

    IT정보 중국 심천에서 한국까지 물류 One-Stop 서비스: 명륜국제물류 명륜국제물류 소개 심천시 남산구에 위치한 명륜국제물류는 10년 이상의 노하우를…

  • 반응형_중국 심천에서 한국까지 물류 One-Stop 서비스: 명륜국제물류
    등록자 최고관리자
    등록일 05.22 조회 947

    IT정보 중국 심천에서 한국까지 물류 One-Stop 서비스: 명륜국제물류 명륜국제물류는 10년 이상의 노하우로 한국-중국 간 물류 서비스를 제공하는 전…