속성의 접두사 - expr:

expr:는 속성의 접두사이며 속성 값에 Blogger 표현식이 포함되어 있음을 나타냅니다.
7 min read

expr:는 속성의 접두사이며 속성 값에 Blogger 표현식이 포함되어 있음을 나타냅니다.

Blogger 표현식이란?

Blogger 표현식은 HTML 태그의 속성 값에 삽입되는 Blogger의 특정 코드입니다.

<TAG ATTRIBUTE='EXPRESSION'>

</TAG>

Blogger 표현식은 다음과 같이 구성되어 있습니다.

  • 연산자
  • Blogger 데이터
  • 따옴표로 묶인 문자열

Blogger 표현식의 유형은 다음과 같습니다.

종류 의미
string 문자열 "string"
boolean 불리언 값 true | false | yes | no
number 숫자 값 17
URL 블로그 URL "https://.html"
image 이미지의 URL "https://.jpeg"
date 날짜 "January 25, 2025"
locale 지역 설정 "ko"
message 메시지 "Home"
skin 래핑 변수의 값 "#ffffff"
object 객체 {"item1":"value","item2":"value","item3":"value"}
array array[string] 문자열 배열 ["string1","string2","string3"]
array[boolean] 불리언 값의 배열 [true,false,true]
array[number] 숫자의 배열 [1,2,3,4]
array[URL] 블로그 URL의 배열 ["https://.html","https://.html","https://.html"]
array[image] 이미지 URL의 배열 ["https://.jpeg","https://.jpeg","https://.jpeg"]
array[date] 날짜 배열 ["January 25","April 2","October 29"]
array[object] 개체 배열 [{object}]


구문

XML
<div expr:class='EXPRESSION' expr:id='EXPRESSION' expr:style='EXPRESSION'>

</div>
  • HTML 태그의 모든 속성에 expr: 접두사를 붙일 수 있습니다.
  • 특정 조건에서 expr: 접두사는 Blogger 태그와 관련된 표현식 속성에 사용될 수도 있습니다. 그러나 사용법은 약간 다릅니다.


HTML 태그에서

표준 HTML 태그에서 expr: 접두사는 속성 값에 Blogger 표현식을 포함하는 데 사용됩니다.
HTML 렌더링에서는 이 접두사가 출력되지 않고 Blogger 표현식의 결과로 아래와 같이 출력됩니다.

XML
<div expr:class='data:view.type'
     expr:id='"p-" + data:blog.blogId"'
     expr:style='"font-size: " + data:view.isMobile ? 20 : 14 + "px;"'>

</div>
HTML 렌더링
<div class='item'
     id='p-0000000000'
     style='font-size: 14px;'>

</div>


XML 태그에서

Blogger의 b: 태그에서 expr: 접두사를 사용하는 것은 완전히 새로운 의미를 갖습니다. Blogger의 대부분의 b: 태그는 이 expr: 접두사를 추가하지 않고 Blogger 표현식만으로 템플릿을 구성할 수 있기 때문입니다. 잘못된 사용으로 인해 템플릿 또는 위젯이 중단될 수 있습니다. 그러니 조심하세요 ...

expr: 접두사를 사용하면 문자열에서 데이터가 재구성될 수 있습니다. 예를 들어, 다른 이름을 가진 유사한 데이터가 여러 개 있고 코드를 한 번만 작성하려고 할 때, expr: 접두사가 포함된 표현식을 사용할 수 있습니다.

이해 못 하셨나요? 크게 중요하지 않습니다.

다음은 데이터를 재구성하는 예시입니다.

  • data:blog.blogId
  • data:view.postId
  • data:view.pageId
Demo
<b:with value='data:view.isPost ? "view.post" : (data:view.isPage ? "view.page" : "blog.blog")' var='dataName'>
<b:with expr:value='"data:" + data:dataName + "Id"' var='newData'>

 데이터 값:<data:dataName/> ID:<data:newData/>

</b:with>
</b:with>
첫 번째 표현식에는 expr: 접두사가 없습니다. 우리가 찾는 결과는 blog.blog 또는 view.post 또는 view.page와 같은 단일 문자열이기 때문입니다.
두 번째 표현식에는 expr: 접두사가 필요합니다. 목적은 데이터를 재구성하는 것이며 단순한 문자열이 아닌 데이터로 간주되어야하기 때문입니다.

일반적인 방법으로 결과를 얻을 수 있다면 예제는 불필요하게 보일 수 있습니다. 그러나 이 방법은 배열을 다룰 때 필수적이며 데이터의 이름이 각각 다르기 때문에 코드를 여러 번 반복하는 것 외에 다른 해결책은 없습니다.



기타 표현식 속성

  • <html> (attributes)
  • expr: (prefix)
  • class
  • cond
  • data
  • expr
  • id
  • index
  • locked
  • maxwidgets
  • mobile
  • name
  • preferred
  • render
  • reverse
  • showaddelement
  • title
  • type
  • value
  • values
  • var
  • version
  • visible

You may like these posts

  • 구글 블로그에서 방문자에게 날씨 정보를 보여주고 싶을 경우, 사이드바에 위젯을 추가하여 날씨 상황을 표시할 수 있습니다. 인터넷에서 검색을 통해 날씨 상황을 알 수도 있지만 내 블로그를 관리하면서 날씨도 확인할 수 있다면 편리할 것입니다. 이 포스팅에서는 다크스카이에서 제공하는 서비스를 활…
  • 웹을 디자인할 때 맨 먼저 떠올리기 쉬운 것이 바로 색상을 바꾸는 것입니다. 그만큼 색상은 쉽게 자주 변하는 속성 중 하나 입니다. 그런데 웹에서 어떻게 색상을 넣을까요? 색상을 소스 코드로 입력하는 몇 가지 대표적인 방법에 대해 알아보겠습니다. 목차 HEX 색상 #…
  • 기본적으로 3개의 탭을 사용할 수 있으며 하나의 게시물에 최대 4개의 탭을 추가할 수 있습니다. Tabs Post.txt를 다운로드합니다. 텍스트 파일을 열어 기존 코드를 모두 복사합니다. …
  • 구글 캘린더를 이용하면 웹사이트에 달력을 추가할 수 있습니다. 데스크톱뿐만아니라 모바일 앱으로 연동하여 일, 주, 월 단위로 자신의 일정을 쉽게 관리할 수 있습니다. 이 포스팅에서는 구글 블로그 사이드바에 달력 위젯을 추가하는 방법에 대해 알아봅니다. 아래 단계를 따라 천천히 살펴보세요. …
  • Tawk.to는 방문자와 웹 사이트 내에서 실시간으로 소통할 수 있는 100% 무료 온라인 라이브 채팅 서비스입니다. 웹 사이트 방문자를 실시간으로 모니터링할 수 있고, 방문자와 라이브 채팅하고 실시간으로 응답할 수 있는 고객 지원 센터를 만들 수 있습니다. 물론 이 블로그에도 T…
  • 쇼핑몰이나 전자상거래(eCommerce) 사이트에서 상품 리뷰 평점을 매길 때 별점을 사용합니다. 별 모양 특수문자 기호를 사용하여 반만 색칠된 별 모양을 만들 수 있습니다. 하지만 스타일이 잘 꾸며져 있지 않아 별로입니다. 또 다른 방법으로 별 모양 이미지 PNG 파일을 사용하여 투명…

Post a Comment