만약 여러개의 less 파일을 하나로 만드려면(compile) 어떻게 해야할까요? 아래의 방법으로 가능합니다.# 여러개의 less 파일 하나의 stylesheet로 변경하기일단 lessc을 사용하여 css를 만들기 위해 다음의 less 파일이 존재하는 예제입니다.test1.lesstest2.lesstest3.less위의 less 파일은 각각의 css를 가지고 있습니다. 이를 하나로 compile하여 test.css로 만드는 경우 아래의 방법을 따라야 합니다.하나의 compile 목적의 less파일을 생성(예를들어 test.less를 만듦)만들어진 test.less에 각각의 less파일을 @import함test.less파일을 test.css로 compile 실시위 과정에서 각각의 less파일을 @import하
Last Modified : 2017-12-07 16:00:30LESS CSS에서 변수 선언 및 사용 예제은 어떻게 될까요? 아래에서 알아보고자 합니다.# LESS에서 변수의 선언먼저 LESS의 변수 선언 방법입니다. LESS에서 변수를 선언하려면 @기호를 사용하여 아래와 같이 선언할 수 있습니다.@pad: 10px@mar: 100px;@a-color: #ff6600;위와같이 변수에 값을 설정해 두면 다음에 나오는 코드에서 언제나 간편하게 가능합니다. 그럼 아래에서 자세한 예제를 봐주세요.# LESS 변수의 사용예제LESS에 변수를 선언하여 사용하면 Compile 과정을 거쳐 저희가 원했는 css로 변환되는 과정을 거치고 이 변환된 코드가 css로 적용되게됩니다.@pad: 100px;@mar: 50px;ul { padding: @pad; margin: @mar;}위
Last Modified : 2017-05-20 18:40:39LESS에서 pre-processor는 요즘 많이 사용됩니다. CSS를 사용하는데 매우 편리한 기능들을 제공하며 뛰어난 언어처럼 다양한 기능을 제공하죠.아래는 LESS 사용시 가상클래스(pseudo-class) 선택자인 ::before, ::after, ::hover 등을 적용하는 방법에 대하여 알아봅니다. LESS에서 가상선택자 클래스를 적용할 경우 어떻게 할까요?# LESS에서 가상클래스 선택자 적용하기아래는 div 태그 내에 위치한 span 태그에 대하여 가상클래스 선택자를 적용한 예제코드입니다. 보시는 것처럼 앞에 & 기호를 사용하면 간단하게 적용할 수 있습니다. 만약 div 태그 다음에 ::before, ::after를 선언하면 아래처럼 사용합니다.div { width: 100px; height
Last Modified : 2017-09-14 12:42:22윈도우즈 10에서 블루투스 마우스를 연결하는 방법에 대하여 알아봅니다.# 윈도우즈 10 블루투스 마우스 연결하기요즘은 블루투스 마우스를 많이 사용합니다. 선이 없는 점은 다른 무선 마우스와 동일합니다. 다만 usb 방식의 무선 마우스는 usb에 연결하는 작은 통신장치 연결이 필요하죠. 다만 블루투스는 Bluetooth 방식으로 동작하므로 따로 연결하는 장치가 없어도 되죠.이런 이유로 설정하는 방법이 필요합니다. 일단 블루투스 마우스를 윈도우즈 10에 연결한다면 아래의 순서대로 연결합니다.1. 블루투스 마우스 페어링 준비하기; 블루투스 마우스의 전원을 확인하고 배터리가 없는 경우에도 넣어줍니다. 전원이 들어왔다면 페어링이 가능한 상태로 전환해야합니다. 마우스마다 다르니 참고하세요.2. 윈도우즈 블루투스 장치
Last Modified : 2019-08-06 22:00:47LESS CSS 사용시 calc()가 정상동작하지 않는 현상이 나타나 해결방법에 대하여 알아봅니다.# LESS CSS 사용시 calc()가 정상동작하지 않는 현상 해결방법먼저 LESS에서 clac()를 사용하기 위해서는 Escape 코드가 필요한데 이때 ~ 기호를 사용합니다. 즉 아래의 CSS는 LESS에서 다음과 같이 변경하여 사용할 수 있습니다.// CSSwidth: calc('100% - 50px');// LESSwidth: calc(~'100% - 50px');이제 해당 clac() CSS 함수는 escape되어 정상동작하게 됩니다.
Last Modified : 2017-05-19 11:39:25CSS preprocessor LESS의 자주 사용되는 문법 및 방법은 무엇이 있을까요?# 자식 요소에 간단하게 스타일 부여하기p { color: #fff; span { color: #f00; }}위와 같은 방법으로 짧은 코드로 자식 요소에 스타일 추가가 가능합니다.에 스타일 추가가 가능합니다.
Last Modified : 2017-04-19 13:56:59
