클리엘
CLIEL LAB
클리엘
전체 방문자
199,229
오늘
61
어제
557
  • 분류 전체보기 (478)
    • Mobile (47)
      • Kotlin (47)
    • Web (84)
      • NestJS (9)
      • HTML5 & CSS3 (38)
      • Javascript (20)
      • TypeScript (6)
      • JQuery (11)
    • .NET (266)
      • C# (62)
      • ASP.NET (55)
      • Windows API for .NET (128)
    • Server (53)
      • SQL Server (10)
      • MariaDB (18)
      • Windows Server (6)
      • node.js (19)
    • System (12)
      • 작업LOG (12)
    • Review (11)
    • ETC (5)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 블로그 정리

인기 글

  • [MSSQL] MS SQL Server 다운로드및 설치/설⋯
    2022.02.23
    [MSSQL] MS SQL Server 다운로드및 설치/설⋯
  • [C#] Thread(스레드)와 Task(태스크)
    2021.10.24
    [C#] Thread(스레드)와 Task(태스크)
  • [ASP.NET Core] Blazor 웹 프로젝트 시작하⋯
    2022.04.01
    [ASP.NET Core] Blazor 웹 프로젝트 시작하⋯
  • [ASP.NET Core] Razor Page로 웹프로젝트⋯
    2022.01.24
    [ASP.NET Core] Razor Page로 웹프로젝트⋯
  • [C#] TCP/IP 통신
    2021.10.28
    [C#] TCP/IP 통신

태그

  • HTML5
  • asp.net core web api
  • NestJS
  • CSS3
  • node.js
  • c#
  • android studio
  • CentOS
  • Session
  • jQuery
  • JavaScript
  • Kotlin
  • MariaDB
  • Entity Framework
  • .NET
  • controller
  • asp.net core
  • ASP.NET
  • android
  • Windows API

최근 댓글

  • 특정 프로그램이라는게 어떤 프로그램인가요?
    클리엘
  • 자주 들러주세요. 감사합니다.
    클리엘
  • 진짜 상세한 포스팅이네요. 정말 많이 감사 드립니다!
    jman
  • 세세하고 깊이있는 내용에 감동했습니다!
    jman
  • 감사합니다.~
    클리엘

최근 글

  • ASP.NET Core - 16. Forms Tag Hel⋯
    2023.01.27
    ASP.NET Core - 16. Forms Tag Hel⋯
  • ASP.NET Core - 15. 내장 Tag Helper
    2023.01.19
    ASP.NET Core - 15. 내장 Tag Helper
  • ASP.NET Core - 14. Tag Helper
    2023.01.08
    ASP.NET Core - 14. Tag Helper
  • [MSSQL] Database복구 후 계정 Mapping
    2023.01.02
  • ASP.NET Core - 13. View Componen⋯
    2023.01.01
    ASP.NET Core - 13. View Componen⋯

티스토리

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.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 스타일시트 - 내장 함수
    [HTML5&CSS3] Less 스타일시트 - 개요
    이전 글
    [HTML5&CSS3] Less 스타일시트 - 개요

    티스토리툴바