CSS란 cascading Style Sheets의 줄임말로 HTML XHTML XML 같은 웹문서 스타일을 작성하는 스타일 시트 언어이다. 쉽게 말해 HTML문서의 글꼴, 배경색 너비와 높이 위치 등을 디자인해주는 언어이다.
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<style>
body {
background: : red;
}
</style>
<meta charset="utf-8">
<title>CSS란?</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS란?</title>
</head>
<body style="background: red">
<h1>CSS 적용방법</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS란?</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>CSS 적용방법</h1>
</body>
</html>
- style.css 파일
@charset "UTF-8";
body{
background-color: purple;
}
h1{ color : red; background-color: blue; }
.wrap .inner{ }
.header.nav{}<div class="wrap"> <div class="inner">test</div> </div> <div class="header nav">test</div>
웹브라우저에서 user agent style과 같은 기본 스타일이 적용되어 있다.
하지만 이러한 기본 속성들은 내가 원하는 페이지를 만드는데 걸림돌이 된다.
그리고 브라우저마다 가지고 있는 기본 속성이 각자 다르기도 하기때문에 초기화는 필수적이다.
초기화 하는 방법은 직접 초기화 코드를 만들어서 사용하는 경우도 있지만 이미 만들어진 초기화 코드를 사용하는 경우도 있습니다.
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS 초기화란?</title>
<link rel="stylesheet" href="css/initial.css"> <!-- 직접 추가방법 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- CDN 추가방법 -->
</head>
<body>
<h1>CSS 초기화</h1>
</body>
</html>
아래는 대표적으로 많이 사용하는 reset 방법에 대한 참고 url
Eric Meyer's Reset CSS
https://meyerweb.com/eric/tools/css/reset/index.html
Richard Clark HTML5 Reset Stylesheet
http://html5doctor.com/html-5-reset-stylesheet/