h1 { color: blue; }      /* 태그 선택자 */
.text { color: green; }  /* 클래스 선택자 */
#main { font-size: 24px; } /* ID 선택자 */

<h1>제목</h1>
<p class="text">이것은 클래스 스타일이 적용된 문장입니다.</p>
<p id="main">이것은 ID 스타일이 적용된 문장입니다.</p>

div p { color: red; }   /* div 내부의 모든 p 태그 */
div > p { font-size: 18px; } /* div의 직계 자식 p */
h1 + p { font-style: italic; } /* h1 바로 다음 p */

<div>
    <p>이것은 빨간색입니다.</p> <!-- div 내부 -->
</div>
<h1>제목</h1>
<p>이것은 기울임 글씨입니다.</p> <!-- h1 바로 다음 p -->

p {
    color: blue;
    font-size: 16px;
    text-align: center;
}

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

<div class="box">박스 모델 예제</div>

.container {
    background-color: lightgray;
    border: 2px dashed red;
    border-radius: 10px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 브라우저 너비가 600px 이하일 때 배경색이 바뀜 */

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}