PUG (Jade)

Pug (Jade) Tutorial #2 - The Basics (Doctypes + HTML Tags)

일등하이 2020. 7. 14. 14:12

https://www.youtube.com/watch?v=aBb8-kvczsc&list=PLVvjrrRCBy2JbOPP2JXfCtADABI1QHzWg&index=2&frags=pl%2Cwn

index.pug 파일에

doctype xml 작성하면

다음과 같이 코드를 만들어 줌

doctype transitional 작성 하면

다음과같이 코드를 만들어 줌

이외에도 strict 도 있음

index.pug 파일을 다음과 같이 작성한다

줄바꿈시 . 을 사용한다

1
2
3
4
5
6
7
8
9
10
11
12

doctype html
html
    head
    body
        h1 Hello Pug!
        p. 
            This is a paragprah tag
            and this is a new line
        ul
            li This is item #1
            li This is item #2
            li This is item #3

cs

아래와 같이 만들어 준다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>Hello Pug!</h1>
    <p>
      This is a paragprah tag
      and this is a new line
    </p>
    <ul>
      <li>This is item #1</li>
      <li>This is item #2</li>
      <li>This is item #3</li>
    </ul>
  </body>
</html>

cs

https://pugjs.org/language/plain-text.html

Plain Text – Pug

Plain Text Pug provides four ways of getting plain text — that is, any code or text content that should go, mostly unprocessed, directly into the rendered HTML. They are useful in different situations. Plain text does still use tag and string interpolati

pugjs.org

Plain Text

Pug는 일반 텍스트를 얻는 4가지 방법, 즉 대부분 처리 되지않은 코드나 텍스트 내용을 랜더링 된 HTML로 직접 가져오는 방법을 제공한다

일반 텍스트는 여전히 태그 및 문자열 보간을 사용하지만 행의 첫 번째 단어는 퍼그 태그가 아니다

일반 텍스트가 이스케이프 되지 않기 때문에 리터럴 HTML도 포함할수 있다

여기서 가장 일반 적인 함정은 랜더링 된 HTML에 공백을 관리 하는 것이다

Inline in a Tag

일반 텍스트를 추가 하는 가장 쉬운 방법은 인라인이다

라인의 첫 번째 용어는 태그 자체이다

태그와 공백 뒤에 있는 모든 것은 해당 태그의 텍스트 내용이다

일반 텍스트 내용이 짧거나 줄이 길지 않은 경우 가장 유용하다

Literal HTML

또한 전체 행은 왼쪽 꺽쇠 괄호 < 로 시작할때 일반 텍스트로 취급된다

그렇지 않은 경우 리터럴 HTML태그를 작성하는데 유용할수 있다

예를 들어 하나의 유스케이스는 조건부 주석이다

리터럴 HTML태그는 처리 되지 않음으로 Pug 태그와 달리 자체적으로 닫히지 않는다

Piped Text

템플릿에 일반 텍스트를 추가 하는 또 다른 방법은 파이프문자 | 로 줄 앞에 접두사를 추가 하는 방법이다

일반 텍스트와 인라인 태그를 혼합 하는데 유용하다

Block in a Tag

종종 태그 내에 큰 텍스트 블록을 원할수 있다

스크립트 및 스타일 태그에 JavaScript 및 CSS 코드를 작성 하는것이 좋은 예다

. (dot) 점을 태그 이름 뒤에 추가만 하면 된다

태그 이름 바로 뒤에 또는 태그에 속성이 있는 경우 닫는 괄호 뒤에 표시 된다

태그와 점 사이에 공백이 없어야 한다

태그의 일반 텍스트 내용은 한 단계 들여써야 한다

https://pugjs.org/language/includes.html

Includes – Pug

Includes Includes allow you to insert the contents of one Pug file into another. //- index.pug doctype html html include includes/head.pug body h1 My Site p Welcome to my super lame site. include includes/foot.pug //- includes/head.pug head title My Site s

pugjs.org

부모 태그 내에서 다른 태그 다음에 일반 텍스트의 도트 블록을 만들수도 있다

Whitespace Control

랜더링 된 HTML의 공백 관리는 퍼그 학습에 있어 가장 까다로운 부분중 하나이다

HTML로 컴파일 할대 공백의 작동 방식에 대한 두가지 주요 요점만 기억 하면 된다

퍼그는 들여 쓰기및 요소사이의 모든 공백을 제거 한다
- 따라서 HTML요소의 닫는 태그는 다음의 여는 태그에 닿는다
- CSS표시 속성을 변경하지 않은 경우 여전히 웹 브라우저에서 별도의 단락으로 렌더링 되므로 같은 블록 수준 요소에는 일반적으로 문제가 되지 않는다
- 요소사시에 공백을 삽입 해야 하는 경우 아래 설명된 방법을 참조 하자
퍼그는 다음을 포함하여 요소내에 공백을 유지 한다
- 텍스트 줄 중간에 있는 모든 공백
- 블록 들여쓰기이상의 공백
- 후행 공백
- 일반 텍스트 블록 내에서 또는 연속 파이프된 줄 사이에서 줄 바꿈