less

[HTML5&CSS3] Less 스타일시트 - 내장 함수

1. 색상 변환 관련 색상의 변환과 관련해 사용할 수 있는 함수로는 대략 다음과 같은 것들이 있습니다. lighten 지정된 색상을 밝게합니다. darken 지정된 색상을 어둡게 합니다. saturate 지정된 색상을 두드러지게 합니다. desaturate 지정된 색상을 두드러지지 않게 합니다. fadein 지정된 색상을 투명하게 합니다. fadeout 지정된 색상을 불투명하게 합니다. fade 지정된 색상을 반투명하게 합니다. spin 지정된 색상의 속성을 변경합니다. mix 지정된 색상을 섞습니다. 위 함수는 공통적으로 '색상, % 단위' 형식으로 값을 전달받으며 예외적으로 mix는 첫 번째와 두 번째 모두 색상을 파라미터 값으로 받습니다. @color : #FFF000; div:nth-child(1..

[HTML5&CSS3] Less 스타일시트 - 변수, 연산, 선택자

1. 변수 @ 문자를 사용하면 특정 값을 담아두는 변수를 사용할 수 있습니다. @color : red; @size : 12px; div { background-color: @color; } span { font-size: @size; } 2. 연산 정수형 데이터에 대해 사칙연산이 가능합니다. @color : red; @size : 12px; @size2 : 10px; div { background-color: @color; } span { font-size: @size + @size2; } 3. 선택자 less는 {} 블록 안에 {} 블록을 포함시키는 방법으로 내부 블록에서 &선택자를 사용하면 자기 자신을 의미하게 됩니다. @color : red; @size : 12px; div { background-..

[HTML5&CSS3] Less 스타일시트 - 개요

Less 스타일시트는 특정 형태의 스타일시트를 CSS로 변환해 주는 변환 엔진입니다. CSS를 곧바로 작성하지 않고 이런 변환 엔진을 사용하는 이유는 좀 더 유연한 형태의 코드를 작성함으로써 피곤하고 지루한 CSS의 작성을 돕고자 하는데 목적이 있습니다. Less 스타일시트 변환엔진을 사용하는 방법은 대략 2가지 정도인데 하나는 공식 홈페이지에서 변환을 처리해주는 js 스크립트 파일을 다운로드하여 사용하는 것과 온라인 컴파일러 페이지를 통해 특정 코드를 변환시켜 그 결과를 직접 사용하는 방법 등이 있습니다. 우선 js파일을 받아서 사용하는 방법에 대해 알아보도록 하겠습니다. http://lesscss.org/ 에 접속합니다. 홈페이지 하단에 Or the bowser 부분에 보면 js파일을 가져올 수 있는..