클리엘
CLIEL LAB
클리엘
전체 방문자
131,483
오늘
133
어제
331
  • 분류 전체보기 (442) N
    • Mobile (47)
      • Kotlin (47)
    • Web (84)
      • NestJS (9)
      • HTML5 & CSS3 (38)
      • Javascript (20)
      • TypeScript (6)
      • JQuery (11)
    • .NET (233) N
      • C# (57) N
      • ASP.NET Core (31)
      • Windows API for .NET (128)
    • Server (50)
      • SQL Server (8)
      • MariaDB (18)
      • Windows Server (5)
      • node.js (19)
    • System (12)
      • 작업LOG (12)
    • Review (11)
    • ETC (5)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 블로그 정리

인기 글

  • [C#] C#과 .NET6 시작하기 - 3.⋯
    2022.06.24
    [C#] C#과 .NET6 시작하기 - 3.⋯
  • [C#] C# 개요 - 3. 기타 Consol⋯
    2022.06.24
    [C#] C# 개요 - 3. 기타 Consol⋯
  • [C#] 인터페이스(Interface)와⋯
    2022.06.24
    [C#] 인터페이스(Interface)와⋯
  • [C#] 예외처리
    2022.06.24
    [C#] 예외처리
  • [C#] C#과 OOP(Object-Oriented⋯
    2022.06.24
    [C#] C#과 OOP(Object-Oriented⋯

태그

  • node.js
  • c#
  • .NET
  • android
  • 메서드
  • JavaScript
  • asp.net core
  • CSS3
  • jQuery
  • Kotlin
  • Windows API
  • TypeScript
  • android studio
  • 변수
  • asp.net core web api
  • CentOS
  • MariaDB
  • EF-Core
  • NestJS
  • HTML5

최근 댓글

  • 흠... CACLS는 더이상 사용하지⋯
    클리엘
  • 안녕하세요! 아래 명령 하고부⋯
    방문자
  • 죄송합니다. 관련글을 작성한지⋯
    클리엘
  • 네 맞습니다. 본문에서는 표기⋯
    클리엘
  • 6000 ms 는 6초아닌가요?
    react

최근 글

  • [C#] LINQ(Language INtegrated⋯
    2022.07.05
    [C#] LINQ(Language INtegrated⋯
  • [C#] LINQ(Language INtegrated⋯
    2022.07.05
  • [C#] LINQ(Language INtegrated⋯
    2022.07.05
    [C#] LINQ(Language INtegrated⋯
  • [.NET] 닷넷 Type 사용하기 - 8⋯
    2022.06.26
    [.NET] 닷넷 Type 사용하기 - 8⋯
  • [.NET] 닷넷 Type 사용하기 - 7⋯
    2022.06.26

티스토리

hELLO · Designed By 정상우.
클리엘

CLIEL LAB

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

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

2020. 1. 10. 16:53
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] Less 스타일시트 - 개요  (0) 2020.01.10
[HTML5&CSS3] 규칙(@-rule)  (0) 2020.01.10
[HTML5&CSS3] 3차원 구현  (0) 2020.01.10
[HTML5&CSS3] 2차원 구현  (0) 2020.01.10
    'Web/HTML5 & CSS3' 카테고리의 다른 글
    • [HTML5&CSS3] Less 스타일시트 - 내장 함수
    • [HTML5&CSS3] Less 스타일시트 - 변수, 연산, 선택자
    • [HTML5&CSS3] 규칙(@-rule)
    • [HTML5&CSS3] 3차원 구현
    CSS3, HTML5, less
    클리엘
    클리엘
    누구냐 넌?
    댓글쓰기
    다음 글
    [HTML5&CSS3] Less 스타일시트 - 변수, 연산, 선택자
    이전 글
    [HTML5&CSS3] 규칙(@-rule)
    • 이전
    • 1
    • ···
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • ···
    • 442
    • 다음

    티스토리툴바