기본 선택자

선택자 종류	정의	기호	예시 코드
전체 선택자	모든 요소를 선택하는 선택자	*	* { margin: 0; padding: 0; }
태그 선택자	특정 HTML 태그를 선택하는 선택자	태그명	p { color: red; }
클래스 선택자	특정 클래스 이름을 가진 요소를 선택하는 선택자	.클래스명	.button { background-color: blue; }
아이디 선택자	특정 아이디를 가진 요소를 선택하는 선택자	#아이디명	#header { background-color: green; }
그룹 선택자	여러 선택자를 묶어 동일한 스타일을 적용	선택자1, 선택자2	h1, h2, h3 { color: purple; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기본 선택자</title>
    <style>
        /* 전체 선택자  : * */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        /* 태그 선택자  : 태그이름 */
        body {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
        /* id 선택자    : #아이디 */
        #title {
            font-size: 40px;        /* fz40 */
            margin-bottom: 20px;    /* mb20 */
        }
        /* class 선택자 : .클래스 */
        .btn {
            padding: 10px 12px;               /* p10-12 */
            text-decoration: none;            /* tdn */
            color: white;                   /* c:white */
            background-color: royalblue;    /* backco */
            border-radius: 6px;               /* borr */
        }
        /* 그룹 선택자  : 선택자1, 선택자2, ... */
        .btn, .text {
            font-size: 16px;
        }
        p {
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1 id="title">제목 입니다.</h1>

    <a href="" class="btn">버튼1</a>
    <a href="" class="btn">버튼2</a>
    <a href="" class="btn">버튼3</a>
    <a href="" class="btn">버튼4</a>
    <a href="" class="btn">버튼5</a>

    <p class="text">문장 입니다.</p>
</body>
</html>
HTML
복사