AR삽질러

CSS Margin, Padding, Border - (3) 본문

WEB/HTML, CSS

CSS Margin, Padding, Border - (3)

아랑팡팡 2023. 10. 16. 23:28
728x90

 

CSS Margin, Padding, Border  - (3)

 

CSS(Cascading Style Sheets)의 margin속성은 웹 페이지 요소의 외부 여백을 조절하는데 사용된다. margin의 여백은 요소의 경계밖에 위치하며 인접한 요소와의 간격을 생성하는 역할을 한다. Margin을 이용해 웹 페이지 레이아웃의 정렬과 간격을 정의하며 스타일링한다.

 

Margin 

 - Margin은 요소의 경계를 넘어 그 주위에 공간을 생성하는 요소와 그 주변 요소간의 간격을 조절한다.

 

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

<head>
    <link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
    <meta charset="UTF-8">
    <title>HTML 연습</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
        html {
            background-color: red;
        }

        body {
            margin-top: 20px;
            margin-bottom: 50;
            margin-left: 30;
            margin-right: 10;
            background-color: seagreen;
        }

        div {
            height: 150px;
            width: 150px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>

 

1.1. Margin의 값을 지정하는 방법

 1) 기본구문 : margin : top, right, bottom, left

 2) 단일 값지정 : 요소의 모든 방향에 동일한 크기의 마진을 적용한다.

 3) 두값 : 첫번째 값은 top, bottom  , 두번째 값은 right, left  값을 설정한다.

 4) 세값 : 천번째 겂은 top 두번째 값은 right, left  세번째 값은 bottom 값을 설정한다.

 5) 네값 : 각각의 값은 top, right, bottom, left 순서대로 설정한다.

div{
	margin: 10px;
    margin: 10px, 20px;
    margin: 10px, 20px, 30px;
    margin: 10px, 20px, 30px, 40px;
}

 

1.2. 단위 

 1) 픽셀(px)

 - 고정된 단위로 디스플레이의 픽셀 수를 기반으로 한다.

 2) 백분율(%)

 - 부모 요소의 너비에 대한 백분율로 마진을 설정한다.

 

1.3. Block와 Inline요소

 1) Block

 - 페이지에 새로운 라인을 생성하고 높이와 너비를 지정할 수 있다.

 

 2) Inline

 - 페이지에 새로운 라인을 생성하지 않고 텍스트나 다른 인라인 요소와 함께 한 라인에 위치하여 높이와 넓이를 지정할 수 없다.

 

1.4 Collapsing Margin현상(top, bottom에서만 발생한다.)

 - 두개이상의 블록요소가 수직으로 나열될 때 margin이 하나로 합쳐지는 현상을 말하며 주로 div margin이 body margin과 같을 때 발생하며 body와 div margin은 하나로 취급된다.

 

 

Padding

 - margin은 box의 경계로부터 '바깥'에 있는 공간이였다. padding은 box의 경계로 부터 '안쪽'에 있는 공간이다.

 - 즉 요소의 경계와 내부 컨텐츠 사이의 공간으로 요소 내부의 공간을 조절하여 컨텐츠와 경계 사이에 공간을 만든다.


    <style>
        html {
            background-color: red;
        }

        body {
            margin: 0;
            background-color: seagreen;
        }

        div {
            height: 150px;
            width: 150px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div></div>

</body>

2.1 Padding의 특징

 1) 내부여백 : 요소 내부에 적용되어 컨텐츠와 경계 사이의 공간을 만든다.

 2) 값의 단위 : padding 값을 설정할 때 px, em, %등 의 값을 사용할 수 있다.

 3) 4개의 방향 : top, bottom, left, right 방향에 각각 값을 설정할 수 있다.

 

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

<head>
    <link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
    <meta charset="UTF-8">
    <title>HTML 연습</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
        html {
            background-color: red;
        }

        body {
            margin: 20px;
            padding: 20px;
            background-color: seagreen;
        }

        div {

            padding: 10px;
        }

        #fist {
            background-color: white;
            width: 150px;
            height: 150px;
        }

        #second {
            background-color: blue;
            width: 100px;
            height: 100px;
        }

        #third {
            background-color: wheat;
            width: 50px;
            height: 50px;
        }

        #fourth {
            background-color: yellow;
            width: 25px;
            height: 25px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="second">
            <div id="third">
                <div id="fourth"></div>
            </div>
        </div>
    </div>

</body>

</html>

 - 4개의 box : <div>요소는 서로 다른 ID와 스타일을 가지고 있어 웹 페이지의 공간을 조절하고 디자인을 향상시키는 역할을 수행한다.

 

 

 

Border

 - border는 box의 경계이다.

 - 즉, 요소의 외각선으로 경계의 스타일, 너비, 색상 등을 조절하여 요소의 형태와 레이아웃을 정의할 수 있다.

 

3.1 Border의 주요 속성

 1) border-style

 - 테두리의 스타일을 지정한다. solid, dashed, dotted, double 등

 2) border-width

 - 테두리의 너비를 지정한다.

 3) border-color

 - 테두리의 색상을 지정한다.

 4) border-raduys

 - 테두리의 모서리를 둥글게 만든다.

 

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

<head>
    <link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
    <meta charset="UTF-8">
    <title>HTML 연습</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
        * {
            border: 2px solid black;
        }

        html {
            background-color: red;
        }

        body {
            margin: 20px;
            padding: 20px;
            background-color: seagreen;
        }

        div {
            padding: 10px;
            border: 2px solid black;
        }

        #fist {
            background-color: white;
            width: 150px;
            height: 150px;
        }

        #second {
            background-color: blue;
            width: 100px;
            height: 100px;
        }

        #third {
            background-color: wheat;
            width: 50px;
            height: 50px;
        }
        span {
            border-style: dotted;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="second">
            <div id="third">
                <span>hello</span>
            </div>
        </div>
    </div>

</body>

</html>

 전체요소 스타일링

 - * 선택자를 사용해 페이지내의 모든 요소에 테두리 스타일을 적용

div요소 스타일링

 - * 선택자에 의해 2px너비의 검은색 실선이 적용되었다. 

span요소 스타일링

 - span요소의 테두리 스타일을 dotted(점선)으로 변경

 

 

 

 

 

 

 

728x90
반응형
LIST
저작자표시 비영리 동일조건

'WEB > HTML, CSS' 카테고리의 다른 글

CSS - Flexbox(5)  (0) 2023.12.10
CSS - Classes, inline Block(4)  (0) 2023.12.09
CSS box - (2)  (0) 2023.10.16
CSS - How to Add CSS to HTML (1)  (0) 2023.10.15
HTML Form Tags - (2)  (0) 2023.10.11
'WEB/HTML, CSS' Related Articles more