w3.css
예 표시
w3-panel 클래스는 회색 컨테이너에 예제를 표시하는 데 사용된다.
Example
- Jill
- Eve
- Adam
A list displayed as a card.
<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 클래스는 읽을 수 있는 고정 폭 글꼴로 코드를 표시하는 데 사용된다.
Example
fruits[0] = “Banana”;
fruits[1] = “Apple”;
fruits[2] = “Mango”;
fruits[3] = “Plum”;
<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 라이브러리를 제공한다.
과일[ 0 ] = “바나나” ;
과일[ 1 ] = “사과” ;
과일[ 2 ] = “망고” ;
과일[ 3 ] = “자두” ;
여기에서 라이브러리를 다운로드할 수 있다. 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>
기본 예시
예제 보기참고
W3C School - W3.CSS Code
공부 목적 블로그