EDR,ASIHCRSS

추가 매크로 목록

Difference between r1.25 and the current

@@ -5,60 +5,262 @@
== 텍스트 꾸밈 ==
=== 타이핑 효과 ===
[[TypingEffect(타이핑 효과입니다. 페이지가 로드될 때 효과가 나타납니다.|0.05)]]
{{{[[TypingEffect(텍스트(개행은 \n)|타이핑 속도(초 단위)]]}}}
{{{ [[TypingEffect(텍스트(개행은 \n)|타이핑 속도(초 단위)]] }}}

=== 흐르는 텍스트 ===
[[MarqueeText(흐르는 텍스트입니다.|speed=8s|color=black|fontsize=15px|direction=right|bgcolor=skyblue)]]
{{{[[MarqueeText(흐르는 텍스트입니다.|speed=흐르는 속도(초 단위)|color=글자색|fontsize=글자 크기|direction=흐르는 방향|bgcolor=배경색)]]}}}
{{{ [[MarqueeText(흐르는 텍스트입니다.|speed=흐르는 속도(초 단위)|color=글자색|fontsize=글자 크기|direction=흐르는 방향|bgcolor=배경색)]] }}}

== 이미지 관련 ==
=== 슬라이드쇼 ===
[[ImageSlideshow(https://i.postimg.cc/DzbHyFp7/123124.jpg, https://i.postimg.cc/4d60VPTM/1529640292.jpg, https://i.postimg.cc/XJShrhtd/1530889324-IMG-20180701-152356.jpg, https://i.postimg.cc/FH6w41ZP/1536386468165b2fda0bc4a354f.jpg|width=300px|height=300px|interval=3)]]
{{{[[ImageSlideshow(이미지 주소(여러장은 콤마로 구분)|width=가로 길이|height=세로 길이|interval=슬라이드 자동 전환 시간(초 단위)]]}}}
{{{ [[ImageSlideshow(이미지 주소(여러장은 콤마로 구분)|width=가로 길이|height=세로 길이|interval=슬라이드 자동 전환 시간(초 단위)]] }}}

=== 갤러리 ===
[[ImageGallery(https://i.postimg.cc/DzbHyFp7/123124.jpg|클릭하면 확대돼요,https://i.postimg.cc/4d60VPTM/1529640292.jpg|개조심,https://i.postimg.cc/XJShrhtd/1530889324-IMG-20180701-152356.jpg|꽉낀밈미)]]
{{{[[ImageGallery(이미지 주소|캡션(생략 가능),여러개는 쉼표로 구분)]]}}}
{{{ [[ImageGallery(이미지 주소|캡션(생략 가능),여러개는 쉼표로 구분)]] }}}

== 기타 ==
=== 실시간 시계 ===
[[LiveClock]]
{{{[[LiveClock]]}}}
{{{ [[LiveClock]] }}}

현재 시간을 실시간으로 보여줍니다.

=== 뒤집히는 카드 ===
[[FlipCard(눌러\n보세용|와!\n와!|width=50%|height=250px|frontBg=#e0f7fa|backBg=url(https://i.postimg.cc/4d60VPTM/1529640292.jpg)|frontColor=#006064|backColor=#bf360c|fontSize=18px)]]
{{{[[FlipCard(앞면 텍스트|뒷면 텍스트(개행은 \n)|width=가로 길이|height=세로 길이|frontBg=앞면 배경색|backBg=뒷면 배경색|frontColor=앞면 글자색|backColor=뒷면 글자색|fontSize=글자 크기)]]}}}
{{{#!flipcard
이것은 앞면입니다.
여러 줄 입력이 아주 잘 됩니다.
 
가독성이 훨씬 좋아졌습니다.
---
여기는 뒷면입니다.
---
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(이미지 주소) 형식으로 입력하면 이미지 삽입도 가능합니다

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

[[FlipCard(Hello|World!|<style>#{id} { width: 400px; height: 250px; border-radius: 16px;}#{id} .flip-front { background: linear-gradient(45deg, #6a11cb, #2575fc); color: white; font-family: 'Courier New', monospace; font-size: 1.5em;}#{id} .flip-back { background: #f0f0f0; color: #222; font-family: Arial, sans-serif; font-size: 1.2em;}</style>)]]
* 예시 : {{{[[FlipCard(Hello|World!|<style>#{id} { width: 400px; height: 250px; border-radius: 16px;}#{id} .flip-front { background: linear-gradient(45deg, #6a11cb, #2575fc); color: white; font-family: 'Courier New', monospace; font-size: 1.5em;}#{id} .flip-back { background: #f0f0f0; color: #222; font-family: Arial, sans-serif; font-size: 1.2em;}</style>)]]}}}
참고로 <style>에 포함되는 #{ID}는 빼거나 수정하면 안됩니다
{{{#!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);
}

https://i.postimg.cc/t70Lk9bD/flipcard.png
/* 앞/뒷면 공통: 어두운 배경, 테두리 제거, 미래적인 폰트 */ 
{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 클래스
 
1. {ID}
설명: 카드 전체를 감싸는 최상위 컨테이너입니다. 카드의 전체적인 크기, 위치, 3D 효과의 깊이 등을 제어합니다.
주요 기본 속성 및 역할:
width, height: 카드의 너비와 높이를 결정합니다.
perspective: 3D 뒤집기 효과의 원근감(깊이)을 설정합니다. 값이 클수록 효과가 밋밋해지고, 작을수록 왜곡이 심해집니다.
cursor: pointer: 마우스를 올렸을 때 클릭할 수 있다는 것을 알려주는 손가락 모양 커서입니다.
margin: 카드 주변의 바깥 여백입니다.
 
2. {ID} .flip-inner
설명: 카드 앞면과 뒷면을 실제로 감싸고, 회전 애니메이션이 일어나는 핵심 요소입니다.
주요 기본 속성 및 역할:
transition: 뒤집히는 애니메이션의 속도를 제어합니다. (예: transition: transform 0.6s;는 0.6초 동안 뒤집힌다는 의미)
transform-style: preserve-3d: 자식 요소들(앞면, 뒷면)이 3D 공간에 함께 있도록 만듭니다. 이 속성이 없으면 카드가 평면적으로 뒤집힙니다.
 
3. {ID} .flip-front, {ID} .flip-back
설명: 앞면과 뒷면 모두에게 공통으로 적용되는 스타일을 정의하는 부분입니다. 여기서 글자의 정렬, 테두리, 그림자, 안쪽 여백 등을 한 번에 제어할 수 있습니다.
주요 기본 속성 및 역할:
border: 카드의 테두리 스타일입니다.
border-radius: 카드의 모서리를 둥글게 만듭니다.
box-shadow: 카드에 그림자 효과를 줍니다.
display: flex, align-items: center, justify-content: center: 카드 안의 텍스트를 수직/수평 중앙에 정렬시킵니다.
padding: 카드 테두리와 내부 텍스트 사이의 안쪽 여백입니다.
font-size: 기본 글자 크기입니다.
 
4. {ID} .flip-front
설명: 앞면에만 적용되는 스타일을 정의합니다. 주로 배경색이나 글자색을 개별적으로 지정할 때 사용합니다.
주요 기본 속성 및 역할:
background, color 등
 
5. {ID} .flip-back
설명: 뒷면에만 적용되는 스타일을 정의합니다.
주요 기본 속성 및 역할:
background, color 등
transform: rotateY(180deg): 뒷면을 미리 180도 뒤집어 놓아, 전체가 회전할 때 올바른 면이 보이도록 준비시킵니다.
 
6. {ID}.flipped .flip-inner (상태 클래스)
설명: 사용자가 카드를 클릭했을 때 적용되는 스타일입니다. .flipped 클래스는 클릭 시 {ID} 컨테이너에 동적으로 추가됩니다.
주요 기본 속성 및 역할:
transform: rotateY(180deg): .flip-inner 요소를 Y축(세로축) 기준으로 180도 회전시켜 뒷면이 보이게 합니다.
(응용): 이 부분을 transform: rotateX(180deg);로 바꾸면 카드가 세로가 아닌 가로로 뒤집히는 효과를 만들 수 있습니다.
}}}

=== 탭 ===
[[Tabs(소개=소개\n내용|예시=예시 내용)]]
{{{[[Tabs(탭 제목=탭 내용(여러 탭은 |로 구분, 개행은 \n)]]}}}
[[Tabs(소개=이것은 탭 매크로의 기본 예시입니다.|특징=파이프로 탭을 구분하고, 등호(=)로 제목과 내용을 구분합니다.|기타=내용에 줄바꿈이 필요하면\n이렇게)]]
{{{ [[Tabs(소개=이것은 탭 매크로의 기본 예시입니다.|특징=파이프로 탭을 구분하고, 등호(=)로 제목과 내용을 구분합니다.|기타=내용에 줄바꿈이 필요하면\n이렇게)]] }}}

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

[[Tabs(소개=소개 내용|예시=예시 내용|<style>#{ID} .tablinks { background-color: pink; color: purple; }#{ID} .tablinks.active { background-color: purple; color: white; }</style>)]]
* 예시 : {{{[[Tabs(소개=소개 내용|예시=예시 내용|<style>#{ID} .tablinks { background-color: pink; color: purple; }#{ID} .tablinks.active { background-color: purple; color: white; }</style>)]]}}}
참고로 <style>에 포함되는 #{ID}는 빼거나 수정하면 안됩니다
[[Tabs(홈=홈 탭의 내용입니다. 동글동글한 디자인을 확인해보세요.|프로필=사용자 프로필 정보입니다.|설정=각종 설정을 변경하는 곳입니다.|<style>{ID} .tabheaders { border-bottom: 1px solid #ddd; padding-bottom: 5px; }{ID} .tablinks { border: 1px solid #ddd; border-radius: 20px; background: white; margin: 0 4px; color: #555; font-weight: 500; border-bottom: 1px solid #ddd; }{ID} .tablinks:hover { background: #f0f0f0; border-color: #ccc; }{ID} .tablinks.active { background: #007bff; color: white; border-color: #007bff; font-weight: bold; }{ID} .tabcontent { border: none; padding-top: 20px; }</style>)]]

https://i.postimg.cc/cHmH16mn/tabs.png
* 예시 : {{{ [[Tabs(홈=홈 탭의 내용입니다. 동글동글한 디자인을 확인해보세요.|프로필=사용자 프로필 정보입니다.|설정=각종 설정을 변경하는 곳입니다.|<style>{ID} .tabheaders { border-bottom: 1px solid #ddd; padding-bottom: 5px; }{ID} .tablinks { border: 1px solid #ddd; border-radius: 20px; background: white; margin: 0 4px; color: #555; font-weight: 500; border-bottom: 1px solid #ddd; }{ID} .tablinks:hover { background: #f0f0f0; border-color: #ccc; }{ID} .tablinks.active { background: #007bff; color: white; border-color: #007bff; font-weight: bold; }{ID} .tabcontent { border: none; padding-top: 20px; }</style>)]] }}}
------
Tabs 매크로의 주요 CSS 클래스
 
1. {ID}
설명: 탭 기능 전체(버튼 영역 + 내용 영역)를 감싸는 최상위 컨테이너입니다. 전체적인 폰트나 아래쪽 여백 등을 설정할 수 있습니다.
주요 기본 속성 및 역할:
font-family: 탭 전체의 기본 글꼴을 지정합니다.
margin-bottom: 탭 컴포넌트 아래에 생성되는 바깥 여백입니다.
 
2. {ID} .tabheaders
설명: 모든 탭 버튼(tablinks)들을 담고 있는 컨테이너입니다. 이 클래스를 이용해 버튼들이 나열된 전체 바의 스타일을 제어할 수 있습니다.
주요 기본 속성 및 역할:
기본 스타일은 없지만, 버튼들을 정렬하거나(예: text-align: center;) 버튼 영역 전체에 밑줄을 긋는 등의 디자인을 적용할 때 유용합니다.
 
3. {ID} .tablinks
설명: 각 탭의 제목이 되는 개별 버튼입니다. 탭 디자인의 핵심이 되는 부분입니다.
주요 기본 속성 및 역할:
background-color: 버튼의 배경색입니다.
border, border-radius: 버튼의 테두리와 모서리 둥글기입니다.
padding: 버튼 내부의 여백입니다.
cursor: pointer: 클릭 가능하다는 것을 알려주는 손가락 모양 커서입니다.
color: 버튼의 글자색입니다.
 
4. {ID} .tablinks:hover
설명: 사용자가 탭 버튼에 마우스를 올렸을 때 적용되는 스타일입니다.
주요 기본 속성 및 역할:
background-color: 마우스를 올렸을 때 버튼의 배경색이 살짝 어두워지도록 설정되어 있습니다.
 
5. {ID} .tablinks.active
설명: 현재 선택되어 활성화된 탭 버튼에만 적용되는 스타일입니다. 사용자가 어떤 탭을 보고 있는지 시각적으로 알려주는 중요한 부분입니다.
주요 기본 속성 및 역할:
background-color: 활성화된 탭의 배경색을 다르게 설정합니다. (기본값: 흰색)
font-weight: bold: 글자를 굵게 만들어 강조합니다.
color: 활성화된 탭의 글자색을 다르게 설정합니다.
border-bottom: 아래쪽 테두리 스타일을 다르게 주어 연결된 내용처럼 보이게 합니다.
 
6. {ID} .tabcontent
설명: 탭 내용이 표시되는 영역입니다.
주요 기본 속성 및 역할:
border: 내용 영역의 테두리입니다.
padding: 테두리와 실제 내용 사이의 안쪽 여백입니다.
background-color: 내용 영역의 배경색입니다.
}}}

=== 세로형 탭 ===
[[VerticalTabs(Tab1=첫 번째 탭 내용\n줄바꿈 가능합니다|Tab2=두 번째 탭 내용|width=500px|height=250px|fontSize=16px)]]
=== 세로 탭 ===
[[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