클리엘
CLIEL LAB
클리엘
전체 방문자
오늘
어제
  • 분류 전체보기 (515)
    • Mobile (47)
      • Kotlin (47)
    • Web (84)
      • NestJS (9)
      • HTML5 & CSS3 (38)
      • Javascript (20)
      • TypeScript (6)
      • JQuery (11)
    • .NET (302)
      • C# (85)
      • ASP.NET (67)
      • 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 (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 블로그 정리

인기 글

태그

  • node.js
  • c#
  • jQuery
  • CSS3
  • .NET
  • exception
  • ASP.NET
  • MariaDB
  • HTML5
  • Kotlin
  • android studio
  • Entity Framework
  • asp.net core web api
  • asp.net core
  • LINQ
  • NestJS
  • JavaScript
  • 변수
  • Windows API
  • android

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
클리엘

CLIEL LAB

[HTML5&CSS3] CSS3 색상입력
Web/HTML5 & CSS3

[HTML5&CSS3] CSS3 색상입력

2019. 10. 17. 10:21
728x90

색상은 기본적으로 red, blue처럼 특정 키워드를 통해서 설정이 가능합니다.

<head>
<style type="text/css">
    #span1 { color: red; }
    #span2 { color: blue; }
</style>
</head>
<body>
    <span id="span1">abcdefg</span><br />
    <span id="span2">abcdefg</span>
</body>

그러나 위와 같은 키워드 설정 말고도 숫자를 통해 색상을 더욱 정밀하게 조절할 수 있는데 이때 사용 가능한 색상 단위로는 첫 번째로 rgb가 있습니다. rgb는 순서대로 red, green, blue 색상을 의미하며 이들 각각의 색상값을 구분해서 지정합니다. 이때 각각의 값은 0부터 255까지 지정이 가능합니다.

<head>
<style type="text/css">
    #span1 { color: rgb(100, 100, 200); }
    #span2 { color: rgb(150, 200, 300); }
</style>
</head>
<body>
    <span id="span1">abcdefg</span><br />
    <span id="span2">abcdefg</span>
</body>

rgb와 비슷한 rgba도 있는데 이때 a는 투명도를 의미합니다.

<head>
<style type="text/css">
    #span1 { color: rgba(100, 100, 200, 1.0); }
    #span2 { color: rgba(150, 200, 300, 0.5); }
</style>
</head>
<body>
    <span id="span1">abcdefg</span><br />
    <span id="span2">abcdefg</span>
</body>

투명도는 0.0 부터 1.0까지 설정이 가능하며 0.0에 가까울수록 투명도가 증가합니다.


hex단위는 #000000 형태의 16진수 단위로 입력하며 2자리 단위로 Red, Green, Blue에 해당합니다.

 

따라서 #FF0000은 Red부분에 FF가 지정된 것으로서 F는 16진수에서 16에 해당하고(16x16=256) Green과 Blue는 0으로 값이 없기에 결론적으로 붉은색으로 처리됩니다.

<head>
<style type="text/css">
    #span1 { color: #FF0000; }
    #span2 { color: rgba(150, 200, 300, 0.5); }
</style>
</head>
<body>
    <span id="span1">abcdefg</span><br />
    <span id="span2">abcdefg</span>
</body>


hsl단위는 색상, 채도, 명도 순으로 값을 지정합니다.

<head>
<style type="text/css">
    #span1 { color: hsl(50, 100%, 80%); }
    #span2 { color: rgba(150, 200, 300, 0.5); }
</style>
</head>
<body>
    <span id="span1">abcdefg</span><br />
    <span id="span2">abcdefg</span>
</body>

hsl도 reg처럼 hsla로 투명도를 지정할 수 있으며 방법과 순서는 rgb와 같습니다.

728x90
저작자표시 비영리 변경금지 (새창열림)

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

[HTML5&CSS3] CSS3 크기입력  (0) 2019.10.21
[HTML5&CSS3] 표시 속성  (0) 2019.10.18
[HTML5&CSS3] CSS선택자 -3  (0) 2019.10.11
[HTML5&CSS3] CSS선택자 -2  (0) 2019.10.07
[HTML5&CSS3] CSS선택자 -1  (0) 2019.09.30
    'Web/HTML5 & CSS3' 카테고리의 다른 글
    • [HTML5&CSS3] CSS3 크기입력
    • [HTML5&CSS3] 표시 속성
    • [HTML5&CSS3] CSS선택자 -3
    • [HTML5&CSS3] CSS선택자 -2
    클리엘
    클리엘
    누구냐 넌?

    티스토리툴바