W3.CSS 기본값


W3.CSS는 읽기 쉽습니다

W3.CSS 페이지는 약간의 읽기 장애가 있는 사람들도 쉽게 읽을 수 있습니다.

  • 기본 글꼴 크기는 15px입니다.
  • 기본 글꼴은 문자 간격이 좋은 Verdana입니다.
  • 기본 줄 간격(1.5)도 매우 좋습니다.

HTML 제목 <h1> - <h6>

기본적으로 W3.CSS는 HTML 머리글의 스타일을 다음과 같이 지정합니다.

예시

<h1>Heading 1 (36px)</h1>

<h2>Heading 2 (30px)</h2>

<h3>Heading 3 (24px)</h3>

<h4>Heading 4 (20px)</h4>

<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>

글꼴 크기 클래스

제목은 다음과 같이 사용해야 합니다.

W3.CSS 를 사용하면 다음 w3 크기 클래스 로 글꼴 크기를 설정할 수 있습니다 .

예시

w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo


W3.CSS 기본값 재정의

W3.CSS 기본 설정을 재정의하는 것은 매우 쉽습니다.

다음과 같은 세 가지 옵션이 있습니다.

  1. 페이지의 <head> 섹션에서 기본 설정을 재정의합니다.
  2. W3.CSS 뒤에 나만의 CSS 파일 추가
  3. W3.CSS 파일의 내용을 다운로드 및 변경

<head>에서 재정의

h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}

나만의 CSS 추가

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="myStyle.css">

W3.CSS 변경

h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}

기본 글꼴 변경

웹 페이지의 헤드(또는 스타일 시트)에서 W3.CSS를 로드한 후 html 및 본문 스타일을 변경합니다.

예시

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
  font-family: cursive, sans-serif;
}
</style>