Pug (Jade) Tutorial #3 (IDs ans Classes)

https://www.youtube.com/watch?v=FZM-M3uNuzU&list=PLVvjrrRCBy2JbOPP2JXfCtADABI1QHzWg&index=3

 

 

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

Attributes – Pug

Attributes

태그 속성은 HTML과 유사 하지만 (쉼표로 선택) 값은 일반적인 JavaScript다 

(참고: 이 페이지의 예는 공백 문자로 파이프 문자 | 를 사용한다)

일반적인 JavaScript표현식도 잘 동작 한다 

 

 

Multiline Attributes

속성이 많은 경우 속성을 여러 줄로 분산 시킬수도 있다 

JavaScript런타임이 ES2015템플릿 문자열 (Node.js / io.js 1.0.0 이상 포함)을 지원 하는 경우 해당 구문을 속성에 사용할수 있다 

이것은 실제로 값이 긴 속성에 유용하다 

 

 

 

 

 

Quoted Attributes

속성이름에 JavaScript 구문을 행해 할수 있는 홀수 문자가 포함된 경우 "" 또는 "를 사용하여 인용하거나 쉼표를 사용하여 다른 속성을 구분 해야 한다 

이러한 문자의 예로는 [] 및 () (Angular 2에서 자주 사용됨)가 있다 

 

 

Attribute Interpolation

주의 

Pug/Jade의 이전 버전은 다음과 같은 보간 구문을 지원 했었다 

이 구문은 더이상 지원되지 않는다 

대안은 다음과 같다 

Pug v2와 이전 버전간의 다른 비 호환성에 대한 자세한 내용은 마이그레이션 안내서를 살펴 보자 

 

다음은 속성에 변수를 포함 시키기 위해 사용할수 있는 몇가지 대안이다 

JavaScript로 속성을 작성 해보자 

 

 

JavaScript런타임이 ES2015 템플릿 문자열 (Node.js / io.js 1.0.0 이상 포함)을 지원 하는 경우 구문을 사용하여 속성을 단순화 할 수도 있다 

 

Unescaped Attributes

기본적으로 모든 속성은 이스케이프 된다

즉, 특수문자가 이스케이프 시퀀스로 대체 되어 사이트간 스크립팅과 같은 공격을 방지 한다 

특수문자를 사용해야 하는 경우는 = 대신 ! 를 사용해야 한다 

주의 

이스케이프 처리 되지 않은 버퍼 코드는 위험할수 있다 

사이트 간 스크립팅을 피하려면 모든 사용자 입력을 삭제 해야 한다 

 

 

 

Boolean Attributes 

 

부울 속성은 퍼그에 의해 미러링 된다 

부울 값(true및 false)만 허용된다 

값을 지정하지 않으면 true로 간주 된다 

 

 

doctype이 html인 경우 Pug는 속성을 미러링 하지 않으며 대신 모든 스타일에서 이해되는 간결한 스타일을 사용한다 

 

Style Attributes 

스타일 속성은 일반 속성과 같은 문자열일수 있다 

자바스크립트로 스타일을 생성할때 편리한 객체일수도 있다 

 

Class Attributes

클래스 속성은 일반 속성과 같은 문자열일수 있다 

그러나 클래스 이름의 배열일수도 있으며 자바스크립트에서 생성할때 편리 하다 

클래스 이름을 true 또는 false 값으로 매핑 하는 객체일수 있다 

조건부 클래스를 적용할때 유용하다 

 

 

Class Literal

클래스는 .classname 구문을 사용하여 정의 할 수 있다 

div는 태그의 일반적인 선택이르모 태그 이름을 생략하면 기본값이 된다 

ID는 #idname 구문을 사용하여 정의 할수있다

&attributes구문을 사용하면 객체를 요소의 속성으로 분해 할수 있다 

그러나 값이 객체인 변수도 사용할수 있다 

 

주의 

속성을 사용하여 적용된 속성은 자동으로 이스케이프되지 않는다 

사이트간 스크립팅 (XSS)를 피하려면 모든 사용자 입력을 삭제 해야 한다 

mixin호출에서 속성을 전달 하면 자동으로 수행된다