09009

[CSS] 박스 속성 본문

Front-End/CSS
[CSS] 박스 속성
09009 2023. 4. 9.

CSS에서는 각 요소가 박스라는 사각 영역을 생성한다.

이 사각영역이나 이것을 둘러싼 테두리에 크기, 색상, 위치 등과 관련된 속성을 지정하여 스타일을 변경한다.

margin 속성, border 속성, width 속성, height 속성을 모두 합쳐 박스 속성이라고 한다.

 

박스 크기와 여백

박스 속성

margin 테두리와 다른 태그 간격 지정
border 테두리 두께 지정
padding 테두리와 글자 사이의 간격 지정, 테두리 바깥쪽 여백 지정.
배경색은 padding 영역까지만 적용
width 글자를 감싸는 영역의 가로 크기
height 글자를 감싸는 영역의 세로 크기

 

width, height 속성 적용하기

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

margin, padding 속성 적용하기

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
            border: 20px solid black;
            margin: 10px; padding: 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

태그 전체 크기

-----------------------------------------------------------------------------------------------------------------------------------------------------------

전체 너비 = width + 2 x (margin + border + padding)

전체 높이 = height + 2 x (margin + border + padding)

-----------------------------------------------------------------------------------------------------------------------------------------------------------

width, height: 글자가 들어가는 영역의 너비와 높이 지정

margin, padding: 상하좌우를 각각 지정

 

네 방향 속성 지정하기

순서대로 크기 단위를 띄어쓰기로 구분하면 각 너비를 별도로 지정 가능

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
            /* 위쪽 오른쪽 아래쪽 위쪽 */
            margin: 0 30px 0 30px;
            padding: 0 30px 0 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

두 방향씩 속성 지정하기

margin과 padding 속성에 값을 2개 입력하여 네 방향을 2개씩 묶어 지정 가능

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
            /* 위아래  왼쪽오른쪽 */
            margin: 0 30px;
            padding: 0 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

박스 테두리

박스에 테두리를 넣을 때 두께, 형태, 색상에 해당하는 속성을 사용해야 한다.

- 테두리 두께: border-width

- 테두리 형태: border-style

- 테두리 색상: border-color

 

기본 테두리 만들기

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .box {
            border-width: thick;
            border-style: dashed;
            border-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>현재 시간 7시 47분</h1>
    </div>
</body>
</html>

둥근 테두리 만들기

모서리마다 둥글기 다르게 적용하기

'Front-End > CSS' 카테고리의 다른 글

[CSS] flexbox  (0) 2023.04.23
[CSS] display, position  (0) 2023.04.23
[CSS] 가시 속성, 배경 속성  (0) 2023.04.10
[CSS] CSS3 단위  (0) 2023.04.09
[CSS] 선택자  (0) 2023.04.09
'Front-End/CSS' Related Articles more
Comments