1. 브라우저 스타일 초기화
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- link -> rel : 관계, href : 경로 -->
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div></div>
</body>
</html>div {
width: 200px;
height: 100px;
background-color: orange;
}위의 코드를 적용하고 body 태그의 요소를 개발자도구에서 클릭하여 스타일을 확인하면 아래의 스타일이 적용되어 있는 것을 볼 수 있다.
body {
display: block;
margin: 8px;
}이 코드는 우리가 적용한적이 없음에도 불구하고 기본적으로 적용되는 내용이다. 이는 크롬에서 적용된 스타일이며 브라우저마다 각각 기본값이 다르게 저장되어 있다.
이때문에 개발할 때 브라우저의 스타일을 초기화하고 시작하는 것이 좋다.
Visual Studio Code에서 브라우저의 스타일을 초기화하는 방법
-
https://www.jsdelivr.com/package/npm/reset-css reset-css CDN경로를 복사한다.
(reset.css 파일은 원본파일을 뜻하고, reset.min.css와 같이 min이 들어간 파일명은 원본파일을 용량이 가장 적은형태로 압축해놓은 파일이다)
-
태그를 이용해 복사한 경로로 css를 연결한다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"> -
이후에 확인해보면 크롬에 기본적으로 적용되어있던 스타일이 없어진 것을 확인할 수 있다.
Codepen 사이트에서 초기화하는 방법
CSS의 설정페이지로 들어가 CSS Base 부분을 reset으로 변경한다.
2. Emmet 기능
길게 작성해야 하던 코드를 짧은 코드를 이용해 자동화해주는 기능이다.
HTML
- div (+tab)
- div.heropy
- img (+tab)
결과
<div></div>
<div class="heropy"></div>
<img src="" alt=""/>CSS
- w: 200 (+tab)
- h: 100 (+tab)
- bc: orange (+tab)
결과
weight: 200px;
height: 100px;
background-color: orange;