모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.
문제시, 비공개로 전환하겠습니다.
- link 와 import -
똑같은 CSS를 적용해야 하는 웹페이지가 1000개가 있을 때 CSS의 내용이 바뀌었다면 어떻게 해야할까요?
아마 천개의 웹페이지를 모두 수정해야 할 것입니다. 이것은 CSS의 수정을 소극적으로 만들고 그것은 곧 아름다움을 억압하는 암담한 장애물이 될 것입니다.
여기서는 이런 문제를 근본적으로 해결할 수 있는 방법인 link 태그와 @import에 대해서 알아봅니다.
외부로 파일을 빼는 방법은 크게 두가지입니다.
1. <link rel="stylesheet" href="style.css">
2. <style>@import url("style.css")</style>
link_1.html |
<!doctype html> <html> <head> <!-- <link rel="stylesheet" href="style.css">--> <style> @import url("style.css") </style> </head> <body> <h1>page2</h1> </body> </html> |
style.css |
h1{ color:red; } |
CSS는 네트워크를 통해서 전송됩니다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해입니다.
코드의 크기를 줄이는 것을 통해서 이런 문제를 완화해주는 도구가 minify 도구입니다.
여기서는 코드를 경량화하는 방법을 알아보겠습니다.
http://adam.id.au/clean-css-online/
https://github.com/jakubpawlowicz/clean-css
node js 설치
CSS는 뛰어난 언어입니다. 하지만 CSS가 모든 면에서 좋을수는 없습니다.
그래서 어떤 이들은 CSS에 편리한 기능을 더한 새로운 언어를 만들고
이 언어에 따라서 작성한 코드를 어떤 프로그램으로 실행시키면 결과적으로 CSS를 만들어주는 도구들을 개발했는데요.
이런 도구를 preprocessor이라고 합니다. 여기서는 이런 도구들의 개념과 간단한 사용법을 알아봅니다.
아래는 대표적인 preprocessor들입니다.
http://lesscss.org/
http://sass-lang.com/
http://stylus-lang.com/
preprocessor 도구들을 비교한 사이트 - https://csspre.com/compile/
preprocessor는 표준화된 css문법은 아니지만 더 편리하게 개인이 커스터마이징한 기능들을 쓸 수 있고 그것을 css표준문법으로 변환해주는 기술이다.
bracket에서 stylus 사용할 때
// out: pp.css, compress:true
node js를 인스톨하면 명령어를 이용해 컴파일할 수 있다.
댓글