편집 요약 없음 |
편집 요약 없음 |
||
(사용자 2명의 중간 판 10개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
{{namucat|김찬/제작한 틀|문법 편의 틀}} | |||
{{틀 도움}} | |||
{{알림창|틀 문법이 수정되었습니다. 사용 시 {{code|<nowiki>{{div|atr=속성|내용}}</nowiki>}}으로 수정해 주세요.}} | |||
<onlyinclude><div {{{atr|}}}>{{{1|}}}</div></onlyinclude> | |||
{{관련 문서2|틀:span}} | |||
== 설명 == | == 설명 == | ||
특별한 기능이나 용도가 있는 틀은 아니고, 단순히 div 태그를 틀로 입력할 수 있는 틀입니다. style, class, id 변수가 있으며 각 변수에 입력하고자 하는 HTML CSS 코드를 입력하면 됩니다. | 특별한 기능이나 용도가 있는 틀은 아니고, 단순히 div 태그를 틀로 입력할 수 있는 틀입니다. style, class, id 변수가 있으며 각 변수에 입력하고자 하는 HTML CSS 코드를 입력하면 됩니다. 이 셋에 국한되지 않더라도 다른 태그도 마찬가지로 어느 변수에든 함께 입력하면 적용됩니다. | ||
틀 변수 안에서는 div나 span 등 HTML 태그를 사용할 수 없으므로(태그 사용 시 내용이 보이지 않는 현상이 있습니다.) 틀 변수 안에서 div 태그를 쉽게 사용하기 위해 만들어졌습니다. | 틀 변수 안에서는 div나 span 등 HTML 태그를 사용할 수 없으므로(태그 사용 시 내용이 보이지 않는 현상이 있습니다.) 틀 변수 안에서 div 태그를 쉽게 사용하기 위해 만들어졌습니다. | ||
예를 들어<br> | 예를 들어<br> | ||
{{폰트|monospace|<nowiki>{{div|style=display: inline-block; background: linear-gradient(to right, #ffb9b9, #ffdeb7, #fffdbb, #b4eca4, #aceeff, #9cb1ff, #e9c0ff); width: 100px; height: 100px; transform: rotate(45deg);|기울어진 무지개}}</nowiki>}}<br> | {{폰트|monospace|<nowiki>{{div|atr=style="display: inline-block; background: linear-gradient(to right, #ffb9b9, #ffdeb7, #fffdbb, #b4eca4, #aceeff, #9cb1ff, #e9c0ff); width: 100px; height: 100px; transform: rotate(45deg);"|기울어진 무지개}}</nowiki>}}<br> | ||
이렇게 입력하면<br> | 이렇게 입력하면<br> | ||
{{폰트|monospace|<nowiki><div style="display: inline-block; background: linear-gradient(to right, #ffb9b9, #ffdeb7, #fffdbb, #b4eca4, #aceeff, #9cb1ff, #e9c0ff); width: 100px; height: 100px; transform: rotate(45deg);">기울어진 무지개</div></nowiki>}}<br> | {{폰트|monospace|<nowiki><div style="display: inline-block; background: linear-gradient(to right, #ffb9b9, #ffdeb7, #fffdbb, #b4eca4, #aceeff, #9cb1ff, #e9c0ff); width: 100px; height: 100px; transform: rotate(45deg);">기울어진 무지개</div></nowiki>}}<br> | ||
15번째 줄: | 18번째 줄: | ||
<div style="display: inline-block; background: linear-gradient(to right, #ffb9b9, #ffdeb7, #fffdbb, #b4eca4, #aceeff, #9cb1ff, #e9c0ff); width: 100px; height: 100px; transform: rotate(45deg);">기울어진 무지개</div> | <div style="display: inline-block; background: linear-gradient(to right, #ffb9b9, #ffdeb7, #fffdbb, #b4eca4, #aceeff, #9cb1ff, #e9c0ff); width: 100px; height: 100px; transform: rotate(45deg);">기울어진 무지개</div> | ||
{{여백}} | {{여백}} | ||
이 틀의 [[틀:span|span]] 버전도 존재합니다. | |||
== 둘러보기 == | == 둘러보기 == | ||
{{김찬 제작 틀}} | {{김찬 제작 틀}} | ||
{{문서 가져옴|틀:div/설명문서}} |
2023년 11월 25일 (토) 14:55 기준 최신판
틀:div | |
---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
{{div|atr=속성|내용}}
으로 수정해 주세요.관련 문서: 틀:span
설명
특별한 기능이나 용도가 있는 틀은 아니고, 단순히 div 태그를 틀로 입력할 수 있는 틀입니다. style, class, id 변수가 있으며 각 변수에 입력하고자 하는 HTML CSS 코드를 입력하면 됩니다. 이 셋에 국한되지 않더라도 다른 태그도 마찬가지로 어느 변수에든 함께 입력하면 적용됩니다.
틀 변수 안에서는 div나 span 등 HTML 태그를 사용할 수 없으므로(태그 사용 시 내용이 보이지 않는 현상이 있습니다.) 틀 변수 안에서 div 태그를 쉽게 사용하기 위해 만들어졌습니다.
예를 들어
{{div|atr=style="display: inline-block; background: linear-gradient(to right, #ffb9b9, #ffdeb7, #fffdbb, #b4eca4, #aceeff, #9cb1ff, #e9c0ff); width: 100px; height: 100px; transform: rotate(45deg);"|기울어진 무지개}}
이렇게 입력하면
<div style="display: inline-block; background: linear-gradient(to right, #ffb9b9, #ffdeb7, #fffdbb, #b4eca4, #aceeff, #9cb1ff, #e9c0ff); width: 100px; height: 100px; transform: rotate(45deg);">기울어진 무지개</div>
이렇게 인식되어 다음과 같이 출력됩니다.
이 틀의 span 버전도 존재합니다.