html 배경색 지정하기 css 스타일 background-color 사용 using html style

html 태그의 배경색을 지정하기 위해 background-color 속성을 사용한다. 이것은 html 의 css style 이기도 하다. background-color 속성에 색상코드를 넣으면 바로 적용이 되는데 이런 배경색에 익숙해지면 별도의 이미지 작업없이 웹페이지에서 스타일만 가지고 가독성을 높일 수 있다.

html 배경색 지정하기 css 스타일 background-color 사용
using html style

웹사이트를 검색하거나 가독성을 위한 화면을 만들 때에 배경색을 필요로 한다.

결론부터 말하면 html에서 배경색을 지정하는 방법은 background-color 스타일을 지정하는 것이다.

색깔 속성을 지정하여 사용할 수도 있지만, 스타일을 지정하여 사용하는 방법이 보편적이다.

html 태그에 스타일을 지정하는 방법은 이전 포스팅을 참고해 본다.

html5 태그에 스타일 css 지정하는 방법 using html5 style attribute

html5 태그에는 css3 의 스타일을 직접 지정하여 태그를 돋보이게 할 수 있다. 태그의 style 속성을 사용하여 css 구문을 작성하면 된다. css 구문이 길어지고 많아지면 정리하여 외부에서 불러와야 겠

lngnat.tistory.com

배경색 지정하기

html에 배경색을 지정하는 방법은 background-color 속성을 사용하면 된다.
이것은 css 스타일로 태그의 style 속성으로 작성하면 된다.
css 스타일은 모든 태그에 적용되기 때문에 어디에 넣어도 배경색은 적용된다.

<태그명 style="background-color: 색상명"></태그명>

샘플코드

위의 예시로 배경색을 지정해 본다.

대표적인 문단태그인 p 태그에 배경색을 지정해 볼 것이다.

다채롭게 하기 위해 6개 정도의 색상을 넣어보도록 한다.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>

	<!-- 문서 정보 -->
	<head>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>
        <div>
            <!-- 제목입니다 -->
            <h2>
                html 배경색<br/>
                background-color: 색상코드
            </h2>
            <!-- // -->
            <!-- 문서 내용 -->
            <p style="background-color:Tomato;">
                배경색을 Tomato로 설정
            </p>
            <p style="background-color:Orange;">
                배경색을 Orange로 설정
            </p>
            <p style="background-color:DodgerBlue;">
                배경색을 DodgerBlue로 설정
            </p>
            <p style="background-color:MediumSeaGreen;">
                배경색을 MediumSeaGreen로 설정
            </p>
            <p style="background-color:Gray;">
                배경색을 Gray로 설정
            </p>
            <p style="background-color:SlateBlue;">
                배경색을 SlateBlue로 설정
            </p>
            <p style="background-color:Violet;">
                배경색을 Violet로 설정
            </p>
            <p style="background-color:LightGray;">
                배경색을 LightGray로 설정
            </p>
            <!-- // -->
        </div>
	</body>
    <!-- // -->

</html>
<!-- // -->

코드가 길어보이지만 style 속성만 보도록 한다.

style 속성에 background-color 속성이 6가지 정도있다.

각각 색상이 다르기 때문에 나중에는 색상표가 별도로 필요할 것이다.

결과화면을 보자.

단순히 색상만 지정해 본 것이다.

'programming > web' 카테고리의 다른 글

html 테두리색 지정하기 css 스타일 color 사용 using html border style (0)	2022.03.30
html 글자색 지정하기 css 스타일 color 사용 using html font style (0)	2022.03.27
html 주석 사용하기 using html comment (0)	2022.03.21
html 인용구 태그 종류와 사용 qutation and citation tag (0)	2022.03.19
html 문자열 태그 종류와 의미 using html text formatting tag (0)	2022.03.15