CSS 유지보수의 필요성
같은 CSS를 여러 페이지에 적용할 때 사용
- 컴퓨터는 한번 다운 받은 CSS는 캐쉬를 통해 이미 저장되어있는 임시 디렉토리에서 꺼내써서 경량화가 가능하다.
- 재사용성을 높여준다.
link
html 태그로 CSS를 로드하는 방식 (마치 html 태그처럼 사용된다.)
<link rel="stylesheet" href = "CSS파일"> 형식으로 head 태그에 추가한다.
예시
link.css
#test{
color: red;
font-size: 40px;
text-align: center;
}link.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="link.css">
</head>
<body>
<div id="test">HELLO WORLD</div>
</body>
</html>import
CSS안에서 다른 CSS를 로드하는 방식 (CSS 코드로 해석되는 부분(style태그 or .css 파일)에서 사용된다.)
@import url("파일이름")형식으로 style태그에 추가하거나 CSS파일에 추가한다.
예시
import_1.css
@import url("link_2.css");
#test{
color: red;
font-size: 40px;
text-align: center;
}import_2.css
body{
background-color: powderblue;
}import.html
<!doctype html>
<html>
<head>
<style>
@import url("link_1.css");
</style>
</head>
<body>
<div id="test">HELLO WORLD</div>
</body>
</html>minify 코드 경량화
사이트의 규모가 커지고 사용자가 많아지면 필요한 기술이며 비용을 감소하는데 효과가 있다.
- clean-css online을 통해 경량화 https://html-cleaner.com/css/
- Brackets의 확장기능 사용 - js css minifier 설치
- node.js를 이용하여 명령어로 실행
preprocessor
CSS는 표준화 언어이기 때문에 변화에 신중하고 느리다. 그래서 새로 나온 기능을 바로 써볼 수 없다. 이때 proprocessor가 필요하다.
CSS가 제공하지 않는 문법을 사용할 수 있는 기능
- 온라인 변환기 - https://stylus-lang.com/
- 비교 사이트 - https://csspre.com/compile/
- Brackets의 확장기능 사용 - stylus auto compile 설치
- 사용방법- 파일이름.styl에 첫줄에 //out : 파일이름.css compress : true 입력 후 styl 문법에 맞추어 파일 작성
- node.js를 이용하여 명령어로 실행 - 만약 에디터가 확장기능을 지원하지 않더라도 사용가능하다.
style의 문법
- https://stylus-lang.com/ 에서 Try Stylus Online!을 이용하여 튜토리얼 진행
