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-size 클래스로 글꼴 크기를 설정할 수 있다.
예제
<div class="w3-tiny">w3-tiny</div> <div class="w3-small">w3-small</div> <div class="w3-medium">w3-medium (Default)</div> <div class="w3-large">w3-large</div> <div class="w3-xlarge">w3-xlarge</div> <div class="w3-xxlarge">w3-xxlarge</div> <div class="w3-xxxlarge">w3-xxxlarge</div> <div class="w3-jumbo">w3-jumbo</div>
기본 예시
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>
기본 예시
예제 보기참고
W3C School - W3.CSS – W3.CSS Defaults
공부 목적 블로그