안녕하세요. 린치핀소프트 한광희입니다.

제가 웹 개발시에 자주 사용하는 CSS 프레임워크가 “부트스트랩(Bootstrap)”입니다. 이 부트스트랩은 아주 유용하긴 하지만 간혹 워드프레스 테마나 플러그인과 클래스명때문에 충돌이 날때가 있습니다. 예를 들면 부트스트랩에서 개체의 display 속성을 none 으로 바꿔주는 클래스 “hidden”은 다른 테마나 플러그인 또는 CSS 스타일에서 자주 지정되는 속성입니다. 그래서 같은 클래스명을 사용하였을때 기대와 다르게 동작하는 것을 경험할 때가 있습니다. 오늘은 이런 문제를 less를 이용하여 네임스페이스를 추가하는 방법으로 해결하는 것을 안내해드립니다.

 

 

less 란?

위키피디아 백과사전을 참고하면 less란 style sheet 문서를 동적으로 컴파일하기 위한 style sheet “언어”라고 소개합니다. 제 생각에는 style sheet를 작성할때 수천줄/수만줄 되는 스타일시트의 문서를 일관되고 효과적으로 작성하기 위해서 필요한 언어라고 이해하여도 좋을것 같다는 생각이 듭니다.  오늘 포스트에서 중요한점은 부트스트랩도 이 less를 제공한다는 점입니다.

 

Bootstrap Git hub : https://github.com/twbs/bootstrap

 

Custom_boostrap.css 생성하기

Bootstrap github 저장소에서 bootstrap 개발 파일을 다운로드한 후 해당 파일에서 less 파일을 찾으실 수 있습니다. 모든 less 파일은 “less” 디렉토리 하위에 파일로 존재합니다.

1.less 디렉토리로 이동

2.bootstrap.less 파일이 존재하는지 확인

3.custom_bootstrap.less 파일 생성( 새롭게 생성하는 파일이름은 자유롭게 지정하되 확장자는 “less”이여야 합니다, bootstrap.less 와 동일한 디렉토리에서 파일을 생성하시는게 편합니다.)

screenshot-newtab 2016-02-17 17-42-09

4.custom_bootstrap.less 파일에 다음과 같은 내용을 기술

.bts {
@import “bootstrap.less”;
}

5. less 설치 : http://lesscss.org/ ( npm 을 이용하여 빠르게 설치하는 방법이 소개되어 있습니다. )

6. less 설치한 후에는 cmd 창에서 ‘lessc -v’ 명령어를 이용하여 정상적으로 설치되었는지 확인하세요( 정상설치되었다면 lessc 2.6.0 (Less Compiler [JavaScript]) 와 같은 문구가 출력됩니다.

7. 윈도우 cmd 창에서 위의 custom_bootstrap.less, bootstrap.less 가 위치한 디렉토리로 이동합니다.

8. “lessc custom_bootstrap.less custom_bootstrap.style” 명령어를 입력하여 less 파일을 컴파일하여 custom_bootstrap.css 라는 새로운 스타일 시트를 생성합니다.

screenshot-newtab 2016-02-17 17-46-43

 

위의 절차를 정상적으로 수행하면 최종 결과물로 custom_bootstrap.css 가 생성됩니다.

screenshot-newtab 2016-02-17 17-44-13

 

새롭게 생성된 custom_bootstrap.css 이 <좌측> 기존의 bootstrap.css 파일이 <우측>입니다.

 

보이는 것처럼 좌측에는 모든 bootstrap 클래스 앞에 bts 클래스가 추가되어 있습니다. 즉, 부트스트랩을 이용하기 위해서는 최상위 개체로 ‘bts’ 클래스가 선언되어야 하위의 개체들이 부트스트랩 클래스를 적용 받을 수 있게 구성된 것입니다. 부트스트랩 클래스가 다른 테마나 플러그인,CSS와 충돌될때에는 이 방법을 사용해 보셔도 좋겠습니다.