CreatorLMS Editor

<style>
  .kv-list{ display:flex; flex-direction:column; gap:.65rem; }
  .kv-row{ display:flex; align-items:flex-start; gap:12px; }
  .kv-label{ width:160px; font-weight:600; color:#374151; white-space:nowrap; padding-top:6px; }
  .kv-sep{ width:1px; background:rgba(0,0,0,.08); margin-top:4px; margin-bottom:4px; }
  .kv-value{ flex:1; min-width:0; padding-top:0; }
  .kv-value, .kv-value *{ text-align:left; }

.radio-row{ display:flex; flex-wrap:wrap; gap:.75rem 1.2rem; padding-top:4px; }
  .radio-row .form-check{ margin:0; }

.help-muted{ color:#6b7280; font-size:.85rem; }

@media (max-width: 576px){
    .kv-label{ width:120px; }
  }
</style>

<div class="d-flex align-items-center justify-content-between mb-2">
  <div>
    <h1 class="h4 mb-1">공지사항 상세

</h1>
    <div class="text-muted">공지 내용을 확인하고 수정할 수 있습니다.</div>
  </div>

</div>

<div class="kv-row">
            <div class="kv-label">제목</div><div class="kv-sep"></div>
            <div class="kv-value">
              <input type="text" class="form-control" maxlength="80" style="max-width:720px;"
                     value="시스템 점검 안내 (2월 20일)">
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">노출 여부</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="radio-row">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="is_visible" id="vis_y" checked>
                  <label class="form-check-label" for="vis_y">노출</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="is_visible" id="vis_n">
                  <label class="form-check-label" for="vis_n">비노출</label>
                </div>
              </div>
              <div class="help-muted mt-1">* 비노출은 사용자 화면에 표시되지 않습니다.</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">상단 고정</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="radio-row">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="is_pinned" id="pin_n">
                  <label class="form-check-label" for="pin_n">일반</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="is_pinned" id="pin_y" checked>
                  <label class="form-check-label" for="pin_y">고정</label>
                </div>
              </div>
              <div class="help-muted mt-1">* 고정 공지는 리스트 상단에 우선 노출됩니다.</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">내용</div><div class="kv-sep"></div>
            <div class="kv-value">
              <textarea class="form-control" rows="10" style="max-width:980px;">안녕하세요.
서비스 안정화를 위해 아래 일정으로 시스템 점검을 진행합니다.

- 일시: 2026-02-20 02:00 ~ 04:00
- 영향: 관리자/사용자 페이지 접속 불가

이용에 불편을 드려 죄송합니다.</textarea>
              <div class="help-muted mt-1">* 프로토타입에서는 저장되지 않습니다.</div>
            </div>
          </div>

</div>

간단 소스 편집기