mjml

KO | EN

gitlite — search

#golang #go #machine-learning #linux #docker #java #awesome #cli #kubernetes #vue #security #mcp #openai #open-source

(★ 18,199)

MJML: 반응형 이메일을 쉽게 만드는 유일한 프레임워크

mjml 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![](https://documentation.mjml.io/images/logo.svg)](https://mjml.io)

**개발사**

[![](https://static.mailjet.com/mjml-website/github/sinch-mailjet-purple-on-white.png)](https://mailjet.com)

---

[![github actions](https://github.com/mjmlio/mjml/actions/workflows/mjml-workflow.yml/badge.svg)](https://github.com/mjmlio/mjml/actions)

| **[소개](#introduction)**
| **[설치](#installation)**
| **[사용법](#usage)** |

---
# 소개
\*\*MJML\*\*은 [Mailjet](https://www.mailjet.com/)에서 제작한 마크업 언어로, 반응형 이메일 코딩의 번거로움을 줄이기 위해 설계되었습니다. 의미론적 구문 덕분에 언어가 쉽고 직관적이며, 풍부한 표준 컴포넌트 라이브러리를 통해 개발 시간을 단축하고 이메일 코드베이스를 가볍게 만들 수 있습니다. \*\*MJML\*\*의 오픈소스 엔진이 작성하신 \*\*MJML\*\*을 반응형 HTML로 변환하는 작업을 처리해 줍니다.

[![](https://cloud.githubusercontent.com/assets/6558790/12450760/ee034178-bf85-11e5-9dda-98d0c8f9f8d6.png)](https://mjml.io)

# 설치
NPM을 사용하여 \*\*MJML\*\*을 설치하면 NodeJS나 Command Line Interface에서 사용할 수 있습니다. 이들이 무엇인지 잘 모르겠다면 [사용법](#usage)으로 이동하여 다른 방식으로 \*\*MJML\*\*을 사용하는 방법을 확인해 보세요.
```bash
npm install mjml
```
# 개발
\*\*MJML\*\* 작업, 변경 사항 적용 및 풀 리퀘스트(pull request) 생성을 위해 손쉬운 개발을 지원하는 [yarn](https://yarnpkg.com/lang/en/docs/install/)을 다운로드하고 설치하세요.
```bash
git clone https://github.com/mjmlio/mjml.git && cd mjml
yarn
yarn build
```
코딩하면서 패키지를 다시 빌드하려면 `yarn build:watch`를 실행할 수도 있습니다.
# 사용법
## 온라인
무언가를 설치하고 싶지 않으신가요? 무료 온라인 에디터를 사용해 보세요!

[![try it live](https://cloud.githubusercontent.com/assets/6558790/12195421/58a40618-b5f7-11e5-9ed3-80463874ab14.png)](https://mjml.io/try-it-live)

## 애플리케이션 및 플러그인
\*\*MJML\*\*은 다양한 도구와 플러그인을 제공합니다. 다음을 확인해 보세요:
- [Visual Studio Code plugin](https://github.com/mjmlio/vscode-mjml) (\*\*MJML\*\*이 포함되어 있습니다).   
[Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=mjmlio.vscode-mjml), [Open VSX Registry](https://open-vsx.org/extension/mjmlio/vscode-mjml) 또는 Visual Studio Code 앱의 확장 프로그램 탭에서도 사용할 수 있습니다.
- [Sublime Text plugin](https://packagecontrol.io/packages/MJML-syntax) (\*\*MJML\*\*은 별도로 설치해야 합니다)
더 많은 도구를 보려면 [Community](https://mjml.io/community) 페이지를 확인하세요.
## 명령줄 인터페이스 (Command line interface)
> 파일을 컴파일하고 생성된 HTML을 `output.html`에 출력합니다.
```bash
mjml input.mjml -o output.html
```
CLI에 선택적 `arguments`를 전달하고 조합할 수 있습니다.
| argument | description | default value |
| -------------------------------- | ------------------------------------------------------ | ------------- |
| `mjml [input] -o [output]` | 출력을 [output]에 씁니다 | |
| `mjml [input] -s` | 출력을 `stdout`에 씁니다 | |
| `mjml [input] -s --noStdoutFileComment` | 첫 줄에 파일 주석 없이 출력을 `stdout`에 씁니다 | |
| `mjml -w [input]` | `[input]`(파일 또는 폴더)에 발생한 변경 사항을 감시합니다 | |
| `mjml [input] --config.allowIncludes` | `mj-include` 처리를 활성화합니다 (`true` 또는 `false`) | `false` |
| `mjml [input] --config.allowMixedSyntax` | `sanitizeStyles`가 활성화된 경우 블록 및 CSS 변수 구문 혼합을 허용합니다 (`true` 또는 `false`) | `false` |
| `mjml [input] --config.beautify` | 출력을 보기 좋게 정렬합니다 (`true` 또는 `false`) | `true` |
| `mjml [input] --config.includePath` | 허용된 목록에 있는 포함(include) 루트를 문자열 경로 또는 경로의 JSON 배열로 추가합니다 | |
| `mjml [input] --config.minify` | 출력을 압축합니다 (`true` 또는 `false`) | `false` |
| `mjml [input] --config.minifyOptions` | HTML 압축기 옵션이며, CSS 압축을 제어하려면 `minifyCss`를 사용하세요 | [mjml-cli documentation](https://github.com/mjmlio/mjml/blob/master/packages/mjml-cli/README.md) 참고 |
| `mjml [input] --config.juicePreserveTags` | CSS를 인라인화할 때 일부 태그를 보존합니다 | [mjml-cli documentation](https://github.com/mjmlio/mjml/blob/master/packages/mjml-cli/README.md) 참고 |
| `mjml [input] --config.mjmlConfigPath` | 커스텀 컴포넌트를 위한 `.mjmlconfig` 파일의 경로 | 현재 작업 디렉토리 |
| `mjml [input] --config.sanitizeStyles` | 압축 전에 CSS 내부의 템플릿 변수를 정화(sanitize)합니다 (`true` 또는 `false`) | `false` |
| `mjml [input] --config.useMjmlConfigOptions` | `.mjmlconfig` 파일의 `options` 속성을 사용할 수 있게 합니다 | `false` |
| `mjml [input] --config.templateSyntax` | JSON 배열로 커스텀 템플릿 구분자를 설정합니다 (`[{"prefix":"{{","suffix":"}}"}]`) | `[{"prefix":"{{","suffix":"}}"},{"prefix":"[[","suffix":"]]"}]` |
설정 옵션에 대한 자세한 내용은 [mjml-cli documentation](https://github.com/mjmlio/mjml/blob/master/packages/mjml-cli/README.md)을 참조하세요.
## Node.js 내부 사용
```javascript
import mjml2html from 'mjml'
/\*
Compile an mjml string
\*/
async function renderMjml() {
const htmlOutput = await mjml2html(`

Hello World!
`, options)
/\*
생성된 반응형 HTML 및 MJML 오류(있는 경우)를 출력합니다.
\*/
console.log(htmlOutput)
}
renderMjml()
```
선택적 `options`를 객체로 전달하여 `mjml2html` 함수를 사용할 수 있습니다:
| 옵션 | 단위 | 설명 | 기본값 |
| -------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| allowMixedSyntax | boolean | CSS 정화(sanitization) 중 혼합 블록/값/속성 템플릿 구문을 허용합니다. | `false` |
| beautify | boolean | HTML 출력을 보기 좋게 정렬(beautify)하는 옵션입니다. | `false` |
| filePath | string | 파일 경로로, `mj-include` 인스턴스에서 상대 경로를 위해 사용됩니다. | `.` |
| fonts | object | MJML에 의해 렌더링된 HTML에서 기본으로 가져오는 폰트입니다. | [index.js](https://github.com/mjmlio/mjml/blob/master/packages/mjml-core/src/index.js) 참조 |
| ignoreIncludes | boolean | `mj-include` 인스턴스를 무시하는 옵션입니다. | `true` |
| includePath | string 또는 string[] | 추가로 허용된 포함(include) 루트 경로로, `ignoreIncludes`가 `false`일 때 사용됩니다. | |
| juicePreserveTags | object | CSS 인라인화 시 특정 태그를 유지합니다. 자세한 내용은 [문서](https://documentation.mjml.io/#inside-node-js)를 참조하세요. | |
| keepComments | boolean | HTML 출력에서 주석을 유지하는 옵션입니다. | `true` |
| minify | boolean | HTML 출력을 압축(minify)하는 옵션입니다. | `false` |
| minifyOptions | object | htmlnano 압축 옵션(`minifyCss` 포함). 자세한 내용은 [문서](https://documentation.mjml.io/#inside-node-js)를 참조하세요. | |
| mjmlConfigPath | string | `.mjmlconfig` 파일의 경로 또는 디렉토리 (사용자 정의 컴포넌트용) | `process.cwd()` |
| preprocessors | array of functions | 파싱하기 전에 XML에 적용되는 전처리기입니다. 입력은 JSON이 아니라 XML이어야 합니다. 함수 형태는 `(xml: string) => string`여야 합니다. | `[]` |
| sanitizeStyles | boolean | 압축 전 CSS의 템플릿 변수를 정화(sanitize)합니다. | `false` |
| templateSyntax | array of objects | 정화 과정에서 사용되는 사용자 정의 템플릿 구분자 (`[{ prefix, suffix }]`) | `[{"prefix":"{{","suffix":"}}"},{"prefix":"[[","suffix":"]]"}]` |
| useMjmlConfigOptions | boolean | `.mjmlconfig` 파일의 `options` 속성을 사용할 수 있게 합니다. | `false` |
| validationLevel | string | [유효성 검사기](https://documentation.mjml.io/#validating-mjml)에서 사용 가능한 값: `strict`, `soft`, `skip` | `soft`. |
## 클라이언트 사이드 (브라우저 환경)
```javascript
var mjml2html = require('mjml-browser')
/\*
mjml 문자열 컴파일
\*/
mjml2html(`

Hello World!
`, options).then(function (htmlOutput) {
/\*
생성된 반응형 HTML 및 MJML 오류(있는 경우)를 출력합니다.
\*/
console.log(htmlOutput)
})
```
## API
애플리케이션에 \*\*MJML\*\*을 손쉽게 통합할 수 있도록 무료로 사용할 수 있는 \*\*MJML\*\* API가 제공됩니다. [API에 대해 자세히 알아보기](https://mjml.io/api)를 확인해 보세요.
# MJML Slack
멋진 커뮤니티가 없다면 \*\*MJML\*\*은 지금처럼 매력적이지 않을 것입니다. [커뮤니티 Slack](https://join.slack.com/t/mjml/shared\_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg)에 참여하여 다른 \*\*MJML\*\* 사용자들을 만나보세요.

mjml

mjml 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

mjml

mjml 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README