사전 태그 스타일을 사용할 때 주의할 사항

 태그를 사용 중일 수 있습니다. 이것은 HTML 내의 공백이 실제로 표시되도록 하는 매우 특별한 태그입니다. 예를 들어, 4개의 공백은 실제로 4개의 공백으로 나타납니다. 이는 태그 사이의 공백을 하나로 압축하는 일반적인 태그와 다릅니다. 이러한 관점에서 <pre class="brush:php;toolbar:false"> 태그는 정말 유용합니다. <h3>
​<pre class="brush:php;toolbar:false"> 태그 내에 <code> 태그를 사용하고 있습니까? </code>

 태그의 "pre"는 "미리 서식이 지정된 텍스트"(미리 서식이 지정된 텍스트)를 의미하며, 내부 텍스트 내용에 대한 특별한 규정은 없습니다. <code> 태그의 의미는 태그 안의 텍스트가 코드임을 나타냅니다. 이는 코드 조각을 표시해야 할 때 특히 유용합니다. 예를 들면 다음과 같습니다. <pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

설명하자면,

<code>와 코드 사이에 개행 문자가 있는데, 이 역시 빈 줄로 표시되어 매우 짜증납니다. 이 문제를 해결하는 좋은 CSS 방법은 없습니다. 가장 좋은 방법은 <pre class="brush:php;toolbar:false"> 태그와 같은 줄에서 코드를 시작하거나 컴파일러를 사용하여 여기서 줄 바꿈을 제거하는 것입니다. <p style="text-align: center">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/007/0d1d239a75cc159e4746f3c705f17de8-0.jpg" class="lazy" alt="Screen Shot 2016-05-21 at 9.02.25 AM.png"></p><h3>
글꼴 선택 </h3><p>
</p><pre class="brush:php;toolbar:false"> 태그는 주로 코드 블록을 표시하는 데 사용되며 코드는 일반적으로 고정 너비 글꼴을 사용하므로 <pre class="brush:php;toolbar:false">의 스타일 글꼴을 고정 너비 글꼴로 설정하는 것이 좋습니다. <p>
다행스럽게도 브라우저 기본 글꼴은 이미 </p><pre class="brush:php;toolbar:false"> 고정 너비 글꼴로 설정되어 있으므로 이를 사용할 수 없습니다. 물론 원하는 글꼴을 설정할 수도 있습니다. <p>
다음은 "글꼴 스택"을 연구한 Michael Tuck이 2009년에 작성한 기사입니다. 글꼴 스택은 글꼴 모음 태그에 글꼴 그룹을 나열하는 것을 의미하며, 선호하는 글꼴은 앞에 나열되고 대체 글꼴은 순서대로 나열됩니다. 그의 고정 폭 글꼴 스택은 크로스 플랫폼 시스템에 사전 설치된 글꼴을 잘 활용합니다. </p>아아아아<p style="text-align: center">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/007/3ad18ef6b132cf037ee4e7c76af97da6-1.jpg" class="lazy" alt="사전 태그 스타일을 사용할 때 주의할 사항"></p><p>
현재 글꼴 스택이 더 이상 사용되지 않는지 확실하지 않지만 좋은 시작입니다. </p><p>
또한 사용자 정의 글꼴을 사용할 수도 있습니다. 또는 타사 서비스를 이용하세요. 이 글을 쓰는 동안 Typekit은 23개의 고정 폭 글꼴을 제공합니다. </p><h3>
접을 것인가 말 것인가? </h3><p>
이것은 개인적인 취향에 관한 것입니다. 개인적으로 두 가지 상황이 있습니다. </p><p>
편집기에서 직접 코드를 작성할 때 가로 스크롤 막대가 나타나지 않고 코드가 자동으로 줄 바꿈되는 경향이 있습니다. 그리고 기사의 코드를 읽을 때 코드가 깨지지 않는 점이 마음에 듭니다. 나는 이것이 이상하다는 것을 안다. CodePen에서는 모든 사람이 각자의 선호도를 가지고 있기 때문에 사용자가 중단할지 여부를 선택할 수 있는 옵션을 제공합니다. </p><p style="text-align: center">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/007/3ad18ef6b132cf037ee4e7c76af97da6-2.gif" class="lazy" alt="사전 태그 스타일을 사용할 때 주의할 사항"></p><p>
코드를 표시할 때 줄바꿈 여부를 선택해야 합니다. 래핑을 선택했다면 다행히 </p><pre class="brush:php;toolbar:false">font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", 
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", 
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

