EDR,ASIHCRSS

추가 매크로 목록

Difference between r1.31 and the current

@@ -28,9 +28,37 @@
현재 시간을 실시간으로 보여줍니다.

=== 뒤집히는 카드 ===
[[FlipCard(눌러보세요|밈미|width=350px|height=220px|frontBg=url(https://i.postimg.cc/XJShrhtd/1530889324-IMG-20180701-152356.jpg)|backBg=#34495e|frontColor=#ecf0f1|backColor=#bdc3c7|fontSize=1.1em)]]
{{{#!flipcard
이것은 앞면입니다. 
여러 줄 입력이 아주 잘 됩니다.

{{{ [[FlipCard(앞면 텍스트|뒷면 텍스트(개행은 \n)|width=가로 길이|height=세로 길이|frontBg=앞면 배경색|backBg=뒷면 배경색|frontColor=앞면 글자색|backColor=뒷면 글자색|fontSize=글자 크기)] ]}}}
가독성이 훨씬 좋아졌습니다.
---
여기는 뒷면입니다.
---
width=400px
height=200px
fontSize=1.2em
frontBg=url(https://i.postimg.cc/DzbHyFp7/123124.jpg)
frontColor=white
}}}
 
{{{
{{{#!flipcard
이것은 앞면입니다.
여러 줄 입력이 아주 잘 됩니다.
 
가독성이 훨씬 좋아졌습니다.
---
여기는 뒷면입니다.
---
width=400px
height=200px
fontSize=1.2em
frontBg=#333
frontColor=white
}}}
}}}

fontBg, backBg에 url(이미지 주소) 형식으로 입력하면 이미지 삽입도 가능합니다

@@ -38,9 +66,78 @@
내용 텍스트 뒤에 <style>...</style> 태그로 CSS 스타일을 지정할 수 있습니다.
참고로 <style>에 포함되는 {ID}는 빼거나 수정하면 안됩니다

[[FlipCard(완전한 커스텀 디자인|CSS를 직접 제어합니다.|<style>{ID} { border-radius: 20px;}{ID} .flip-front { background: linear-gradient(45deg, #6a11cb, #2575fc); color: white; font-family: 'Verdana', sans-serif; font-weight: bold;}{ID} .flip-back { background: #f1f3f5; color: #343a40; border: 2px dashed #868e96;}</style>)]]
{{{#!FlipCard 
SYSTEM ONLINE
---
ACCESS GRANTED
---
<style>
/* 전체 카드 컨테이너: 날카로운 모서리와 금속 테두리 */
{ID} {
border-radius: 0;
border: 3px solid #555;
box-shadow: 0 0 15px rgba(180, 180, 180, 0.3);
}
 
/* 앞/뒷면 공통: 어두운 배경, 테두리 제거, 미래적인 폰트 */
{ID} .flip-front, {ID} .flip-back {
background: radial-gradient(ellipse at center, #444 0%, #111 100%);
border: none;
font-family: "D2Coding", "Courier New", monospace;
font-weight: bold;
}
 
/* 앞면: 시안(Cyan) 색상의 네온 텍스트 효과 */
{ID} .flip-front {
color: #0ff;
text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #00aaff, 0 0 70px #00aaff;
}
 
/* 뒷면: 마젠타(Magenta) 색상의 네온 텍스트 효과 */
{ID} .flip-back {
color: #f0f;
text-shadow: 0 0 5px #f0f, 0 0 10px #f0f, 0 0 20px #f0f, 0 0 40px #d0d, 0 0 70px #d0d;
}
</style> 
}}}
 
{{{
{{{#!FlipCard
SYSTEM ONLINE
---
ACCESS GRANTED
---
<style>
/* 전체 카드 컨테이너: 날카로운 모서리와 금속 테두리 */
{ID} { 
border-radius: 0; 
border: 3px solid #555;
box-shadow: 0 0 15px rgba(180, 180, 180, 0.3);
} 
 
/* 앞/뒷면 공통: 어두운 배경, 테두리 제거, 미래적인 폰트 */
{ID} .flip-front, {ID} .flip-back { 
background: radial-gradient(ellipse at center, #444 0%, #111 100%); 
border: none; 
font-family: "D2Coding", "Courier New", monospace; 
font-weight: bold; 
} 
 
/* 앞면: 시안(Cyan) 색상의 네온 텍스트 효과 */
{ID} .flip-front { 
color: #0ff; 
text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #00aaff, 0 0 70px #00aaff;
}
 
/* 뒷면: 마젠타(Magenta) 색상의 네온 텍스트 효과 */
{ID} .flip-back {
color: #f0f; 
text-shadow: 0 0 5px #f0f, 0 0 10px #f0f, 0 0 20px #f0f, 0 0 40px #d0d, 0 0 70px #d0d; 
} 
</style> 
}}}
}}}

* 예시 : {{{ [[FlipCard(완전한 커스텀 디자인|CSS를 직접 제어합니다.|<style>{ID} { border-radius: 20px;}{ID} .flip-front { background: linear-gradient(45deg, #6a11cb, #2575fc); color: white; font-family: 'Verdana', sans-serif; font-weight: bold;}{ID} .flip-back { background: #f1f3f5; color: #343a40; border: 2px dashed #868e96;}</style>)]] }}}
------
FlipCard 매크로의 주요 CSS 클래스

@@ -144,5 +241,26 @@
=== 세로 탭 ===
[[VerticalTabs(메뉴1=첫 번째 탭의 내용입니다.\n줄바꿈도 잘 됩니다.|메뉴2=두 번째 탭의 내용입니다.|메뉴3=세 번째 탭의 내용입니다.)]]

{{{#!folding 고급 설정용
내용 텍스트 뒤에 <style>...</style> 태그로 CSS 스타일을 지정할 수 있습니다.
참고로 <style>에 포함되는 {ID}는 빼거나 수정하면 안됩니다

[[VerticalTabs(⚙️ 일반 설정=여기에서 사이트의 일반 설정을 변경할 수 있습니다.\n기본 언어, 시간대 등을 설정합니다.|👤 프로필 관리=사용자 이름, 이메일 주소, 프로필 사진을 업데이트할 수 있습니다.|🔒 보안=비밀번호를 변경하거나 2단계 인증(2FA)을 설정하여 계정을 보호하세요.|<style>{ID} { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; font-family: 'Malgun Gothic', sans-serif; }{ID} .v-tab-menu { background-color: #2d3748; border-right: none; min-width: 180px; }{ID} .v-tablinks { color: #a0aec0; border:none; text-align: left; padding: 15px 20px; font-size:15px; border-left: 4px solid transparent; }{ID} .v-tablinks:hover { background-color: #4a5568; color: #fff; }{ID} .v-tablinks.active { background-color: #1a202c; color: #fff; font-weight: 600; border-left-color: #4299e1; }{ID} .v-tabcontent-container { border: none; }{ID} .v-tabcontent-inner { padding: 20px 25px; line-height: 1.6; }</style>)]]
 
* 예시 : {{{ [[VerticalTabs(⚙️ 일반 설정=여기에서 사이트의 일반 설정을 변경할 수 있습니다.\n기본 언어, 시간대 등을 설정합니다.|👤 프로필 관리=사용자 이름, 이메일 주소, 프로필 사진을 업데이트할 수 있습니다.|🔒 보안=비밀번호를 변경하거나 2단계 인증(2FA)을 설정하여 계정을 보호하세요.|<style>{ID} { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; font-family: 'Malgun Gothic', sans-serif; }{ID} .v-tab-menu { background-color: #2d3748; border-right: none; min-width: 180px; }{ID} .v-tablinks { color: #a0aec0; border:none; text-align: left; padding: 15px 20px; font-size:15px; border-left: 4px solid transparent; }{ID} .v-tablinks:hover { background-color: #4a5568; color: #fff; }{ID} .v-tablinks.active { background-color: #1a202c; color: #fff; font-weight: 600; border-left-color: #4299e1; }{ID} .v-tabcontent-container { border: none; }{ID} .v-tabcontent-inner { padding: 20px 25px; line-height: 1.6; }</style>)]] }}}
------
VerticalTabs 매크로의 주요 CSS 클래스
 
{ID}: 탭 전체를 감싸는 최상위 컨테이너입니다. display: flex 속성으로 왼쪽 메뉴와 오른쪽 콘텐츠 영역을 나눕니다.
 
{ID} .v-tab-menu: 왼쪽의 세로 메뉴 버튼들을 담고 있는 컨테이너입니다. 메뉴 영역의 너비나 배경색을 지정할 수 있습니다.
 
{ID} .v-tablinks: 메뉴 영역에 있는 개별 버튼 하나하나입니다. 폰트 크기, 색상, 배경, 안쪽 여백 등을 제어합니다.
 
{ID} .v-tablinks.active: 현재 선택되어 활성화된 메뉴 버튼입니다. 다른 버튼과 구별되도록 배경색이나 글자색, 테두리 등을 다르게 스타일링합니다.
 
{ID} .v-tabcontent-container: 오른쪽의 콘텐츠 영역 전체를 감싸는 컨테이너입니다.
 
{ID} .v-tabcontent-inner: 실제 내용이 들어가는 영역으로, 안쪽 여백(padding)을 제어합니다.
}}}



File does not exist
Random