최근글

• TECH TIP - css 그누보드 관리자와 홈페이지가 충돌할때
• 2025.10.14

if (defined('G5_IS_ADMIN')) {

    if(!defined('_THEME_PREVIEW_'))

        echo '<link rel="stylesheet" href="'.run_replace('head_css_url', G5_ADMIN_URL.'/css/admin.css?ver='.G5_CSS_VER, G5_URL).'">'.PHP_EOL;

} else {

    echo '<link rel="stylesheet" href="'.run_replace('head_css_url', G5_THEME_URL.'/asset/css/'.(G5_IS_MOBILE?'mobile':'default').'.css?ver='.time()).'">'.PHP_EOL;

}




if defined admin 전용으로 

admin.css넣어주면 css가 admin.css전용으로 따로 분리되어 출력됩니다.

• TECH TIP - 숫자 카운팅 애니매이션 구현
• 2025.10.14

예제




<span>

  TODAY : <span id="today-count" data-count="<?php echo $visit[1] ?>">0</span> /

  TOTAL : <h4><span id="total-count" data-count="<?php echo $visit[4] ?>">0</span></h4>

</span>




스크립트




<script>

  function animateCounter(id, target) {

    const el = document.getElementById(id);

    let count = 0;

    const speed = Math.ceil(target / 100); // 조절 가능




    const interval = setInterval(() => {

      count += speed;

      if (count >= target) {

        count = target;

        clearInterval(interval);

      }

      el.textContent = count;

    }, 20); // 속도 조절 가능

  }




  window.onload = () => {

    const todayTarget = parseInt(document.getElementById('today-count').dataset.count);

    const totalTarget = parseInt(document.getElementById('total-count').dataset.count);




    animateCounter('today-count', todayTarget);

    animateCounter('total-count', totalTarget);

  };

</script>




스크립트 넣은후 적용하고싶은곳에 data-count="숫자" 

넣으면 동작 

• TECH TIP - 해쉬태그 코드
• 2025.10.14




<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">




<style>

.view-tag {

display: inline-block;

background-color: #eee;

border-radius: 5px;

padding: 5px 10px;

margin-right: 5px;

font-size: 14px;

color: #333;

}

.tag-container {

display: flex;

flex-wrap: wrap;

gap: 5px;

padding: 5px;

border: 1px solid #ccc;

border-radius: 3px;

background: #fff;

}




.tag {

background-color: #eee;

border-radius: 15px;

padding: 5px 10px;

font-size: 14px;

color: #333;

display: inline-block;

}




.tag-input {

border: none;

outline: none;

flex: 1;

min-width: 120px;

height:30px;

}

</style>




<div class="write_div">

    <div class="tag-container" id="tagContainer">

        <input type="text" id="tagInput" class="tag-input" value="<?php echo $write['wr_1'] ?>" placeholder="#해시태그 입력">

    </div>

    <input type="hidden" name="wr_1" id="wr_1" value="<?php echo $write['wr_1'] ?>">

</div>




<script>

$(function() {

    const availableTags = ["#여행", "#맛집", "#일상", "#운동", "#코딩", "#사진", "#산책", "#강아지"];




    function createTag(text) {

        const tag = $('<span class="tag"></span>').text(text);

        tag.on('click', function() {

            $(this).remove();

            updateHiddenInput();

        });

        return tag;

    }




    function updateHiddenInput() {

        const tags = [];

        $("#tagContainer .tag").each(function() {

            tags.push($(this).text());

        });

        $("#wr_1").val(tags.join(' '));

    }




    function loadInitialTags() {

        const initial = $("#wr_1").val();

        if (initial) {

            const tagList = initial.split(' ');

            tagList.forEach(tag => {

                if (tag.startsWith("#")) {

                    $("#tagContainer").append(createTag(tag)); // append로 순서 유지

                }

            });

        }

    }




    $("#tagInput").autocomplete({

        source: availableTags,

        minLength: 1,

        select: function(event, ui) {

            const tagText = ui.item.value;

            $("#tagContainer").append(createTag(tagText));

            $(this).val('');

            updateHiddenInput();

            return false;

        }

    });




    $("#tagInput").on("keydown", function(e) {

        const val = $(this).val().trim();




        if ((e.key === " " || e.key === "Enter") && val.startsWith("#") && val.length > 1) {

            e.preventDefault();

            $("#tagContainer").append(createTag(val));

            $(this).val('');

            updateHiddenInput();

        }




        if (e.key === "Backspace" && val === "") {

            const lastTag = $("#tagContainer .tag").last();

            if (lastTag.length) {

                lastTag.remove();

                updateHiddenInput();

            }

        }

    });




    loadInitialTags();

});

