Pug의 마크업을 할때 자주 사용하는 방법을 소개합니다.
기본 규칙 9개
- 기본 태그명은 HTML의 태그
- 줄을 들여 쓰면 자식(인라인) 요소가 된다.
- 인라인 요소와 줄 바꿈은 파이프 라인 (|)을 사용 (습관적으로 사용하기)
- HTML은 도트 (.)로 끝나는 요소 안에 넣어두면 자동 해석된다
- 속성은 괄호 안에 기술: 예 → a(href="#")
- 클래스 속성은 도트 (.) ID 속성은 샤프 (#)로 표현 (CSS표현법과 동일)
- 댓글(코멘트)에는 HTML로 출력되는 것과 출력돠지 않는 것이있다.
- 등호(=)를 사용하여 이스케이프
- (include[파일명 경로])로 컴포넌트 파일을 삽입할 수 있다.
Pug이란 무엇인가?
Sass를 사용하여 CSS를 작성하는 사람은 많다고 생각 합니다만,
Pug는 HTML의 Sass 같은 것입니다.
Pug를 사용할 때의 이점으로는 일반 HTML만으로는 할 수없는 SSI같은 작업을 할 수 있다는 점.
시작 / 끝 태그라는 것이 없기 때문에 태그를 닫지 않는 등의 실수가 일어나지 않는다는 점.
즉, 수정에 강한 HTML을 작성할 수 있다는 점.
예: 기본 HTML
<main>
<article>
<header class="home-Hero">
<h1 class="home-Hero_Logo"><img src="#" alt=""></h1>
</header>
<section class="home-About">
<div class="home-About_Title">
<h2 class="home-About_Heading sw-Heading">About</h2>
<p class="home-About_Description">CSS Talk란?</p>
<svg class="home-About_Clips">
<defs>
<clippath id="home-About_TitleClip" clipPathUnits="objectBoundingBox">
<polygon points="0,0 1,0 1,.934 .997,.943 .994,.948 .991,.95 .523,.95 .5,1, .477,.95 .009,.95 .006,.948 .003,.943 0,.934"></polygon>
</clippath>
</defs>
</svg>
</div>
</section>
</article>
</main>예를 들어 위의 HTML은 사이트의 일부이지만, 컴파일 이전 Pug는 다음과 같이 깔끔한 상태로 표현 가능 합니다. 요소 간의 계층 구조를 이해하기 쉬운 편이며, 종료 태그가 없기 때문에 들여 쓰기를 바꾸는 것만으로도 계층 구조를 쉽게 바꿀 수 있습니다.
Pug 변환
//- Pug
main
article
//- header
header.home-Hero
h1.home-Hero_Logo
img(src="#" alt="")
//- About
section.home-About
.home-About_Title
h2.home-About_Heading.sw-Heading
| About
p.home-About_Description
| CSS Talk란？
svg.home-About_Clips
defs
clippath#home-About_TitleClip(clipPathUnits="objectBoundingBox")
polygon(
points="0,0 1,0 1,.934 .997,.943 .994,.948 .991,.95 .523,.95 .5,1, .477,.95 .009,.95 .006,.948 .003,.943 0,.934")Pug 컴파일 환경
Pug를 사용하기 위해서는 컴파일 환경이 필요합니다.
Gulp에 익숙한 경우 템플릿을 따로 제공하고 있습니다.
또한 browser-sync도 들어 있기 때문에 실시간으로 수정 된 HTML을 표시 할 수 있으며, 컴파일 에러가 날 때 알림으로 알려줍니다.
간단히 시도하려면 Jade 생성기를 이용하는 것을 추천합니다.
(단, Pug의 모든 문법에는 대응 안함)
Online Jade template editor
HTML to Jade converter
Pug 표기법
Pug 사용이나 문법은 공식 문서를 확인하는 것이 확실합니다.
이전 Jade라는 것이 있었지만, Jade2.0.0에서 Pug라는 이름으로 바뀌 었습니다. 기능면에서도 추가/변경/삭제 된 것도 있으므로 Jade와 Pug는 완전한 호환되지 않습니다.
Pug 특징으로는
시작 태그와 종료 태그없이 들여 쓰기로 표현 (탭과 공백이 섞여 있거나하면 오류가 발생하기에 EditorConfig를 사용합니다)
클래스 이름이나 ID 이름이 CSS 문법과 같은 도트 (.)와 샤프 (#)로 비교적 적응하기 쉽습니다.
JavaScript를 쓸 수 있으므로 변수와 if 문 등을 사용할 수 있습니다.
JS는 효율성을 위해 사용할 수 있지만, 가능한 많은 사람들이 이해 가능하고, 만질 수있게 하기 위해 개인적으로는 복잡한 작성은 피하고 있습니다.
그렇기에, 이번 블로그에서는 기본적인 마크 업 문법을 소개하고 있습니다.
HTML 태그
1. 인라인 요소
2. 줄 바꿈
3. 외부 콘텐츠
특성
4. 클래스 속성
5. ID 속성
6. 스타일 속성
코멘트
7. 코멘트
이스케이프
8. 이스케이프
포함 (includes)
9. 포함
HTML 태그
Pug는 시작 태그와 종료 태그가 없습니다. 태그 이름을 기술하면 HTML 태그로 해석하여줍니다.
1. 인라인 요소
Pug
//- Pug
divHTML
<!-- HTML -->
<div></div>태그 이름 뒤에 공백을 넣으면 그 텍스트를 작성할 수 있으며, 줄의 들여 쓰기를 붙이면
ul > li 처럼 중첩 될 수 있습니다.
Pug
//- Pug
p 문장
ul
li 문장
li 문장HTML
<!-- HTML -->
<p>문장</p>
<ul>
<li>문장</li>
<li>문장</li>
</ul>스타일링을 위해
안에문장
같은 인라인 요소를
넣을 수 있다.
(HTML5 이후는 인라인 요소라는 개념은 없어졌습니다 만, 이번은 편의상 "인라인 요소"라고합니다).
가장 간단한 작성은 직접 HTML 태그로 기술하는 것입니다.
Pug
//- Pug
p 문장
span.span 문장HTML
<!-- HTML -->
<p>문장<span class="span">문장</span></p>또는 태그 이름을 (#[])에서 Pug로 해석 할 수 있습니다.
(종료 태그가 없기 때문에 HTML을 직접 쓰기보다는 읽기 쉬워집니다)
Pug
//- Pug
p 문장#[span.span 문장]문장...HTML
<!-- HTML -->
<p>문장<span class="span">문장</span>문장...</p>추천할만한 것은 파이프 라인 (|)을 사용하여 여러 줄로 작성할 수 있습니다.
Pug
//- Pug
p 문장
span 문장
| 문장
| 문장
| 문장인라인 요소가 1 개 밖에 없을 때는 HTML 태그를 사용하여 한 줄로 쓴 것이 알기 쉬울지도 모릅니다만, 여러 인라인 요소를 작성하는 경우 파이프 라인을 사용하는것이 비교적 가독성이 높습니다.
Pug
//- Pug
p 문장<span>문장</span>문장<span>문장</span>문장...
p 문장
span 문장
| 문장
span 문장
| 문장...2. 줄 바꿈
br 을 사용하여 줄 바꿈하려면 다음과 같이합니다. p태그 안에 중첩없이 모두 병렬되기 때문에 들여 쓰기도 모두 같은 위치에 있습니다.
Pug
//- Pug
p 문장
br
| 문장
span 문장
br
| 문장HTML
<!-- HTML -->
<p>문장<br>문장<span>문장</span><br>문장...</p>처음에는 파이프 라인과 br같은 인라인 요소의 위치 관계가 모르게되어 컴파일 오류를 여러 번 일으켜 버릴지도 모르지만, 패턴을 알고 나면 오히려 자연스럽게 쓸 수 있습니다. (믿어봐!)
3. 외부 콘텐츠
예를 들어, YouTube 및 Google Maps, Google Analytics 등으로 취득한 HTML을 Pug 표기법 수정하는 것은 복잡하고, 실수가 발생할 수 있습니다.
HTML을 그대로 Pug 파일에 붙여 넣을 경우, 다음과 같이 도트 (.)을 넣고 나서 줄 바꿈을하여 중첩 된 상태로 HTML을 붙여 넣을 수 있습니다.
Pug
//- Pug
.
<iframe width="560" height="315" src="https://www.youtube.com/embed/1OKZOV-iLj4"></iframe>태그 이름과 클래스 이름을 넣어도 문제 없습니다.
.sw-ResponsiveEmbed.
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12966.991898658345!2d139.7454329!3d35.6585805!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1491922441312" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>HTML
<!-- HTML -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/1OKZOV-iLj4"></iframe>
<div class="sw-ResponsiveEmbed"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12966.991898658345!2d139.7454329!3d35.6585805!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1491922441312" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>특성
href과 src같은 속성은 반각 괄호 안에 기술합니다. 속성 사이는 공백 또는 쉼표 (,) 또는 양쪽으로 구분되어 있으면 OK입니다.
속성이 여러개 있고 한 줄에만 기술해 읽기 어려운 경우엔,
줄 바꿈과 공백으로 바꿔주세요.
덧붙여서 태그 이름 li: a처럼 콜론 (:)을 넣으면 1 줄에 입력 할 수도 있습니다 (콜론을 붙인 요소에는 텍스트를 넣을 수 없습니다)
Pug
//- Pug
ul
li: a(href="example.com" target="_blank") 문장
li: a(href="example.com", target="_blank") 문장
li
a(href="example.com",
target="_blank") 문장
input(type="checkbox" checked)
input(type="checkbox" checked="checked")HTML
<!-- HTML -->
<ul>
<li><a href="example.com" target="_blank">문장</a></li>
<li><a href="example.com" target="_blank">문장</a></li>
<li>
<a href="example.com" target="_blank">문장</a>
</li>
</ul>
<input type="checkbox" checked>
<input type="checkbox" checked="checked">4. 클래스 속성
클래스 속성은 도트 (.)로 나타낼 수 있습니다.
Pug
//- Pug
p.text
a.link(href="example.com") 문장
p.text: a.link(href="example.com") 문장HTML
<!-- HTML -->
<p class="text"><a class="link" href="example.com">문장</a></p>
<p class="text"><a class="link" href="example.com">문장</a></p>여러 클래스 속성을 지정하려면 띄어쓰지 않고, 도트로 연결해 나가면 됩니다.
혹은 (class="")같은 속성으로 지정해도 괜찮습니다.
Pug
//- Pug
p.text.text-type1
a.link.link-type1(href="example.com") 문장
p.text(class="text-type1")
a.link(class="link-type1" href="example.com") 문장HTML
<!-- HTML -->
<p class="text text-type1"><a class="link link-type1" href="example.com">문장</a></p>
<p class="text text-type1"><a class="link link-type1" href="example.com">문장</a></p>5. ID 속성
ID 속성은 샤프 (#)로 나타낼 수 있습니다.
참고로 HTML 태그를 생략하고 클래스 또는 ID를 지정하면 div로 해석됩니다.
Pug
//- Pug
#id-attributesHTML
<!-- HTML -->
<div id="id-attributes"></div>6. 스타일 속성
스타일 속성 지정은, 괄호 ({})안에 속성 값을 넣습니다.
( "속성" 또는 '속성')로 감싸기 주의
Pug
//- Pug
p(style={color: "red", "font-weight": "bold"}) 문장HTML
<!-- HTML -->
<p style="color:red;font-weight:bold;">문장</p>쉼표 (,)로, 줄 바꿈
Pug
//- Pug
p(style={
color: "red",
"font-weight": "bold"})
| 문장7. 코멘트
Pug의 코멘트는 HTML로 표시되는 코멘트와 Pug에서만 표시되는 코멘트의 2 종류가 있습니다. //같은 슬래시 두개 면 HTML에서는 남지만, //-과 같이 하이픈을 쓰면 HTML에서는 남지 않습니다.
Pug
//- Pug
// HTML표시 코멘트HTML
//- HTML에 표시 되지 않는 코멘트
<!-- HTML -->
<!-- HTML에 표시되는 코멘트 -->여러 줄의 코멘트
Pug
//- Pug
//
코멘트 1행
코멘트 2행HTML
<!-- HTML -->
<!--
코멘트 1행
코멘트 2행
-->8. 이스케이프
HTML 문서에서 보안을 위해 5 개의 문자열 ( & < > " ')을 이스케이프 하는 것이 좋습니다.
Pug
//- Pug
p= "Q&A"HTML
<!-- HTML -->
<p>Q&A</p>등호 (=) 뒤에 있으면 텍스트의 이스케이프가 활성화 되고,
파이프 라인 (|)이 들어가면 이스케이프가 해제 됩니다.
Pug
//- Pug
p= "Q&A"
br
| Q&A
br
= "Q&A"HTML
<!-- HTML -->
<p>Q&A<br>Q&A<br>Q&A</p>9. 포함 (Includes)
포함을 사용하면 별도의 파일로 작성하는 Pug 파일의 내용을 삽입 할 수 있습니다.
예를 들어, 로컬 네비게이션 및 배너와 같은 카테고리 등.
예를 들어 배너를 Pug로 만들어 봅시다.
Pug
//- Pug
.st-SideBanner
.st-SideBanner_Inner
aside.st-SideBanner_Item
a.banner-Side(href="#")
.banner-Side_Image
img(src="#" alt="")
aside.st-SideBanner_Item
a.banner-Side(href="#")
.banner-Side_Image
img(src="#" alt="")/index.pug에 /_include/_SideBanner.pug를 인클루드 시키기:
//- Pug
include _include/_SideBanner.pug익숙해지기 전까지는 조금 어려울 수 있지만, 러닝 코스트가 그리 크지 않다고 생각합니다.
대규모 프로젝트 또는 다 수의 엔지니어와 작업을 할 경우, Pug는 코드 관리에 최적화 되어 있습니다.
Pug의 가장 큰 장점은 나중에 편집 할 수있는 코드가 된다는 점!
PS) 해외 10년 이상 장기체류로 인해, 다소 글의 문맥이 부드럽지 않은 점 이해 부탁드립니다.
주로 최근 Vue.js프로젝트에서 많이 사용되어 지고 있습니다.