CSS 색 – 배경, 글자, 테두리 변경시 인라인 vs 내부 시트


CSS 색 변경시 인라인과 Internal 차이점은 전자는 적용 우선순위가 높습니다. 대신 차후 편집이 불편합니다. 후자는 대량 편집에 유리하고 파일을 따로 분리하는 것도 가능합니다.

CSS 색 – 배경색 변경

인라인 스타일에서 배경색 변경

인라인 스타일로 삽입시 배경색 삽입을 원하는 HTML 태그 뒤에 style 속성과 background-color값을 삽입합니다.


<h2 style="background-color:green;">미사일의 한글번역</h2>
  <p style="background-color:orange;">미사일의 정식 명칭은 Guided Missile입니다. 그래서 번역은 유도탄으로 됩니다.</p>

내부 스타일 시트에서 배경색 변경

내부 스타일 시트에서 CSS 색 변경시 <style> 태그 밑에서 선택자를 바로 주면 됩니다. 외부 스타일 시트의 경우 <style>태그도 적지 않고 오직 CSS 선택자만 입력합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        background-color:#B0A5DF;
      }
      p{
        background-color:#F4E26F;
      }
    </style>
  </head>
  <body>
    <h2>미사일의 SF적 요소</h2>
      <p>SF 영화에서 보던 기술들이 미래에 현실화 되듯 1900년대 미사일도 SF 영화에나 나오는 가상의 기술이었습니다.</p>
  </body>
</html>

CSS 색 -글자색 변경

인라인 스타일에서 글자색 변경

인라인 스타일에 직접 삽입해서 글자색을 변경하는 경우 HTML 태그 뒤에 style 속성을 삽입하고, color 속성값을 삽입해서 작성합니다.

<h2 style="color:#F4716F;">항공 미사일의 종류</h2>
  <ul style="color:blue;">
    <li>공대공(air to air)</li>
    <li>공대지(air to surface)</li>
    <li>공대함(air to ship)</li>
    <li>공대잠(air to underwater)</li>
  </ul>


내부 스타일 시트에서 글자색 변경

내부 스타일 시트에서 글자색 변경의 경우 <style> 태그 밑에 CSS 선택자를 바로 입력합니다. 외부 스타일 시트의 경우 HTML 태그는 모두 생략하고 CSS 선택자를 바로 입력하면 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        color:#6A16D4;
      }
      ul{
        color:#20600D;
      }
    </style>
  </head>
  <body>
    <h2>지상 미사일의 종류</h2>
      <ul>
        <li>지대공(surface to air)</li>
        <li>지대지(surface to surface)</li>
        <li>지대함(surface to ship)</li>
      </ul>
  </body>
</html>

CSS 색 – 테두리색 변경

인라인 스타일에서 테두리색 변경

인라인 스타일을 직접삽입해서 테두리색을 변경할 경우, HTML 태그 뒤에 style 속성과 border 속성값을 삽입해서 작성합니다. px은 선의 두께, solid, dashed 는 선의 종류, black, #EE5D3D 는 선의 색상을 정의합니다.

<h2 style="border:1px solid black;">수상 미사일 종류</h2>
  <ul style="border:3px dashed #EE5D3D;">
    <li>함대공(ship to air)</li>
    <li>함대지(ship to surface)</li>
    <li>함대함(ship to ship)</li>
    <li>함대잠(ship to underwater)</li>
  </ul>

내부 스타일 시트에서 배경색 변경

내부 스타일 시트에서 배경색 변경의 경우 <style> 태그 사이에 CSS 선택자를 바로 입력합니다. 외부 스타일 시트의 경우 HTML 태그를 생략하고 바로 선택자를 입력합니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border:2px dotted #1E7C0D;
      }
      ul{
        border:5px solid #3B403A;
      }
    </style>
  </head>
  <body>
    <h2>수중 미사일의 종류</h2>
      <ul>
        <li>잠대지(underwater to surface)</li>
        <li>잠대함(underwater to ship) : aka 어뢰</li>
        <li>잠대공(underwater to air) : 잠수함은 항공 공격에 약해 대응차원에서 제작</li>
        <li>잠대잠(underwater to underwater) : aka 어뢰</li>
      </ul>
  </body>
</html>

색의 종류

색 이름 리스트

원래 CSS 속성값의 색상은 숫자와 알파벳 등이 조합된 복잡한 코드로 이루어져있습니다.

약 100여개의 자주 사용되는 색이 사람이 자주 사용하는 고유명사로 등록되있어 편리하게 이용할 수 있습니다.

