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 기본 설정을 재정의하는 것은 매우 쉽습니다.
다음과 같은 세 가지 옵션이 있습니다.
- 페이지의 <head> 섹션에서 기본 설정을 재정의합니다.
- W3.CSS 뒤에 나만의 CSS 파일 추가
- 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>