프론트 엔드/HTML

[HTML] HTML - 11.색과 배경

Koras02 2023. 1. 7. 21:53

HTML 색(Color) 표현

 

이번 시간에는 HTML Style을 사용해서

색을 표현하는 방법을 알아보겠습니다.

 

HTML에서 색을 표현하기 위해서 다음과 

같은 3가지 방법이 있습니다.

  1. 색상의 이름으로 표현
  2. RGB 색상값으로 표현
  3. 16진수를 이용한 표현

색상 이름을 사용해 표현하기

 

W3C에서 정의한 16가지의 HTML5 

표준 색상이름은 다음과 같습니다.

그럼 위 표를 참고해서 만들어 보겠습니다.

 <h1 style="color:blue">색상: 파란색</h1>
 <h1 style="color:brown">색상: 브라운</h1>
 <h1 style="color:chocolate">색상: 초콜렛</h1>
 <h1 style="color: aqua">색상: 아쿠아</h1>

RGB 색상값으로 표현

 

모니터나 스크린에서는 

빨간색(Red),녹색(Green),파란색(Blue)를

혼합하여 색을 표현합니다.

 

HTML에서도 위와 같이 

세 가지 색을 가지고 색을 표현하기 위해

RGB 색상을 사용합니다.

 

RGB 색상의 기본색은

각각 0부터 255까지의 범위를 가집니다.

<h1 style="color:rgb(0,0,0)">RGB 색상 : 검은색</h1>
<h1 style="color: rgb(0,255,0)">RGB 색상: 녹색</h1>
<h1 style="color:rgb(192,192,192)">RGB 색상: 은색</h1>
<h1 style="color:rgb(255,0,255)">RGB 색상: 핑크</h1>
<h1 style="color:rgb(255,255,0)">RGB 색상: 노랑</h1>

16진수 색상값으로 표현

 

16진수 색상값은 RGB 색상값을

각각 16진수로 변환한 것입니다.

 

따라서 각각의 기본색(Red,Green,Blue)은 

각각 00부터 FF까지의 범위를 가집니다.

 

예를 들어 빨간색을 나타내는 rgb(255,0,0)은

16진수 색상값으로 #FF0000이 됩니다.

 <h1 style="color:#0000FF">16진수: 블루</h1>
 <h1 style="color:#000000">16진수: 검은색</h1>
 <h1 style="color:#FFC0CB">16진수: 핑크</h1>
 <h1 style="color:#FF0000">16진수: 레드</h1>
 <h1 style="color:#C0C0C0">16진수: 실버</h1>

HTML 배경(Background)

HTML 문서의 기본 배경(backgroun)은 흰색입니다.

또, HTML 요소들도 각자 자신만의

배경을 가지고 있습니다.

 

HTML에서 이러한 배경을 다음과 같이

변경할 수 있습니다.

  • 배경을 다른 색으로 변경
  • 배경을 다른 이미지로 변경

배경을 다른 색으로 변경 

 

HTML5 이전 버전까지는 bgcolor 속성을

이용해 HTML 요소의 배경색을 다른 색으로 

변경이 가능했습니다.

 

하지만 HTML5 버전 부터는 bgcolor 속성을

더 이상 지원하지 않기에

 

CSS를 이용해 배경색을 변경하도록

하겠습니다.

 <style>
      body { background-color: beige;}
      h1 { background-color: rgb(255,128,0);}
      p { background-color: #FFFFCC;}
 </style>

CSS의 background  속성을 사용하면

더욱 다양한 방법으로 배경색을 

설정할 수 있습니다.

배경을 다른 이미지로 변경하기

 

background 속성을 이용해 HTML 요소의 

배경을 이미지(image)로 설정할 수 있습니다.

<body background="images/img_background.jpg">
    <div>
        <h1>메뉴</h1>
        <p>설명</p>
    </div>
</body>

배경으로 이미지를 사용하면 웹 페이지의 

로딩시간이 점점 증가하게 됩니다.

 

따라서 보통 작은 사이즈의 

이미지를 패터(pattern)으로 만들어 

배경 이미지를 반복 설정합니다.

 

참고자료

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

 

GitHub - Koras02/html-study: html 블로그 작성용 - study1

html 블로그 작성용 - study1. Contribute to Koras02/html-study development by creating an account on GitHub.

github.com