그누보드 - 쇼핑몰 로고만들기 귀찮을 때 텍스트로 대체하기

쇼핑몰 로고만들기 귀찮을 때 텍스트로 대체하기 > 영카트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 -->

댓글 12개

gagot 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

23.01.26 19:45:24

KIMCHULYONG!! 글 자가 모두 빤짝빤짝 이쁘네요. 로고 글자 중 특정 글자만 빤짝이게 할 수 있나요? 있다면 팁을 알고 싶습니다. 예를 들어 KIMCHULYONG!! 중 K, C, Y 만 반짝임

김철용 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

23.01.27 01:10:53

@gagot 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>

[http://sir.kr/data/editor/2301/9b1324044c79cdc14a0e8f58c7d18b13_1674750075_2783.png]

<!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>