클리엘
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. 20. 15:03
728x90

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-color: @color;
}

a {
  &:hover {
    color: red;
  }
}

 

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

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

[HTML5&CSS3] SVG  (0) 2020.02.27
[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
    'Web/HTML5 & CSS3' 카테고리의 다른 글
    • [HTML5&CSS3] SVG
    • [HTML5&CSS3] Less 스타일시트 - 내장 함수
    • [HTML5&CSS3] Less 스타일시트 - 개요
    • [HTML5&CSS3] 규칙(@-rule)
    CSS3, HTML5, less
    클리엘
    클리엘
    누구냐 넌?
    댓글쓰기
    다음 글
    [HTML5&CSS3] Less 스타일시트 - 내장 함수
    이전 글
    [HTML5&CSS3] Less 스타일시트 - 개요
    • 이전
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • ···
    • 38
    • 다음

    티스토리툴바