W3.CSS-환경 설정

W3.CSS를 사용하는 방법?

W3.CSS를 사용하는 두 가지 방법이 있습니다-

Local Installation − 로컬 컴퓨터에 W3.CSS 파일을 다운로드하여 HTML 코드에 포함 할 수 있습니다.
CDN Based Version − CDN (Content Delivery Network)에서 직접 HTML 코드에 W3.CSS 파일을 포함 할 수 있습니다.

로컬 설치

이동 https://www.w3schools.com/w3css/w3css_downloads.asp 사용 가능한 최신 버전을 다운로드하십시오.
그런 다음 다운로드 한 w3.css 파일을 웹 사이트의 디렉토리 (예 : / css)에 넣습니다.

예

이제 다음과 같이 HTML 파일에 CSS 파일을 포함 할 수 있습니다.

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

다음 결과가 생성됩니다-

CDN 기반 버전

CDN (Content Delivery Network)에서 직접 HTML 코드에 W3.CSS 파일을 포함 할 수 있습니다. W3Schools.com은 최신 버전의 콘텐츠를 제공합니다.

Note −이 튜토리얼 전체에서 라이브러리의 W3Schools.com CDN 버전을 사용하고 있습니다.

예

이제 W3Schools.com CDN의 jQuery 라이브러리를 사용하여 위의 예제를 다시 작성해 보겠습니다.

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

다음 결과가 생성됩니다-