Dev Blog

스크립트 & 소스코드 공유

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

10건의 글

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}

$$

掌握了以上这些基础语法,你就可以撰写出排版专业且美观的文档了。

네이버 검색에 SNS 링크 노출하기 - schema.org structured data

네이버 검색 결과에 블로그·페이스북·인스타그램 등 SNS 링크가 표시되도록 schema.org 구조화 데이터를 적용하는 방법이다. application/ld+json의 Person 타입과 itemscope 마크업에 sameAs 속성으로 각 SNS URL을 연결하는 예제 코드를 제공한다.

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "<?php echo $config['cf_title'] ?>",
"url": "<?php echo G5_URL ?>",
"sameAs": [
"https://blog.naver.com/curlysuemom",
"https://www.facebook.com/hansaedreams",
"https://www.instagram.com/curlysue_korea"
]
}
</script>
</head>
<body>
<span itemscope="" itemtype="http://schema.org/Organization">
<link itemprop="url" href="<?php echo G5_URL ?>">
<a itemprop="sameAs" href="https://blog.naver.com/curlysuemom"></a>
<a itemprop="sameAs" href="https://www.facebook.com/hansaedreams"></a>
<a itemprop="sameAs" href="https://www.instagram.com/curlysue_korea"></a>
</span>

EditPlus 찾기·바꾸기에서 정규표현식 사용하기

EditPlus의 찾기·바꾸기 기능에서 정규식을 사용해 문자열을 치환하는 방법이다. PHP 버전이 올라가며 오류를 내는 $arr[string] 구문을 $arr['string']으로 바꾸는 예제를 통해, 대괄호 안 문자열을 찾는 정규식 \[([A-Za-z][A-Za-z0-9_]*)\]과 괄호 그룹을 참조하는 \1 치환 문법을 설명한다.

에디트플러스의 찾기와 바꾸기 기능에서 정규표현식을 사용할 수 있다.

이 기능을 이용해 특정 문자열을 치환해 보고자 한다.

  1. 상황

PHP 에서 예전에는 오류를 내지 않던 구문이 php 버전이 높아지면서 오류를 내는 구문들이 있다.

ex) $arr[string]

  1. 원하는 작업

작은따옴표 붙이기

$arr[string] ==> $arr['string']

  1. EditPlus 바꾸기 기능

바꾸기 창에서 정규식 체크후에,

찾을말 : [([A-Za-z]+[A-Za-z0-9_]+)]

바꿀말 : ['\1']

  1. 문법설명

[ 로 시작해서 ] 로 끝나는 문자열을 찾는다.

숫자만으로 된것은 찾으면 안되기 때문에, [A-Za-z] 가 1개이상(+) 으로 시작해야 하고,

영문대소 숫자 언드바 로 구성된 문자열을 찾는다.

찾을말에서 괄호 () 안의 문자열이, 바꿀말에서 \1 에 들어간다.

따라서, [string] 이 ['string'] 으로 변환된다.

검색엔진 노출 방지 방법 - robots.txt와 meta robots

검색엔진에 사이트가 노출되지 않도록 제어하는 방법을 정리한 글이다. robots.txt 파일의 User-agent, Disallow, Allow 규칙과 특정 디렉터리·페이지·구글봇만 차단하는 예시, URL 패턴 일치, 그리고 각 페이지에 넣는 meta robots 태그(noindex, nofollow) 사용법과 함께 구글 웹마스터 도움말 기준으로 설명한다.

제공해주신 검색엔진 크롤링 제어 방법에 관한 내용을 마크다운 형식으로 가독성 있게 정리해 드립니다.

검색엔진 노출 제어 가이드: robots.txt 및 Meta 태그 활용법

검색엔진 로봇의 접근을 제어하여 원치 않는 페이지가 검색 결과에 노출되지 않도록 하는 방법은 크게 두 가지가 있습니다. 이 가이드는 구글 웹마스터 도움말 센터의 표준 규약을 바탕으로 작성되었습니다.


1. robots.txt 파일을 이용하는 방법

robots.txt 파일은 웹사이트의 루트 디렉토리에 위치해야 하며, 검색 로봇이 사이트 정보를 수집하기 전 가장 먼저 확인하는 규약 파일입니다.

기본 작성 규칙

  • User-Agent: 규칙을 적용할 로봇의 종류 (전체는 *)
  • Disallow: 수집을 차단할 페이지 경로
  • Allow: 차단된 경로 내에서 예외적으로 허용할 경로

주요 설정 예시

설정 목적 코드 예시
모든 봇의 사이트 전체 차단 User-Agent: *<br>Disallow: /
특정 디렉토리 및 하위 항목 차단 User-Agent: *<br>Disallow: /abcd/
특정 페이지 차단 User-Agent: *<br>Disallow: /index.html
특정 로봇(구글봇)만 차단 User-Agent: Googlebot<br>Disallow: /
특정 확장자(.gif) 파일 차단 User-Agent: Googlebot<br>Disallow: /*.gif$

주의사항

  • 대소문자 구분: URL 경로 작성 시 대소문자를 정확히 구분해야 합니다.
  • 슬래시(/) 활용: Disallow: /abcd라고 적으면 abcd 디렉토리뿐만 아니라 파일명이 abcd로 시작하는 모든 파일도 차단됩니다.
  • 표준 준수: 이 설정은 검색 로봇이 표준 규약을 따를 때만 유효합니다.

2. Meta 태그를 이용하는 방법

사이트 루트 권한이 없어 robots.txt 파일을 수정할 수 없을 때, 개별 HTML 페이지의 <head> 섹션에 태그를 삽입하여 제어하는 방식입니다.

주요 설정 예시

  • 모든 로봇의 색인 생성 및 링크 수집 차단
    <meta name="robots" content="noindex, nofollow">
  • 구글 로봇만 특정하여 차단
    <meta name="googlebot" content="noindex, nofollow">
  • 페이지 색인은 허용하되, 외부 링크 추적만 차단
    <meta name="robots" content="nofollow">
  • 페이지 내 이미지 색인 생성 차단
    <meta name="robots" content="noimageindex">

관련 참고 링크

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" />


Let's create something great together.

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