</script>










• TECH TIP - 시간대별로 낮/밤 구분하여 html로 표현하기
• 2025.10.09

<?php

    date_default_timezone_set('Asia/Seoul'); // 서울 기준 시간 설정

    $hour = date('G'); // 현재 시간 (0~23)




if ($hour >= 6 && $hour < 18) {

 // 낮 시간대

   $windowClass = "day-window";

   $showMoon = false;

   $showSun = true;

} else {

       // 밤 시간대

   $windowClass = "night-window";

   $showMoon = true;

   $showSun = false;

  }

?>




<div class="clock-widget">

<div id="date"></div>

<div id="clock"></div>

</div>

<div class="left-top">

<?php if ($showMoon): ?>

<div class="moon">

</div>

<?php endif; ?>

<?php if ($showSun): ?>

<div class="sun"></div>

<?php endif; ?>

<div class="window <?php echo $windowClass; ?>">

<div class="pane top-left"></div>

<div class="pane top-right"></div>

<div class="pane bottom-left"></div>

<div class="pane bottom-right"></div>

</div>

</div>










 




시간대별로 낮과 밤을 구분하여

태양과 달을 구현할 수 있습니다.


 




• 스터디 - HTML 폼 입력

HTML에서 사용할 수 있는 대표적인 input 요소의 타입은 다음과 같습니다.

1. 텍스트 입력(text)
2. 비밀번호 입력(password)
3. 라디오 버튼(radio)
4. 체크박스(checkbox)
5. 파일 선택(file)
6. 선택 입력(select)
7. 문장 입력(textarea)
8. 버튼 입력(button)
9. 전송 버튼(submit)
10. 필드셋(fieldset)

예제

텍스트 입력
<input type="text" name="search">

비밀번호 입력
<input type="password" name="password">

라디오 버튼
<input type="radio" name="lecture" value="html" checked> HTML <br>

체크박스
<input type="checkbox" name="lecture" value="html" checked> HTML <br>

파일선택
<input type="file" name="upload_file" accept="image/*">

선택입력
<select name="fruit">
<option value="apple"> 사과
<option value="orange" selected> 귤
<option value="strawberry"> 딸기
<option value="peach"> 복숭아
</select>

문장입력
<textarea name="message" rows="5" cols="30">
여기에 적으세요.

버튼
<button>
버튼을 눌러주세요.
</button>

전송버튼
<input type="submit" value="전송">

필드셋
<form action="/examples/request.php">
<fieldset>
<legend>입력 양식</legend>
</fieldset>
</form>

• 스터디 - HTML form 태그

웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있습니다.
또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용합니다.

action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시합니다.
이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다.
method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시합니다.
따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됩니다.

method 속성
method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠집니다.
GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식입니다.
데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적입니다.
따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용합니다.
POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식입니다.
데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없습니다.
따라서 보안성 및 활용성이 GET 방식보다 좋습니다.

form 요소는 다음과 같은 문법으로 사용합니다.

예제

<form action="처리할페이지주소" method="get|post"></form>

• 스터디 - HTML 레이아웃

레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다.
웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다.
HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있습니다.
CSS 강의편에서 응용하여 구성할 수 있습니다.

div 요소를 이용한 레이아웃의 의미는 다음과 같습니다.

<header> HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav> HTML 문서의 탐색 링크를 정의함.
<section> HTML 문서에서 섹션(section) 부분을 정의함.
<article> HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
<aside> HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
<footer> HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.



예제

div 요소를 이용한 레이아웃

<div id="header"><h2>Header 영역</h2></div>
<div id="nav"><h2>Nav 영역</h2></div>
<div id="section"><p>Section 영역</p></div>
<div id="footer"><h2>Footer 영역</h2></div>

• 스터디 - HTML 테이블 작성법

테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다.
HTML에서는 <table>태그를 사용하여 이러한 테이블을 작성할 수 있습니다.

<table>태그는 다음과 같은 태그들로 구성됩니다.

1. <tr>태그는 테이블에서 열을 구분해 줍니다.
2. <th>태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.
3. <td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다.

CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다.
border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다.

예제

기본 테이블

<table style="width:100%">
<tr style="background-color:lightgrey">
<th>참치</th>
<th>고래</th>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
</tr>
<tr>
<td>오징어</td>
<td>고등어</td>
</tr>
</table>

테이블의 행 합치기

<table style="width:100%">
<tr>
<td rowspan="2">상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
<tr>
<td>고등어</td>
<td>돌고래</td>
</tr>
</table>

테이블의 열 합치기

<table style="width:100%">
<tr>
<td>참치</td>
<td colspan="2">고래</td>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
</table>

• 스터디 - HTML 단락

단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 부릅니다.
HTML에서는 <p>태그를 이용하여 이러한 단락을 표현합니다.

예제

띄어쓰기와 줄 나누기

HTML 코드에서 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 전혀 영향을 주지 못합니다.
웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문입니다.



잘못된예
<p>
줄을 나누고 싶어서
이렇게 줄을 나눠봤습니다.
과연 그대로 출력이 될까요?
</p>


올바른예
<p>
줄을 나누고 싶어서
이렇게 줄을 나눠봤습니다.
과연 그대로 출력이 될까요?
</p>

텍스트(text) 서식 미리 정의하기

HTML 코드에서 작성한 텍스트 서식을 그대로 표현하려면 <pre>태그를 사용해야 합니다.
<pre>태그(preformatted text) 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현됩니다.

<pre>
줄을 나누고 싶어서
이렇게 줄을 나눠봤습니다.
과연 그대로 출력이 될까요?
</pre>

<pre> 태그의 의 경우 그대로 출력이 됩니다.

수평선 긋기

단락을 나눌 때나 내용상의 구분을 표현하고자 할 때 수평 가로 구분선을 사용합니다.
이렇게 사용되는 수평 가로 구분선을 HTML 코드에서는 <hr>태그(horizontal rule)로 간단하게 만들 수 있습니다.

<p>저는 하나의 단락입니다.</p>
<hr>
<p>저는 하나의 단락입니다.</p>
<hr>
<p>저는 하나의 단락입니다.</p>

• 스터디 - HTML 인용구

HTML에서 인용구를 표현하는 방법은 다음과 같이 두 가지로 나뉩니다.

1. 짧은 인용구
2. 블록 인용구

예제

짧은 인용구

<p>HTML의 정의는
<q>웹 페이지를 만들기 위한 하이퍼텍스트 마크업 언어</q>
입니다.</p>
<p>HTML의 정의</p>

블록 인용구

<blockquote>
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다.
</blockquote>

축약형
<p><strong><abbr title="HyperText Markup Language 5">HTML5</abbr></strong>
란 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어인 HTML의 최신규격입니다.</p>

주소표현

<address>
서울특별시<br>
강남구 테헤란로
</address>

• 스터디 - HTML 링크

오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재합니다.
이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 <a>태그로 표현합니다.

<a>태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시합니다.
<a>태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다.

예제

<a href="https://www.mrhmh.com/">

<h2>이 링크를 클릭해 보세요!</h2>

</a>

• 스터디 - HTML 이미지

이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미합니다.
오늘날 웹 페이지에는 이러한 이미지가 매우 중요한 요소의 하나로 자리 잡고 있습니다.
웹 페이지에서 주로 사용되는 이미지의 종류는 다음과 같습니다.

HTML 문서에 이미지를 삽입할 때는 <img>태그를 사용합니다.
<img>태그는 종료 태그가 없는 빈 태그(empty tag)이며, 다음과 같은 문법으로 사용됩니다.

alt속성은 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다.
title은 마우스를 이미지에 올렸을때 나타나는 설명글입니다.

예제

<img src="이미지주소" alt="대체문자열">
<img src="/test.jpg" title="대체문자열">

• 스터디 - HTML 색의 표현

HTML 색(Color) 표현
HTML에서 색을 표현하는 방법은 다음과 같이 세 가지 방법이 있습니다.

1. 색상 이름으로 표현
2. RGB 색상값으로 표현
3. 16진수 색상값으로 표현

예제

색상이름
<h1 style="color:blue">색상 이름으로 표현된 파란색</h1>
RGB
<h1 style="color:rgb(255,0,0)">색상 이름으로 표현된 청록색</h1>
16진수
<h1 style="color:#454545">색상 이름으로 표현된 은색</h1>