HTML 색 이름 표
색이름 HEX
White #FFFFFF
Snow #FFFAFA
Honeydew #F0FFF0
MintCream #F5FFFA
Azure #F0FFFF
AliceBlue #F0F8FF
GhostWhite #F8F8FF
WhiteSmoke #F5F5F5
Seashell #FFF5EE
Beige #F5F5DC
OldLace #FDF5E6
FloralWhite #FFFAF0
Ivory #FFFFF0
AntiqueWhite #FAEBD7
Linen #FAF0E6
LavenderBlush #FFF0F5
MistyRose #FFE4E1
Cornsilk #FFF8DC
BlanchedAlmond #FFEBCD
Bisque #FFE4C4
NavajoWhite #FFDEAD
Wheat #F5DEB3
Burlywood #DEB887
Tan #D2B48C
RosyBrown #BC8F8F
SandyBrown #F4A460
Goldenrod #DAA520
DarkGoldenrod #B8860B
Peru #CD853F
Chocolate #D2691E
SaddleBrown #8B4513
Sienna #A0522D
Brown #A52A2A
Maroon #800000
LightSalmon #FFA07A
Salmon #FA8072
DarkSalmon #E9967A
LightCoral #F08080
IndianRed #CD5C5C
Crimson #DC143C
Firebrick #B22222
DarkRed #8B0000
Red #FF0000
OrangeRed #FF4500
Tomato #FF6347
Coral #FF7F50
DarkOrange #FF8C00
Orange #FFA500
Yellow #FFFF00
LightYellow #FFFFE0
LemonChiffon #FFFACD
LightGoldenrodYellow #FAFAD2
PapayaWhip #FFEFD5
Moccasin #FFE4B5
PeachPuff #FFDAB9
PaleGoldenrod #EEE8AA
Khaki #F0E68C
DarkKhaki #BDB76B
Gold #FFD700
DarkOliveGreen #556B2F
Olive #808000
OliveDrab #6B8E23
YellowGreen #9ACD32
LimeGreen #32CD32
Lime #00FF00
LawnGreen #7CFC00
Chartreuse #7FFF00
GreenYellow #ADFF2F
SpringGreen #00FF7F
MediumSpringGreen #00FA9A
LightGreen #90EE90
PaleGreen #98FB98
DarkSeaGreen #8FBC8F
MediumAquamarine #66CDAA
MediumSeaGreen #3CB371
SeaGreen #2E8B57
ForestGreen #228B22
Green #008000
DarkGreen #006400
Aqua #00FFFF
Cyan #00FFFF
LightCyan #E0FFFF
PaleTurquoise #AFEEEE
Aquamarine #7FFFD4
Turquoise #40E0D0
MediumTurquoise #48D1CC
DarkTurquoise #00CED1
LightSeaGreen #20B2AA
CadetBlue #5F9EA0
DarkCyan #008B8B
Teal #008080
LightSteelBlue #B0C4DE
PowderBlue #B0E0E6
LightBlue #ADD8E6
SkyBlue #87CEEB
LightSkyBlue #87CEFA
DeepSkyBlue #00BFFF
DodgerBlue #1E90FF
CornflowerBlue #6495ED
SteelBlue #4682B4
RoyalBlue #4169E1
Blue #0000FF
MediumBlue #0000CD
DarkBlue #00008B
Navy #000080
MidnightBlue #191970
Pink #FFC0CB
LightPink #FFB6C1
HotPink #FF69B4
DeepPink #FF1493
PaleVioletRed #DB7093
MediumVioletRed #C71585
Lavender #E6E6FA
Thistle #D8BFD8
Plum #DDA0DD
Violet #EE82EE
Orchid #DA70D6
Fuchsia #FF00FF
Magenta #FF00FF
MediumOrchid #BA55D3
MediumPurple #9370DB
BlueViolet #8A2BE2
DarkViolet #9400D3
DarkOrchid #9932CC
DarkMagenta #8B008B
Purple #800080
Indigo #4B0082
DarkSlateBlue #483D8B
SlateBlue #6A5ACD
MediumSlateBlue #7B68EE
RebeccaPurple #663399
Gainsboro #DCDCDC
LightGray #D3D3D3
LightGrey #D3D3D3
Silver #C0C0C0
DarkGray #A9A9A9
DarkGrey #A9A9A9
Gray #808080
Grey #808080
DimGray #696969
DimGrey #696969
LightSlateGray #778899
LightSlateGrey #778899
SlateGray #708090
SlateGrey #708090
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
Black #000000

16진수 값 삽입

샵(#)과 알파벳 숫자가 조합된 일곱자리 문자로 색을 표현합니다. 포토샵이나 기타 색 편집을 할 때 자주 볼 수 있는 색상 코드입니다.

위의 표에서 나온 HEX 코드와 동일합니다.

RGB 값 삽입

RGB는 Red, Green, Blue의 약자입니다. 가산혼합이라는 색 혼합 기술로 빨간색, 초록색, 파란색을 서로 섞어서 다양한 색을 만들어내는 원리를 사용합니다.


빨강, 초록, 파랑의 데이터를 0부터 255까지 삽입해서 밝기를 조절해서 색을 합성합니다.

HSL 값 삽입

HSL이란 Hue(색조), Saturation(채도), Lightness(명도)의 약자입니다.

색조는 숫자 0부터 360까지 움직입니다. 숫자가 낮으면 붉은색 계열로 변하며 숫자가 올라가면 푸른색, 보라색 계열로 변합니다.

채도는 백분율 0~100%로 표현합니다. 퍼센트 조절로 음영이 변동됩니다.

명도는 백분율 0~100%로 표현합니다. 낮아질 수록 검은 밝기로 바뀌고 높아질 수록 흰 밝기로 바뀝니다.