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

728x90

Less 스타일시트는 특정 형태의 스타일시트를 CSS로 변환해 주는 변환 엔진입니다. CSS를 곧바로 작성하지 않고 이런 변환 엔진을 사용하는 이유는 좀 더 유연한 형태의 코드를 작성함으로써 피곤하고 지루한 CSS의 작성을 돕고자 하는데 목적이 있습니다.

Less 스타일시트 변환엔진을 사용하는 방법은 대략 2가지 정도인데 하나는 공식 홈페이지에서 변환을 처리해주는 js 스크립트 파일을 다운로드하여 사용하는 것과 온라인 컴파일러 페이지를 통해 특정 코드를 변환시켜 그 결과를 직접 사용하는 방법 등이 있습니다.

우선 js파일을 받아서 사용하는 방법에 대해 알아보도록 하겠습니다.

http://lesscss.org/ 에 접속합니다.

홈페이지 하단에 Or the bowser 부분에 보면 js파일을 가져올 수 있는 방법이 소개되어 있습니다. 직접 js파일을 다운받는 대신 위 주소를 통해 경로를 설정할 수도 있다는 것을 보여주고 있습니다. 이제 저 링크 안에 https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js부분을 클릭합니다.

그럼 위와 같은 화면을 볼 수 있는데 저 내용을 모두 긁어 복사한 다음 less.js 라는 파일로 저장합니다.

같은 경로안에 다음과 같은 내용으로 style.less 파일을 만듭니다.

div {
	background-color: red;

	title {
		h1 {
			color: yellow;
		}
	}
}

마지막으로 index.html 파일을 작성합니다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet/less" type="text/css" href="style.less">
	<script src="less.js"></script>
</head>
<body>
</body>
</html>

이제 작성한 파일을 실행해 보면 페이지에 다음과 같은 css가 추가되어 있음을 확인할 수 있습니다.

less 스타일시트 엔진을 사용하기 위한 이러한 과정이 번거롭게 느껴진다면 직접 컴파일러를 통해 변환코드를 곧장 얻을 수도 있습니다.

다음과 같이 http://www.winless.org/online-less-compiler/홈페이지를 방문하면 직접 해당 기능을 활용할 수 있습니다.

728x90

저작자표시 비영리 변경금지

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] Less 스타일시트 - 내장 함수 (0)	2020.02.25
[HTML5&CSS3] Less 스타일시트 - 변수, 연산, 선택자 (0)	2020.01.20
[HTML5&CSS3] 규칙(@-rule) (0)	2020.01.10
[HTML5&CSS3] 3차원 구현 (0)	2020.01.10
[HTML5&CSS3] 2차원 구현 (0)	2020.01.10

'Web > HTML5 & CSS3' 카테고리의 다른 글

티스토리툴바