• 스터디 - HTML TEXT 쓰기

HTML은 텍스트를 표현할 수 있는 다양한 태그를 제공 합니다.
가장 큰 <h1>태그부터 가장 작은 <h6>태그까지 다양한 크기로 제목을 표현할 수 있습니다.

예제

<h1>제목1의 크기입니다!</h1>
<h2>제목2의 크기입니다!</h2>
<h3>제목3의 크기입니다!</h3>
<h4>제목4의 크기입니다!</h4>
<h5>제목5의 크기입니다!</h5>
<h6>제목6의 크기입니다!</h6>

• 알짜정보 - 브라우저 캐시삭제방법
• 2025.10.01

Chrome (크롬)에서 캐시 삭제하기 

컴퓨터에서 Chrome 브라우저를 엽니다.

오른쪽 상단에 있는 점 세 개 아이콘(더보기)을 클릭합니다.

'인터넷 사용 기록 삭제'를 클릭합니다.

'시간 범위'를 '전체 기간'으로 선택합니다.

'캐시된 이미지 또는 파일' 항목을 선택합니다.

'데이터 삭제' 버튼을 클릭하면 캐시가 삭제됩니다.

엣지(Edge)에서 캐시 삭제하기

Edge 브라우저 창 오른쪽 상단에서 '설정 및 기타(...)' 아이콘을 클릭합니다. 

'설정' > '개인 정보, 검색 및 서비스'를 선택합니다. 

'인터넷 사용 기록 삭제'에서 '삭제할 항목 선택'을 클릭합니다. 

'캐시된 이미지 및 파일'을 선택하고 삭제를 진행합니다. 

• TECH TIP - 햄버거 메뉴
• 2025.09.30

<script>

$(document).ready(function() {

$('.hamburder-menu-button').click(function() {

$('.hamburger-menu').slideToggle('400');

$(this).toggleClass('active');

  });

});

</script>
 

자바스크립트 햄버거 메뉴

햄버거 메뉴 스타일




<style>

.hamburger-menu { display:none; position: absolute; top:78px; left:0px; width:100%; z-index:10000; }

.hamburger-menu .menu-list { width:100%; min-height:325px; height:auto; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd;  box-shadow:0 10px 20px rgba(0,0,0,.1);  padding-bottom:0px; z-index:1000; padding-top:20px; }

.hamburger-menu .menu-list li { width:100%; line-height:40px; padding-left:30px; color:#eee; font-size:14px; }

.hamburger-menu .menu-list li i { margin-right:10px; }

.hamburger-menu .menu-list li a { color:#111; }

</style>




HTML 구조

<div class="hamburger-menu">

    <div class="menu-list">

 <ul class="site-menu">

<li><a href="<?php echo G5_URL ?>"><i class="fa-solid fa-house"></i> HOME</a></li>

   </ul>

     </div>

</div>

• TECH TIP - HTML 사이트맵 자동생성 추천사이트
• 2025.09.30

https://www.xml-sitemaps.com/

• TECH TIP - 로딩 스피너 css
• 2025.09.30




/* 로딩 스피너 */

.spinner {

    margin: 20px auto;

    width: 20px;

    height: 20px;

    border: 3px solid #ccc;

    border-top: 4px solid #ddd;

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

}




@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}

• TECH TIP - 특정아이피 차단하기
• 2025.09.30

<?php

// IP 주소와 차단 목록을 인자로 받아 차단 여부를 판단하는 함수 

function ipBlock($ip, $iplist) {

    foreach ($iplist as $value) {

        // IP가 대역에 포함되는지 확인 (예: '111.111.111.'로 시작하는 모든 IP)

        if (strpos($ip, $value) === 0) {

            return true;

        }

    }

    return false;

}




$user_ip = $_SERVER['REMOTE_ADDR'];

$blocked_iplist = array("111.111.111.", "222.222.222.222"); // 차단할 IP 또는 IP 대역




if (ipBlock($user_ip, $blocked_iplist)) {

    header('HTTP/1.1 403 Forbidden');

    echo "<script>alert('접근이 차단되었습니다.');</script>";

    exit;

} else {

// 개발페이지등 include

 

}

?>

• TECH TIP - 에러로그 확인하기
• 2025.09.30

<?php

error_reporting(E_ALL);

ini_set("display_errors", 1);

?>