CSS 기본 지식

[HTML] CSS 기본지식

Jan 15, 2024

Contents

영역 inline, block, inline-block

💡

CSS 시작 전 기본이 되는 지식

영역

영역은 아래의 그림과 같이 나뉩니다.

margin : 테두리(border) 바깥 영역

boder : 테두리 영역

padding : 테두리 안쪽 영역

div : 내용 영역

inline, block, inline-block

inline : 세로 가로 둘다 안에있는 내용물의 크기

→ 디자인할때 inline을 잘 쓰지 않음(크기 지정 불가능)

block : 가로는 무제한, 세로는 지정한 만큼의 크기

→ 세로의 크기는 지정이 가능하지만, 가로의 크기는 지정 불가능

inline-block : 세로 가로를 지정 가능


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 10px;
            display: inline-block;
            border: 10px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

</html>

위 코드에서 head 태그의 display 부분만 변경

inline

block

inline-block

HTML