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%로 표현합니다. 낮아질 수록 검은 밝기로 바뀌고 높아질 수록 흰 밝기로 바뀝니다.

 

문제해결이 정확히 되지 않으신 경우 웹디자인, 웹퍼블리싱 등의 강좌를 들어보시는 것도 좀 더 근본적인 문제 해결에 도움이 될 수 있습니다.

 

웹디자인 강의 추천 5가지

1.디자인나스

http://www.designnas.com/

디자인나스는 웹디자인 학원중에서 가장 유명한 양성소중의 한 곳입니다.  HTML 및 CSS, JavaScript, 포토샵 등을 배우시는 목적이 웹디자인쪽이신 경우 적합한 강좌입니다.

웹디자인 강의 1

UI, UX 디자인, 대기업 공채 특성화반의 웹디자인 중심 강의가 주력이며 HTML, CSS, JavaScript, jQuery 등의 웹퍼블리싱 강좌도 있습니다.

5 ~ 6명 이하의 소수로 강좌가 이루어져서 1:1 개인 마크에 의한 포트폴리오 관리에 유용하고 그만큼 수강료가 가격이 있는 편입니다.

 

2.홍시디자인학원

http://www.hongsidesign.com/

홍시디자인 학원은 2005년에 설립된 디자인학원에서 유명한 아카데미입니다.

웹디자인 강의 2

웹과 모바일 디자인, UI/UX 디자인 관련 커리큘럼이 있고 포토샵이나 일러스트레이터 같은 순수 디자인 툴도 강좌로 준비하며 실업자 등의 국비지원 정부 지원 과정도 보유하고 있습니다.

웹디자인 쪽을 강화로 하고 계시다면 적합한 강좌입니다.

 

3.그린컴퓨터아카데미

https://greenart.co.kr/

그린컴퓨터아카데미는 대형 컴퓨터 전문 학원입니다. 전국에 지점이 많아 오프라인에서 본인의 소속 지역에서 쉽게 강의를 들을 수 있다는 것이 장점입니다.

웹디자인 강의 3

순수 웹디자인 이외에도 웹퍼블리싱이나 기타 컴퓨터 프로그래밍 강좌도 단과 형식으로 커리큘럼이 다양하다는 것이 특징입니다.

 

4.더조은컴퓨터아카데미

http://tjoeun.co.kr/

더조은컴퓨터아카데미는 2016년 메가스터디 그룹에 인수된 컴퓨터 교육 전문 아카데미입니다.

웹디자인 강의 4

웹디자인 강좌부터, 웹퍼블리싱이나 프론트앤드 개발자 등의 연계 강좌로도 다양한 단과 강좌가 있습니다.

좀 더 디자인 강의에 집중하고 싶다면 CG, VFX나 모션그래픽, 에프터이팩트, 게임 그래픽(유니티, 마야) 등의 강좌 연계도 가능합니다.

 

5.메가스터디 컴퓨터아카데미

메가스터디 컴퓨터아카데미는 웹디자인 정규과정과 단과과정으로 나눠서 커리큘럼을 운영하고 있습니다.

웹디자인 강좌 5

정구 교육과정에서는 실무 취업을 목표로 12명 이하의 소수정예로 강좌가 구성되며 웹디자인 이외에 그래픽 편집디자인, 모션 그래픽(2D, 3D), 3D 에니메이션, 인테리어디자인, 웹툰 디자인, 게임 원화가, 게임 그래픽 디자인, 순수 제품 디자인 등의 다양한 디자인 강좌 프로그램을 갖추고 있습니다.

 

웹퍼블리싱 강의 추천 9가지

1.생활코딩

https://opentutorials.org/

생활코딩은 비영리 무료 코딩 교육 강좌입니다. 유튜브를 중심으로 무료 강좌가 있습니다.

웹퍼블리싱 강의 001

HTML, CSS, JavaScript의 기초 웹퍼블리싱 강좌가 코딩을 전혀 몰라도 학습할 수 있도록 학습난이도가 낮고, 한 강좌가 짧아서 듣기에 부담이 적습니다.

그 밖에 파이썬, 자바, MySQL, PHP, 머신러닝 기초 등 백앤드 프로그래밍 강좌도 무료로 제공된다는 것이 장점입니다.

 

2.인프런

https://www.inflearn.com/

