여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 기본값
w3.css – 기본값
4개월전 작성
4개월전 수정

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 기본 설정을 재정의하는 것은 매우 쉽다.

최소한 세 가지 옵션이 있다.

  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>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그