기본 선택자

선택자 종류	정의	기호	예시 코드
전체 선택자	모든 요소를 선택하는 선택자	*	* { 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
복사

게시판 글쓰기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시판 글쓰기</title>
    <style>
        /* 전체적인 레이아웃 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        /* 제목 스타일 */
        h1 {
            text-align: center;
            color: #333;
        }
        /* 폼 스타일 */
        .form-group { margin-bottom: 15px; }
        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }
        input[type="text"],
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: royalblue;
            color: white;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>게시판 글쓰기</h1>
        <form action="" method="post">
            <div class="form-group">
                <label for="title">제목</label>
                <input type="text" id="title" name="title" required>
            </div>

            <div class="form-group">
                <label for="writer">작성자</label>
                <input type="text" id="writer" name="writer" required>
            </div>

            <div class="form-group">
                <label for="content">내용</label>
                <textarea name="content" id="content" 
                          rows="10" required></textarea>
            </div>

            <div class="form-group">
                <button type="submit">작성하기</button>
            </div>
        </form>
    </div>
</body>
</html>
HTML
복사