인프런은 프로그래밍 유료 강좌 종합 플랫폼입니다. 웹퍼블리싱을 위한 반응형 웹사이트 만들기, CSS 그리드 레이아웃, 자바스크립트 연계 등 웹퍼블리싱 강좌가 단과형식으로 배치되어 있습니다.

웹퍼블리싱 강의 002

또한 종합 프로그래밍 강좌 사이트이기 때문에 프론트앤드 개발, 백앤드 개발, 리액트, 노드 JS 등 원하는 방향으로의 강좌도 연계해서 볼 수 있다는 장점이 있습니다.

 

3.노마드코더

https://nomadcoders.co/courses

노마드 코더는 콜롬비아 출신 개발자 니콜라스가 운영하는 코딩 교육 아카데미입니다.

웹퍼블리싱 3

클론 코딩(HTML, CSS), 바닐라 자바스크립트, CSS 레이아웃, FLEXBOX, SCSS, 그리드 등의 웹퍼블리싱 강좌를 실제 서비스를 클론 코딩으로 따라서 만들어보는 방식으로 구현되는 강좌입니다.

그 밖에 리액트, 암호화폐만들기, 인스타그램 클론 코딩하기, 유튜브 클론 코딩하기, 우버와 에어비앤디 클론코딩하기, 파이썬으로 웹 스크리퍼 만들기 등 확장되는 언어 학습도 실생활의 서비스와 연계된다는 점에서 재미있게 배울 수 있다는 것이 특징입니다.

약간의 HTML, CSS, JS 기초 지식을 알고 계시고, 실전 서비스의 벤치마킹을 통해서 좀 더 동기부여를 학습에 투여하고 싶으신분에게 적합한 웹퍼블리싱 강좌입니다.

 

6.W3Schools

https://www.w3schools.com/Html/

W3Schools는 노르웨이 Refsnes Date 소프트웨어 회사에서 1998년에 만든 온라인 코딩 교육 사이트입니다.

웹퍼블리싱 강좌 006

HTML, CSS부터 JavaScript의 웹퍼블리싱 등의 방대한 메뉴얼이 있고, 각 페이지마다 별다른 코드 에디터필요없이 홈페이지에서 바로 예제를 풀어볼 수 있다는 것이 특징입니다.

CSS 그라디언트, 색상, 모서리, 3D , 툴팁, 버튼 등 다양한 예제를 보유하고 있습니다.

 

7.Dev ED

https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q

Dev ED는 무료 유튜브 강좌 및 유료 홈페이지 강좌를 판매하고 있는 웹퍼블리싱 강좌 서비스입니다.

유튜브에서는 움직이는 CSS 및 자바스크립트 강좌 등이 예제와 함께 공개되어 있어 따라하기에 편리합니다. 특히나 JS와 CSS를 이용한 움직이는 에니메이션 효과를 잘 가르칩니다.

해당 개발자의 홈페이지에서는 HTML, CSS 강좌 등도 유료로 판매하고 있습니다.

https://developedbyed.com/p/the-creative-html5-css3-course

 

8.The Net Ninja

https://www.youtube.com/c/TheNetNinja/playlists

Net Ninja는 웹퍼블리싱을 비롯한 프론트앤드 개발자용 유튜브 강좌입니다.

웹퍼블리싱 강좌 007

CSS FLEX, 그리드, 반능형웹디자인, CSS 포지션, SASS 등의 웹퍼블리싱 집중 강좌부터 자바스크립트, 앵귤러, 노드 JS, 리액트, 부트스트랩, VUE, 타입스크립트 등 프론트앤드용 강좌도 분류가 잘되어 배치되어 있습니다.

 

9.CODER CODER

https://www.youtube.com/c/TheCoderCoder/featured

CODER CODER는 생활코딩, 노마드코더와 말투와 강의 방식이 정말 비슷한 코더용 강좌입니다.

웹퍼블리싱 인강 12

강좌수는 많지 않지만 CSS 등의 웹퍼블리싱 작업을 할 때 헷갈리기 쉬운 반응형 웹, 포지션, 레이아웃, Z-index, 미디어쿼리, 칼럼 나누기, 백그라운드 이미지 투명하게, 에니메이션 메뉴 만들기, 모바일 반능형, 그리드, SASS, Gulp, Flexbox 등을 예제와 함께 볼 수 있습니다.

영어의 경우 영어 자막을 켜고 배속을 0.75배 ~ 0.5배로 낮추면 좀 더 편하게 들어보실 수 있습니다.