쇼핑몰 로고만들기 귀찮을 때 텍스트로 대체하기 > 영카트5 팁자료실

영카트5 팁자료실

쇼핑몰 로고만들기 귀찮을 때 텍스트로 대체하기 정보

쇼핑몰 로고만들기 귀찮을 때 텍스트로 대체하기

본문

영카트 pc 버전 상단 로고를 빛나는 텍스트(glowing text)로 바꾸는 방법입니다.

로고 만들기위해서 포토샾이나 일러스트를 켜기도 귀찮을때 간편합니다. 텍스트는 크기나 내용을 마음대로 변경할 수있습니다.

shop.head.php에서 <div id="logo">에 있는 기존의 이미지를 주석처리하고 다음코드를 넣으면 됩니다.


<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$q = isset($_GET['q']) ? clean_xss_tags($_GET['q'], 1, 1) : '';
if(defined('G5_THEME_PATH')) {
    require_once(G5_THEME_SHOP_PATH.'/shop.head.php');
    return;
}
include_once(G5_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
add_javascript('<script src="'.G5_JS_URL.'/owlcarousel/owl.carousel.min.js"></script>', 10);
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/owlcarousel/owl.carousel.css">', 0);
?>
<!-- 상단 시작 { -->
<div id="hd">
    <h1 id="hd_h1"><?php echo $g5['title'] ?></h1>
    <div id="skip_to_container"><a href="#container">본문 바로가기</a></div>
    <?php if(defined('_INDEX_')) { // index에서만 실행
        include G5_BBS_PATH.'/newwin.inc.php'; // 팝업레이어
    } ?>
     
    <div id="tnb">
        <div class="inner">
            <?php if(defined('G5_COMMUNITY_USE') == false || G5_COMMUNITY_USE) { ?>
            <ul id="hd_define">
                <li><a href="<?php echo G5_URL ?>/">커뮤니티</a></li>
                <li class="active"><a href="<?php echo G5_SHOP_URL ?>/">쇼핑몰</a></li>
            </ul>
            <?php } ?>
            <ul id="hd_qnb">
                <li><a href="<?php echo G5_BBS_URL ?>/faq.php">FAQ</a></li>
                <li><a href="<?php echo G5_BBS_URL ?>/qalist.php">1:1문의</a></li>
                <li><a href="<?php echo G5_SHOP_URL ?>/personalpay.php">개인결제</a></li>
                <li><a href="<?php echo G5_SHOP_URL ?>/itemuselist.php">사용후기</a></li> 
                <li><a href="<?php echo G5_SHOP_URL ?>/itemqalist.php">상품문의</a></li>
            </ul>
        </div>
    </div>
  
    <div id="hd_wrapper">
<!-- logo 대체하는 glowing text -->
<style>
.glowkim {
  font-size: 25px;
  color: #fff;
  text-align: center;
  animation: glowkim 2s ease-in-out infinite alternate;
}
@-webkit-keyframes glowkim {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
</style>
<div id="logo">
<a href="<?php echo G5_SHOP_URL; ?>"> <h1 id="kims" class="glowkim" style="font-size: 30px; float: left; text-align:right; color: white;  padding-top: 5px;" title="The Kim's Company">KIMCHULYONG!! </h1></a>
<!--  기존 이미지를 주석처리함          <a href="<?php echo G5_SHOP_URL; ?>/"><img src="<?php echo G5_DATA_URL; ?>/common/logo_img" alt="<?php echo $config['cf_title']; ?>"></a>-->
</div>
<!-- logo 대체하는 glowing text -->
추천
6

댓글 12개

KIMCHULYONG!! 글 자가 모두 빤짝빤짝 이쁘네요. 로고 글자 중 특정 글자만 빤짝이게 할 수 있나요? 있다면 팁을 알고 싶습니다. 예를 들어 KIMCHULYONG!! 중 K, C, Y 만 반짝임
glow text의 원 소스는 https://www.w3schools.com/howto/howto_css_glowing_text.asp 입니다.
특정 문자만 빛나게 하려면 <span>태그로 특정문자에만 class를 주면 될것 같습니다.
http://egis.kr/zest.php



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  background-color: gray;
  font-family: cursive;
}

.glow {
  font-size: 80px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
 
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
</style>
</head>
<body>

  <h1 id="kimh1" style="font-size: 80px">GL<span class="glow">O</span>WING <span class="glow">T</span>EXT</h1>
 
   
</body>
</html>
전체 367
영카트5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT