틀:작게 블록
{{{1}}}
이 틀은 형식에 자세한 내용은 문:DIVSPAN을 참고하십시오. |
| 이 틀은 틀스타일을 사용합니다. |
사용법
[편집]일반 형태
[편집]이 틀은 블록 텍스트의 글꼴 크기를 크거나 작게 만듭니다.
예시:
{{작게 블록|{{lorem ipsum}}}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
블록 텍스트 내 일부 텍스트만의 글꼴 크기를 바꾸려면, 적절한 인라인 (<span>) 틀을 사용하십시오. 인라인 틀을 사용하면 강제 개행 등 블록 요소의 중복으로 발생하는 문제를 우회할 수 있습니다.
시작·끝 틀
이 틀은 내용이 여러 페이지에 걸쳐 있는 경우를 위해 시작·끝 형태로도 사용할 수 있습니다. 자세한 사항은 위키문헌:페이지 나누기 문서를 참고하십시오.
- 예시
{{작게 블록/시작}}{{lorem ipsum}}{{lorem ipsum}}{{작게 블록/끝}}
기술적 설명
[편집]모바일 스킨 덮어쓰기
[편집]MobileFrontend 확장기능에서는 다음과 같은 CSS 코드를 추가합니다.
.mf-font-size-clientpref-small .mw-body p,
.mf-font-size-clientpref-small .content p {
font-size:1rem;
}
이로 인해 <p>...</p>로 둘러싸인 모든 내용은 글꼴 크기가 강제로 1rem(브라우저의 기본 글꼴 크기, 보통 16px)으로 고정됩니다. 이 코드는 틀에 의한 글꼴 설정을 덮어씌우므로 모든 글자의 크기가 동일하게 표시되는 결과를 낳습니다. 여기에 과거 regex 파서를 사용하던 시절의 잔재로 "p-wrapping"이 있는데, 이로 인해 <p>...</p> 태그를 사용하지 않은 문단 중 일부가 <p>...</p> 태그로 감싸지는 것으로 처리되어, MobileFrontend 확장기능으로 인해 똑같이 1rem 크기로 강제되기도 합니다.
이 문제를 우회하기 위해 이 틀의 틀스타일에는 모든 <p>...</p> 요소의 글꼴 크기를 상속(inherit)으로 지정하는 내용이 포함되어 있습니다.
.wst-size-block p {
font-size: inherit;
}
이 코드로 인해 모바일과 데스크톱을 가리지 않고 예상하지 못한 오류가 발생할 수도 있습니다.
참고
[편집]위키문헌의 모든 크기 조절 틀은 기본 크기를 기준으로 상대적으로 조절하는 형식으로 작동합니다. 크기 틀에는 인라인 및 블록 두 종류가 있습니다. 인라인 틀은 단락 내부에서 사용하기 적합하나, 단락 구분(줄바꿈)을 처리하지 못하며, 줄 간격을 조절할 수 없습니다. 블록 틀은 단락 구분을 처리하고 줄 간격을 조절할 수 있지만, 단락 내에서 사용하기에는 적합하지 않습니다. 자세한 내용은 문:DIVSPAN을 참고하십시오.
상대적 크기 차이에 따른 글꼴 크기
| 하단의 나열된 틀은 줄 간격과 관련하여 공통적으로 다음과 같은 특징이 있습니다. 100%보다 큰 글꼴의 줄 간격은 글꼴 크기에 비례하여 증가합니다. 100%보다 작은 글꼴의 줄 간격은 100%에 해당하는 글꼴의 줄 간격을 그대로 사용하며, 비례하여 감소하지 않습니다. 따라서, 글꼴이 작을수록 줄 사이의 거리는 멀어집니다. 줄 간격을 조정하기 위해서는 {{글꼴 크기}}, {{글꼴 크기 조정}}, {{글꼴 크기 기본}}을 참고하십시오. |
| 인라인 틀 | 블록 틀 | 크기 | 12pt/16px 기본값[1] |
예시 |
|---|---|---|---|---|
| {{더더더더작게}} | — | 41% | 5pt/6.7px | Lorem ipsum dolor sit amet, |
| {{더더더작게}} | — | 50% | 6pt/8px | Lorem ipsum dolor sit amet, |
| {{더더작게}} | {{더더작게 블록}} | 58% | 7pt/9px | Lorem ipsum dolor sit amet, |
| {{더작게}} | {{더작게 블록}} | 69% | 8pt/11px | Lorem ipsum dolor sit amet, |
| {{작게}} | {{작게 블록}} | 83% | 10pt/13px | Lorem ipsum dolor sit amet, |
| {{가늘게}} | {{가늘게 블록}} | 92% | 11pt/15px | Lorem ipsum dolor sit amet, |
| — | — | 100% | 12pt/16px | Lorem ipsum dolor sit amet, |
| {{덜크게}} | {{덜크게 블록}} | 110% | 13pt/18px | Lorem ipsum dolor sit amet, |
| {{크게}} | {{크게 블록}} | 120% | 14pt/19px | Lorem ipsum dolor sit amet, |
| {{더크게}} | {{더크게 블록}} | 144% | 17pt/23px | Lorem ipsum dolor sit amet, |
| {{더더크게}} | {{더더크게 블록}} | 182% | 22pt/29px | Lorem ipsum dolor sit amet, |
| {{더더더크게}} | {{더더더크게 블록}} | 207% | 25pt/33px | Lorem ipsum dolor sit amet, |
| {{더더더더크게}} | {{더더더더크게 블록}} | 249% | 30pt/40px | Lorem ipsum dolor sit amet, |
- ↑ 현대 웹 브라우저는 대부분 기본 글꼴 크기를 12pt 또는 16px로 표준화하여 사용합니다.
틀데이터
[편집]설명이 없습니다.
| 매개변수 | 설명 | 형식 | 상태 | |
|---|---|---|---|---|
| 1 | 1 | Text to apply font-sizing to. | 문자열 | 선택 사항 |
| class | class | Additional CSS classes to apply. | 문자열 | 선택 사항 |
| style | style | Additional CSS styles to apply. | 문자열 | 선택 사항 |
| 위 설명은 틀:글꼴 크기 블록/설명문서의 내용을 가져와 보여주고 있습니다. (편집 | 역사) 연습장 (생성 | 복제) 및 시험장 (생성) 문서에서 이 틀을 실험할 수 있습니다. 이 틀에 딸린 문서. |