JWEB2 
PROJECT INQUIRY

Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

총 5건의 글

PHP 26.08.01 조회 141

Nginx+PHP-FPM에서 .html 파일에서 PHP 코드 실행하기

Nginx 환경에서 .html·.htm 파일에서도 PHP 코드가 실행되도록 설정하는 방법이다. /www/server/nginx/conf의 enable-php-74.conf에서 location 정규식 매칭에 html·htm을 추가하고, /www/server/php/74/etc/php-fpm.conf의 security.limit_extensions에 .html·.htm 확장자를 등록한 뒤 저장하면 된다.

第一步：修改 Nginx 引用文件 (针对 7.4)​

由于你换了版本，Nginx 现在引用的应该是 enable-php-74.conf。

  1. 进入目录：/www/server/nginx/conf/
  2. 找到并打开文件：enable-php-74.conf
  3. 将其内容修改为（注意第一行加入了 html 和 htm）：
location ~ [^/]\.(php|php5|html|htm)(/|$)
    {
        try_files $uri =404;
        fastcgi_pass  unix:/tmp/php-cgi-74.sock;
        fastcgi_index index.php;
        include fastcgi.conf;
        include pathinfo.conf;
    }
第二步：修改 PHP-7.4 的安全后缀限制
  1. 进入宝塔面板 -> 文件。
  2. 直接进入这个路径：/www/server/php/74/etc/
  3. 找到文件：php-fpm.conf 并双击打开。
  4. 在这个文件里搜索 [www]（通常就在文件开头或中部）。
  5. 在 [www] 下方添加： security.limit_extensions = .php .php3 .php4 .php5 .php7 .html .htm
  6. 保存。
#php #nginx #php-fpm #html
HTML5 26.07.08 조회 131

Markdown 사용법 - 기본 문법 완전 정리

Markdown의 기본 문법을 예제와 함께 정리한 글이다. 제목(h1~h6), 굵게·기울임·삭제선, 순서·비순서 목록, 링크와 이미지, 인용구, 인라인 코드와 코드 블록, 표, 분할선, LaTeX 수식까지 설명하고, marked.js 라이브러리로 HTML 페이지에서 Markdown을 렌더링하는 방법도 소개한다.

<!DOCTYPE html>
<html>
<head>
<title>Markdown 网页演示</title>
<!-- 引入解析库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<!-- 存放转换后内容的容器 -->
<div id="content"></div>

<script>
const mdText = "# 这是一个标题\n\n这是来自 **Markdown** 的内容！";
// 执行转换并插入页面
document.getElementById('content').innerHTML = marked.parse(mdText);
</script>
</body>
</html><span style="font-family: 나눔고딕, Dotum, Helvetica, sans-serif;"><span style="white-space: normal;">
</span></span>

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成结构精美的 HTML。由于其简洁性和跨平台性，它已成为程序员、作家和笔记爱好者的首选工具。

以下是 Markdown 常用语法的详细讲解：

标题（Headings）

Markdown 支持六级标题，通过在行首插入 1 到 6 个 # 符号来表示。


# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

文本格式化

用于强调文本或改变其视觉表现。

  • 加粗：在文字前后分别加上两个星号 ** 或下划线 __。例如：**加粗文字**。

  • 斜体：在文字前后分别加上一个星号 * 或下划线 _。例如：*斜体文字*。

  • 加粗并斜体：在文字前后分别加上三个星号 ***。

  • 删除线：在文字前后分别加上两个波浪号 ~~。例如：~~删除的内容~~。

列表（Lists）

无序列表

使用星号 *、加粗 + 或减号 - 作为列表标记，后面紧跟一个空格。


- 项目一

- 项目二

- 子项目（缩进两个空格）

有序列表

使用数字外加一个英文句点 .，后面紧跟一个空格。


1. 第一步

2. 第二步

3. 第三步

链接与图片

