어제 오늘 내일

[HTML] 브라우저의 배경색 변경하기 본문

IT/HTML&CSS

[HTML] 브라우저의 배경색 변경하기

hi.anna 2018. 11. 26. 22:54


이번에는 HTML 태그를 이용하여 브라우저의 배경색을 변경하는 방법을 알아보도록 하겠습니다.




브라우저의 배경색 변경하기


브라우저의 배경색을 변경하는 방법은 여러가지가 있습니다.



body태그에 bgcolor 속성 지정하기


See the Pen aQjbOw by anna (@hianna) on CodePen.


가장 간단한 방법은 위와 같이 body 태그의 'bgcolor'속성에

배경색으로 지정하고 싶은 색을 지정해 주는 것입니다.

'bgcolor'는 'background color'의 약자입니다.



이때, bgcolor의 값에는 다음의 3가지 타입의 값을 지정해 줄 수 있습니다.


name

<body bgcolor="green">

red, yellow, black, white 등과 같이 색 이름을 직접 써줍니다.

색의 이름을 직접 적어주므로, 배경에 어떤 색이 적용되었는지 html 코드만 보고도 쉽게 알 수 있는 장점이 있습니다.

하지만, 이렇게 이름으로 색을 지정하면 우리가 알고 있는 색 이름 이외에 더 디테일한 색 지정은 어렵다는 단점이 있습니다.


rgb

<body bgcolor="rgb(100, 190, 255)">

각각의 파라미터는 순서대로 red, green, blue값의 정도를 0~255 사이의 숫자로 나타냅니다.

각각의 숫자를 조정하여 원하는 색을 표현하는 것입니다.


hax

<body bgcolor="#64BEFF">

hax 표현에서 각각 2자리씩의 문자는 rgb 표현식의 red, green, blue 값의 정도를 나타냅니다.

rgb 표현식에서 각각의 값을 10진수로 표현하였다면,

hax 표현식에서는 이 숫자를 16진수로 표현한 것입니다.

10진수 0을 16진수로 표현하면 0이고,

10진수 255를 16진수로 표현하면 FF입니다.

그러므로 hax 표현식에서 각각 2자리는 00~FF가 들어가게 됩니다.


이 외에도 색을 표현하는 방법에는 HSL, HWB, CMYK 등 여러가지 방법이 있지만,

위 세가지 방법이 가장 많이 사용됩니다.


사실 body태그에 bgcolor 속성을 정의하는 방법은 예전에 많이 사용되던 방법입니다.

HTML5 부터는 위 문법을 지원하지 않습니다.






body 태그에 style 속성 지정하기

HTML5부터는 body태그에 style 속성을 정의하여 배경색을 지정할 수 있습니다.


See the Pen style color by anna (@hianna) on CodePen.


위와 같이 body의 style 속성에 background-color를 지정해주면 되는데 

이때 값은 위에 소개한 'body 태그에 bgcolor속성'에 지정할 수 있는 타입의 값들을 사용하면 됩니다.


위에서도 설명했지만 'bgcolor'태그 보다는 style속성을 적용하는 것을 권장합니다.

그리고, html태그에 style태그를 사용하는 것보다는 css 파일을 따로 정의 하는 것을 권장합니다.

css를 작성하는 방법을 여기에서 설명하면 글이 길어지므로, 

여기서는 css를 작성하는 방법은 따로 설명하지 않겠습니다.




반응형
저작자표시 비영리 변경금지

'IT > HTML&CSS' 카테고리의 다른 글

[HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기  (0) 2018.12.02
[HTML] 날짜, 시간, 년도 입력받기  (0) 2018.12.01
[HTML] 입력 데이터 초기화를 위한 리셋 버튼(reset) 만들기  (2) 2018.01.10
[HTML] <input> 태그로 라디오버튼(radio) 만들기  (0) 2018.01.09
[HTML] <input> 태그로 체크박스(checkbox) 만들기  (0) 2018.01.08
공유하기 링크
'IT/HTML&CSS' Related Articles more
Comments