와 같이

 태그에 제공된 고유한 스타일을 사용하여 래핑하는 동안 공백을 유지할 수 있습니다.
줄 바꿈을 원하지 않으면 위와 같이 할 필요는 없지만 줄이 너무 길면 어떻게 되는지 고려해야 합니다. 행이 너무 길면 고정 너비 컨테이너가 늘어나거나 해당 경계를 초과할 수 있습니다. 이를 방지하려면 가로 스크롤 막대를 추가하는 것이 좋습니다: <pre class="brush:php;toolbar:false">pre {
  white-space: pre-wrap;
}

최대 높이를 지정하려면 max-height를 고려하고, 코드 블록이 너무 커지는 것을 방지하려면 모든 스크롤 막대를 허용하기 위해 Overflow:auto를 고려할 수도 있습니다.

적응형으로 만들어야 할 수도 있습니다

아마도 당신을 포함한 일부 사람들은 줄 바꿈이나 스크롤을 좋아하지 않습니다. 이런 상황에도 해결책이 있습니다.

를 기본 컨테이너 너비로 유지할 수 있지만 상호작용 중에 확장되도록 허용할 수 있습니다. <pre class="brush:php;toolbar:false">pre {
  overflow-x: auto;
}

이메일이라면 어떨까요?

어떤 이유로 HTML이 이메일에 사용되었을 수도 있습니다. CSS가 이메일에 적용되지 않기 때문에 일부 태그는 이메일에 문제가 있을 수 있습니다. 따라서 특히 줄 바꿈이 없는 긴 텍스트가 있는 경우 이메일의 레이아웃이 깨질 수 있습니다.

CSS-Tricks에서는 전자 신문을 자동으로 생성하기 위해 RSS 피드를 사용해야 합니다. 따라서 RSS 피드를 생성할 때 모든

 태그가 다음과 같이 인라인 스타일을 추가하도록 하는 특별한 처리 HTML이 필요합니다. <pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

　　这是我所能做的保证代码块中很长的一行不会破坏掉布局。（一般我们除了加上面的那个外，还加上 word-wrap: break-word 和 word-break: break-all —— 译者注）

　　你需要代码语法高亮吗？

　　网上不乏各种语法高亮方案，你可以搜索自己喜欢的方案。我个人推崇 Prism.js，因为：

1. 它代码量少。

2. 
   

3. 它无依赖。

4. 
   

5. 它对标签的 class 起名起的好。

6. 
   

7. 它允许你 copy 它的代码自己修改和定制。

　　除非从 server 端直接生成 的样式（用来语法分色），不然 Prism.js 已经足够好了。

　　你标注了代码是什么语言了吗？

　　我个人比较喜欢在代码块上标准出使用的语言。

　　比如：

　　标记出语言的其中一种方式是通过 data-* 属性（可能你的语法高亮工具也已经要求你标记出）然后显示它，例如：

<pre class="brush:php;toolbar:false"><code>
  <h1 id="Example-code">Example code</h1>
<code></code></code>

pre[data-lang]::before {
  content: attr(data-lang);
  display: block;
}

　　我想这也不是一种特别简单的方法，所以可能一些人只是简单在代码里注释一下。也许用 title 属性是更好的选择？

　　控制空格

　　如果你使用 tab 来缩进，你可能会觉得缩进太宽了。

　　默认情况下，tab 被按照 8 个空格来渲染，这很荒唐。

　　在写代码的时候，我们通常让 tab 宽度为 4 个空格。幸运地，你可以用样式控制它：

pre {
  tab-width: 4;
}

　　就我个人而言，我喜欢直接用空格缩进。

　　其他选择

　　努力让代码块很好地展示在网页上可不是一件琐事，它是值得做的工作。如果你不想自己做这些工作，CodePen 提供了内嵌版可以很好地演示代码（还可以预览），内嵌 GitHub Gists 也是一个不错的选择。

위 내용은 사전 태그 스타일을 사용할 때 주의할 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!