css 박스 프로퍼티로 박스 제어하기

네 안녕하세요, 이번 포스팅에서는 css 박스 프로퍼티로 박스를 제어하는 것에 대하여 알아보도록 하겠습니다.

앞 포스팅에서 제가 html은 박스로 이루어져 있다고 그랬었죠?

그래서 그걸 우리가 제어를 해줘야만 합니다.

그리고 그걸 css가 담당을 하지요.

그래서 이번 포스팅에서는 박스를 제어하는 css 박스 프로퍼티를 이용하여 박스를 제어하는 방법들에 대하여 알아보도록 하겠습니다.

1. 박스의 크기

박스를 제어하는 가장 기본은 바로 박스의 크기를 제어하는 것입니다.

기본적으로 박스를 제어할 때 쓰는 프로퍼티는 이러합니다.

width : 박스의 너비
height : 박스의 높이
margin : 박스의 외부 여백
padding : 박스의 내부 여백
border-width : 테두리의 너비

이들을 이용하여 기본적인 제어를 합니다.

그럼 이를 이용한 html 예제를 보여드리도록 하겠습니다.

<!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 {
            margin : 40px;
            border-width : 30px;
            padding : 20px;
        }
        </style>
</head>
<body>
	<div class="box">
		<span>DIVDIVDIV</span>
	</div>
</body>
</html>

이렇게 한 번 작성을 해봤습니다.

블록의 위치를 조정하게 되면 어떻게 되는지 알아보는 예제입니다.

그럼 결과 화면을 보도록 하겠습니다.

이렇게 DIVDIVDIV라는 글자가 화면의 제일 왼쪽부터 시작이 되는 것이 아니라,

글자의 위치가 조정이 되어서 다른 곳에 있는 것을 확인할 수 있습니다.

이래서 html 페이지는 여러 개의 박스가 모여서 하나의 페이지를 만드는 블록들의 모임입니다.

그리고 아래의 표는 제가 이러한 박스 제어 프로퍼티를 적어둔 것입니다.

프로퍼티 종류	콘텐츠	패딩	테두리	여백
크기 관련 프로퍼티	width height	padding-top padding-right padding-bottom padding-left	border-top-width border-right-width padding-bottom-width padding-left-width	margin-top margin-right margin-bottom margin-left
크기 관련 단축 프로퍼티	-	padding	border-width	margin
스타일 관련 프로퍼티	-	-	padding-top-style padding-right-style padding-bottom-style padding-left-style	-
스타일 관련 단축 프로퍼티	-	-	border-style	-
색 관련 프로퍼티	-	패딩의 색은 따로 없고, 태그의 배경색으로 칠해짐	padding-top-color padding-right-color padding-bottom-color padding-left-color	여백은 투명하며, 부모 태그의 배경이 비춰보임
색 관련 단축 프로퍼티	-	-	border-color	-
전체 단축 프로퍼티	-	-	border	-

여기까지 박스 제어 프로퍼티를 알아보았습니다.

다음 포스팅에서는 박스에 색을 입히는 방법에 대하여 알아보도록 하겠습니다.

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

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

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

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
css 폰트 사용법에 대하여 알아보기 (0)	2023.03.13

개발러 L의 뻔fun한 코딩

css 박스 프로퍼티로 박스 제어하기