w3.css

예 표시

w3-panel 클래스는 회색 컨테이너에 예제를 표시하는 데 사용된다.

<div class="w3-panel w3-card w3-light-grey">
  <h3>Example</h3>
  <div class="w3-container w3-white">
    <p>
    <ul class="w3-ul w3-card-4" style="width:50%">
      <li>Jill</li>
      <li>Eve</li>
      <li>Adam</li>
    </ul>
    </p>
  </div>
  <p>A list displayed as a card.</p>
</div>

코드 표시

w3-code 클래스는 읽을 수 있는 고정 폭 글꼴로 코드를 표시하는 데 사용된다.

<div class="w3-panel w3-card w3-light-grey">
  <h3>Example</h3>
  <div class="w3-code notranslate">
    fruits[0] = "Banana";<br>
    fruits[1] = "Apple";<br>
    fruits[2] = "Mango";<br>
    fruits[3] = "Plum";<br>
  </div>
</div>

인라인 코드 강조

w3-codespan 클래스는 인라인 코드를 강조하는 데 사용된다.

html 요소는 HTML 페이지를 정의한다.

예제

The <code class="w3-codespan">html</code> element defines an HTML page.

컬러링 코드

W3Schools는 코드 색상 지정을 위한 JavaScript 라이브러리를 제공한다.

여기에서 라이브러리를 다운로드할 수 있다. https://www.w3schools.com/lib/w3codecolor.js

w3codecolor.js 라이브러리를 사용하는 경우 아래 설명된 코드 클래스를 사용할 수도 있다.

JavaScript 코드 강조 표시

jsHigh 클래스 는 JavaScript 코드를 강조 표시하는 데 사용된다.

예제

<div class="w3-code jsHigh">

.. JavaScript code here

</div>

HTML 코드 강조 표시

htmlHigh 클래스 는 HTML 코드를 강조 표시하는 데 사용된다.

예제

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>

CSS 코드 강조

cssHigh 클래스 는 CSS 코드를 강조하는 데 사용된다.

예제

<div class="w3-code cssHigh">

.. CSS code here

</div>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기