css 박스에 색 입히기

네 안녕하세요, 이번 포스팅에서는 박스에 색을 입혀보는 시간을 가져보려 합니다.

보통 박스의 경우에는 테두리를 표시하거나 박스 내에 색을 입히는 작업을 해서 표시하는 경우가 많습니다.

그 이유는 박스에 색을 입히지 않으면 박스의 경계가 어디인지 육안으로는 확인이 불가능하기 때문에

시인성을 높이기 위해 사용합니다.

그래서 이번 시간에는 박스에 색을 어떻게 입힐 수 있는지 알아보려 합니다.

그럼 지금부터 시작하도록 하겠습니다.

1. 박스의 색

기본적으로 css에서 박스에 색을 입힐 수 있는 속성은 이렇습니다.

background
border

보통 이 정도를 봅니다.

그 외에 margin이나 padding 등은 이 박스나 그 외 다른 속성들 중에 공간을 가지는 태그들의 경계,

그리고 남는 공간을 나타내기 때문에 기본적으로 색을 칠할 수 없으며,

투명으로 설정이 되어있습니다.

그럼 간단한 예제를 통헤사 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스 모델</title>
    <style>
        body { background : ghostwhite; }
        span { background : deepskyblue; }
        div.box {
            background : yellow;
            border-style : solid;
             border-color : peru;
        
            margin : 40px;
            border-width : 30px;
            padding : 20px;
        }
        </style>
</head>
<body>
	<div class="box">
		<span>DIVDIVDIV</span>
	</div>
</body>
</html>

이렇게 이전 포스팅에서 썼던 코드에 좀 더 추가를 해서 작성을 해봤습니다.

그럼 결과를 보도록 하겠습니다.

결과도 잘 나온 것을 볼 수 있고,

각각의 태그에 해당하는 색들이 잘 칠해졌습니다.

여기까지 박스에 색을 채우는 방법을 알아보았습니다.

다음 포스팅에서는 테두리를 꾸미는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

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

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css border 속성으로 테두리 한 번에 꾸미기 (0)	2023.03.19
css border 속성 이용하여 테두리 꾸미기 (0)	2023.03.18
css 박스 프로퍼티로 박스 제어하기 (0)	2023.03.18
css 박스 모델의 구성 알아보기(콘텐츠, 패딩(padding), 테두리(border), 여백(margin) (0)	2023.03.18
css font 프로퍼티 이용하여 모든 프로퍼티 속성 한 번에 사용하기 (0)	2023.03.18

개발러 L의 뻔fun한 코딩

css 박스에 색 입히기