这是 Markdown 中最常用的功能之一，注意括号的使用。

  • 超链接：语法为 [链接文字](URL)。例如：[Tabbit 官网]([https://tabbit-ai.com)。](https://tabbit-ai.com)`。)

  • 图片：语法为 ![替代文字](图片URL)。比链接多了一个感叹号。

引用（Blockquotes）

在段落的第一行前添加一个右尖括号 >。

这是一个引用示例。

引用可以嵌套，也可以包含其他 Markdown 语法。

代码（Code）

  • 行内代码：使用反引号 ` 包裹代码。例如：使用printf()函数。

  • 代码块：使用三个反引号 ``` 包裹，并可以指定语言名称以实现语法高亮。

def hello_world():

print("Hello, Markdown!")


### **表格（Tables）**

使用竖线 `|` 分隔单元格，使用连字符 `-` 分隔表头和其他行。

| 姓名 | 职业 | 技能 |

| :--- | :----: | ---: |

| Tabbit | AI 浏览器 | 网页自动化 |

| 开发者 | 工程师 | Python/JS |

*注：在连字符行中使用冒号可以控制对齐方式（左对齐 `:---`、居中 `:---:`、右对齐 `---:`）。*

### **分割线**

在一行中使用三个或更多的星号 `*`、减号 `-` 或底线 `_` 来建立分隔线，行内不能有其他内容。

---

### **数学公式（LaTeX）**

虽然不是标准 Markdown 的一部分，但大多数现代编辑器（如 Tabbit）都支持 LaTeX 语法：

- **行内公式**：使用单个 `$` 包裹。例如：$E = mc^2$。

- **独立公式块**：使用双 `$$` 包裹。

$$

\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

$$

掌握了以上这些基础语法，你就可以撰写出排版专业且美观的文档了。
#markdown #html #documentation #writing
CSS 25.07.06 조회 163

자바스크립트 없이 CSS popovertarget로 팝업창 만들기

JavaScript 없이 CSS의 popover 속성과 popovertarget 속성만으로 팝업창을 여닫는 방법을 보여주는 CodePen 예제다. 버튼 요소에 popovertarget="id"를 지정하고 대상 요소에 id와 popover 속성을 설정하면, 브라우저 기본 팝업 동작으로 모달을 구현할 수 있다.

See the Pen popovertarget by H J (@H-J-the-typescripter) on CodePen.

#css #popover #popup #html
HTML5 22.10.28 조회 99

HTML Meta 태그와 OG(Open Graph) 사용 방법 총정리

HTML head에 넣는 meta og(오픈그래프) 태그 사용법을 정리한 글이다. OG의 개념과 동작 원리, 필수 og 태그(og:type, og:url, og:title, og:image 등), 이미지 권장 크기(1200x630), 네이버 블로그·카카오톡·트위터 미리보기 설정, 모바일 앱 연동 태그를 예제와 함께 설명한다.

HTML 에서 Head 부분에 해당하는 meta og(오픈그래프)에 대해 알아보도록 하겠습니다.

오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다.

OG (Open Graph)

사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML의 head의 메타데이터를 크롤링하여 미리 보기 화면을 생성해 줍니다.

대표적으로 카카오톡에서 공유한 링크 또는 티스토리에서 공유되는 링크 등이 있습니다.

OG Type 사용 방법

meta og 태그를 사용하기 위해서는 HTML의 <head> 안쪽에 다음과 같이 태그를 적용해줄 수 있습니다.

<html>
<head>
<meta property="og:" content="">
</head>
</html>

이미지의 경우 최소 600 x 315 픽셀은 되어야 하며, 1200 x 630 픽셀 크기를 권장함

필수 og 태그

<!-- 필수는 og 태그 -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">

<!-- 필수는 아니지만, 추천하는 og 태그 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Naver 블로그, 카카오톡 미리보기 설정

<meta property="og:title" content="콘텐츠 제목" />
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" />
<meta property="og:title" content="웹사이트 이름" />
<meta property="og:description" content="웹페이지 설명" />

트위터 미리보기 설정

<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" />
<meta name="twitter:title" content="콘텐츠 제목" />
<meta name="twitter:description" content="웹페이지 설명" />
<meta name="twitter:image" content="표시되는 이미지 " />

모바일 앱 미리보기 설정

모바일 앱이 존재하는 경우 앱으로 연결 시 노출

<--iOS-->
<meta property="al:ios:url" content=" ios 앱 URL" />
<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" />
<meta property="al:ios:app_name" content="ios 앱 이름" />

<--Android-->
<meta property="al:android:url" content="안드로이드 앱 URL" />
<meta property="al:android:app_name" content="안드로이드 앱 이름" />
<meta property="al:android:package" content="안드로이드 패키지 이름" />
<meta property="al:web:url" content="안드로이드 앱 URL" />
#html #opengraph #meta #sns
HTML5 JAVASCRIPT 20.04.29 조회 185

웹페이지 인쇄 제어하기 - ScriptX 프린트 설정

MeadCo ScriptX를 이용해 웹페이지 인쇄 시 머리말·꼬리말, 인쇄 방향(세로/가로), 여백, 배경 이미지 출력 여부를 제어하는 방법이다. object 태그로 ScriptX를 로드하고 factory.printing 속성을 설정하며, IE는 ScriptX, 크롬은 window.print()로 분기 처리하는 전체 예제 코드와 무료 라이선스 안내를 포함한다.

문서에서 출력하는 방식으로 출력합니다.

출력할 페이지에 아래의 코드를 삽입한다.

<!-- MeadCo ScriptX -->
<object id=factory style="display:none" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="(자기경로)/smsx.cab#Version=7.4.0.8 "></object>

// 스크립트에 아래코드 추가
function printPage(){
factory.printing.header = "가로 페이지 인쇄"; //머릿말 설정
factory.printing.footer = ""; //꼬릿말 설정
factory.printing.portrait = false; //출력방향 설정: true-세로, false-가로
factory.printing.leftMargin = 1.0; //왼쪽 여백 설정
factory.printing.topMargin = 1.0; //위쪽 여백 설정
factory.printing.rightMargin = 1.0; //오른쪽 여백 설정
factory.printing.bottomMargin = 1.0; //아래쪽 여백 설정
// factory.printing.printBackground = true; //배경이미지 출력 설정:라이센스 필요
factory.printing.Print(false); //출력하기
}

// 인쇄버튼에서 해당 함수 실행
$( "#print" ).click(function(){
if( navigator.userAgent.indexOf("MSIE") > 0 ){
printPage();
} else if( navigator.userAgent.indexOf("Chrome") > 0){
window.print();
}
});

라이센스관련

http://scriptx.meadroid.com/license-pricing/free-deployment.aspx

Free Printing

A basic subset of ScriptX client-side printing functionality -- header & footer settings, printed orientation, coarse control of margins and a browser window/frame printing command -- is available at no charge, and is freely distributable.

ScriptX 클라이언트 측 인쇄 기능(헤더 및 바닥글 설정, 인쇄 방향, 여백의 거친 제어 및 브라우저 창/프레임 인쇄 명령)의 기본 하위 집합은 무료로 제공되며 무료로 배포됩니다.

배경이미지 크기 760 x 1102

<html>
<head>
<title>프린터 출력 테스트</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<STYLE media=print>
<!--
.noPrint{
DISPLAY: none
}
//-->
</STYLE>
</head>
<body>
<style>
body {
background:url('배경이미지') no-repeat center;
}
td {
font-size:26px;
font-family:궁서;
}
</style>

<table style="width:690px;">
<tr>
<td style="height:60px;">출력하기
</tr>
</table>
<table style="width:690px; height:400px;">
<tr>
<td> </td>
</tr>
</table>
<object id=factory style="display:none" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="http://업로드주소/smsx.cab#Version=7,6,0,10 "></object>

<script language=javascript>
function init() {
var p = factory.printing;
var printername;
var defName;
var name;
try {
factory.printing.header = "";   //머릿말 설정');
factory.printing.footer = "";   //꼬릿말 설정');
factory.printing.portrait = true;  //출력방향 설정: false-가로, true-세로');
factory.printing.leftMargin = 0;  //왼쪽 여백 설정');
factory.printing.topMargin = 0;  //위쪽 여백 설정');
factory.printing.rightMargin = 0;  //오른쪽 여백 설정');
factory.printing.bottomMargin = 0;  //아래쪽 여백 설정');
factory.printing.Preview();
} catch ( e ) {}
}
init();
</script>
</body>
</html>

참고로 배경 이미지가 출력이 안될 경우 배경색 및 이미지 인쇄 앞에 체크가 안되어 있을때 안나옵니다.

#html #javascript #print #scriptx


Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.

PROJECT INQUIRY