[CSS] 1. CSS 선택자

Mar 07, 2025


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

<head>
    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
            border-radius: 10px;
        }

        #box {
            display: block;
        }

        div {
            background-color: aliceblue;
            font-size: 16px;
            font-weight: bold;
        }

        .red-box {
            background-color: red;
        }
    </style>
</head>

<body>
    <div>Hello World</div>
    <div class="box">Hello World</div>
    <div class="box">Hello World</div>
    <span id="box">Hello World</span>
    <span>Hello World</span>
    <div class="red-box">빨간 박스</div>
</body>

</html>

속성	설명
`border: 1px solid black;`	요소의 테두리를 1px 두께, 실선(`solid`), 검정(`black`)으로 설정
`padding: 10px;`	테두리와 내용 사이의 내부 여백을 10px 설정
`margin: 10px;`	요소 바깥쪽 여백을 10px 설정
`border-radius: 10px;`	모서리를 10px만큼 둥글게 만듦

CSS

[CSS] 1. CSS 선택자

백하림

Mar 07, 2025


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

<head>
    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
            border-radius: 10px;
        }

        #box {
            display: block;
        }

        div {
            background-color: aliceblue;
            font-size: 16px;
            font-weight: bold;
        }

        .red-box {
            background-color: red;
        }
    </style>
</head>

<body>
    <div>Hello World</div>
    <div class="box">Hello World</div>
    <div class="box">Hello World</div>
    <span id="box">Hello World</span>
    <span>Hello World</span>
    <div class="red-box">빨간 박스</div>
</body>

</html>

속성	설명
`border: 1px solid black;`	요소의 테두리를 1px 두께, 실선(`solid`), 검정(`black`)으로 설정
`padding: 10px;`	테두리와 내용 사이의 내부 여백을 10px 설정
`margin: 10px;`	요소 바깥쪽 여백을 10px 설정
`border-radius: 10px;`	모서리를 10px만큼 둥글게 만듦