티스토리 뷰

코딩 배우기 - 코딩 첫걸음 - 코딩 기초/CSS

CSS 선언과 색상

더불어숲2 2020. 4. 24. 12:51
반응형

CSS 선언과 색상

CSS 선언

HTML 문서에 스타일 선언하는 방법은 3가지 방법이 있습니다.

  • 내부 스타일(Internal Style Sheet): head 태그 안에 선언하는 방법
  • 외부 스타일(External Style Sheet) : 외부 CSS 파일로 연결하는 방법
  • 인라인 스타일(Inline Style Sheet) : HTML 엘리먼트에 직접 STYLE을 선언하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <!-- 내부 스타일 -->
   <style>
       h1 {color: #fff;}
   </style> 
   
   <!-- 외부 스타일 -->
   <link rel="stylesheet" href="css/style.css">
   
   <!-- 인라인 스타일 -->
   <div style="padding: 10px; border: 1px solid #000;">
	<p>contents</p>
   </div>
</head>
<body>
    
</body>
</html>

CSS 색상

CSS를 통해 색상을 표현하는 방법은 4가지가 있습니다.

16진수 표기법

  • #과 함께 6자리로 이루어져 있으며 광원(색의 3원색)인 RED, GREEN, BLUE의 조합으로 표기하고 16진수로 표현하는 방법입니다.
  • 두자리씩 묶어서 #RRGGBB 형식으로 표현하며, RR은 빨간색, GG는 초록색, BB는 파란색의 양을 표현합니다.
  • 가장 낮은 값은 0(hex 00)이며 가장 높은 값은 255(hex ff)입니다. 하나의 광원 당 0~255까지 총 256색을 표현할 수 있습니다. 3개의 광원의 조합으로 표기할 수 있는 색상의 총 갯수는 각각 256색 x 3개의 광원이므로 총 16,777,216개입니다.

RGB와 RGBA

  • RGB는 RED, GREEN, BLUE 의 약자이며 A는 Alpha(투명도)가 추가된 것입니다.
  • Alpha(투명도) 값은 0.0(완전 투명)과 1.0(완전 불투명) 사이입니다.
  • rgb(255,0,0,): 빨강 / rgb(0,255,0) : 초록 / rgb(0,0,255) : 파랑
  • RGBA는 IE9 이상이나 파이어폭스3 이상, 크롬 , 사팔리에서 적용됩니다.

HSL과 HSLA

  • HSL은 색상(hue), 채도(saturation), 밝기(lightness)를 나타냅니다.
  • 색상(Hue)값은 가장 긴 빨강을 0도로 했을때 상대적인 배치 각도를 의미합니다. 그래서 값은 0~360도 사이입니다. 0과 360은 Red, 240은 Blue, 120은 Green이 됩니다.
  • 채도(Saturation)는 진한 정도를 나타내는데 0~100% 사이값을 가집니다. 0%는 무채색을 나타냅니다.
  • 명도(Lightness)는 밝기 정도를 나타내는데 0~100% 사이값을 가집니다. 0은 검정색이고 100은 하얀색입니다.

색상 이름 표기법

  • 색상이름을 이용하여 색을표현 할수 있습니다. 가장 기본적인 16가지를 포함하여 216가지의 색상 이름 표기법이 있습니다.
  • aqua, black, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

HTML 컬러 차트

HTML COLOR CHART 바로가기
반응형

UP NEXT : 코딩 배우기 - 코딩 첫걸음 - 코딩 기초/CSS

댓글
© 2019 Eun's