[CSS] 개발중에 알림, 오류, 디버그 등을 표출하는 디자인

.todo { position:relative; border:1px solid #8e2225; background:#fcf1f1; padding:10px 10px 5px 15px; font-size:13px; line-height:18px; font-family:'Arial','맑은고딕'; margin:25px 0 15px; }
.todo::before { position:absolute; display:block; content:'TODO'; top:-12px; left:5px; background:#8e2225; z-index:2; color:#fff; font-size:12px; line-height:18px; padding:0 6px; }

오늘의 할일은 ......

[CSS] <li>의 marker와 텍스트 간격 조절하기

<ul>
    <li>리스트 : 현재의 SQL문에 조건 추가 (상태처리값에 따른 구분 필요함)</li>
    <li>삭제 : 개별삭제, 선택삭제, 전체삭제</li>
    <li>견적요청 작성 : 페이지 이동 UI</li>
</ul>

<style>
    ul { padding-left:15px; list-style-position:outside; }
    li { list-style-type:disc; padding-left:-5px; }
</style>

padding-left:-5px; 이 li의 marker와 텍스트 사이의 간격을 줄여준다. 

단 이때 list-style-position:outside; 로 디자인되어야 한다.