Dev/CSS
-
[CSS]Less 알아보기 Less.jsDev/CSS 2018. 5. 10. 11:26
CSS 전처리기인 Less.js에 대하여 알아봅시다. 본 포스팅은 http://lesscss.org/ 를 한글로 번역한 문서입니다. 개요 Less는 CSS의 하위호환된 언어입니다. 본 포스팅은 Less 공식 문서를 번역한 것으로, Less 언어 와 Less.js에 대한 내용으로 구성되어 있으며, 이것은 Less 스타일을 CSS 스타일로 변환해주는 자바스크립트 툴 입니다. 이 글에서는 Less의 간단한 기능들을 살펴보겠습니다. 설치 Node.js 에서 사용하기 > npm install -g less > lessc styles.less styles.css 브라우저에서 단에서 사용하기 변수 변수에 대한 내용은 크게 설명하지 않아도 쉽게 이해할 수 있습니다. @nice-blue : #5B83AD;@light-b..
-
[CSS] CSS Preprocessor - Sass | Sass란?Dev/CSS 2018. 4. 21. 17:31
CSS 전처리기 Sass에 대해 알아보자 1. CSS Preprocessor(전처리기) CSS는 배우기 아주 쉽지만 CSS로 개발을 하다보면 금세 지저분해지는 경우를 볼 수 있습니다. 예를 들어 같은 스타일을 적용해야 하는 요소들이 있다면 코드를 복사해서 붙여야하고, 수정이 필요할 때에는 일일이 찾아서 수정해야 하는 번거로움이 있습니다. 이러한 문제점때문에 CSS 전처리기(Preprocessor)가 나오게 되었고, 이는 CSS가 동작하기 전에 미리 동작합니다. CSS 전처리기의 종류에는 대표적으로 Sass, Less, Stylus 가 있습니다. 이번 포스팅은 Sass에 대해 알아보고, 간단한 기능들을 설명하도록 하겠습니다. 2. Scss? Sass는 처음에 들여쓰기를 감지하여 그것을 중요한 핵심으로 여겨..
-
[CSS] - CSS Reset StylesheetDev/CSS 2017. 11. 23. 22:02
css Reset 에 대해 알아봅시당 CSS Reset 을 사용하는 이유 각 브라우저 마다 그 브라우저가 갖고있는 기본적인 style이 있습니다. 이 때문에 우리가 의도한 대로 표시되지 않을때가 종종 있죠. 그래서 아래에 기본적인 CSS들을 reset (재설정) 해주는 몇가지의 StyleSheet 들이 있습니다. 1. HTML5 Doctor CSS Reset - Eric Meyer 의 Reset.css 에서 부분 수정하여 나왔다는 html5 Doctor Reset css Stylesheet 입니다.http://html5doctor.com/html-5-reset-stylesheet/ 2. Meyerweb Reset.css - Eric Meyer 이 고안한 Reset CSS 입니다. 이 StyleSheet ..
-
[CSS] - BEM (Block Element Modifier) 방법론 [1]Dev/CSS 2017. 11. 21. 13:49
GDG DevFest Seoul 2017 에서 백성훈님의 CSS 와 BEM 세션을 듣고 난 후, 현재 하고 있는 프로젝트에도 BEM 을 적용하면 좋을 것 같아서 개인적으로 정리하게 되었습니다 BEM (Block Element Modifier) ?? BEM 은 Yandex 라는 회사에서 개발한 방법론으로, 사내에서 프로젝트를 진행하다가 Naming Convention과 File Structure 문제를 겪게되어 방법론을 개발했다고 합니다. 먼저 CSS 방법론을 사용하는 이유로는 1. 쉬운 유지보수 가능 2. 재사용 가능 3. 쉽게 확장 가능 이라는 공통의 목적을 가지고 있다고 합니다.https://medium.com/witinweb/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-1-bem-blo..
-
[CSS] - Cascade RulesDev/CSS 2017. 11. 20. 22:24
Cascade Rules 에 대해서 Cascade Rules란? cascade 란 계단 형식의 폭포수를 의미합니다. 그리하여 css 에서도 단계에 따라 css 우선순위가 달라집니다. 아래는 Cascade Rules 에 대한 참고 자료 입니다. Cascade Rules 그러면 각 단계가 무엇을 의미하는지 알아보도록 하겠습니다. 1. inheritanceinheritance 는 상속을 의미합니다. 부모 요소에 적용을 해주면 , 자식 요소에도 같이 적용이 되는 경우가 있습니다. 대표적인 속성으로는 color 속성이 있습니다. 1234567891011helloworld p{color : red;} cs 이와 같이 p 태그의 color : red 속성은 em 태그 안의 'world' 에도 적용이 됩니다. (물론 ..