To-Do 달력 제작을 위한 CSS 가이드

To-Do 달력 제작을 위한 CSS 가이드

To-Do 달력을 제작하면서 시각적으로 깔끔하고 직관적인 사용자 인터페이스(UI)를 제공하려면 적절한 CSS 스타일링이 필수적입니다. 이번 글에서는 초보자도 쉽게 따라 할 수 있도록 To-Do 달력에서 사용될 주요 CSS 스타일을 단계적으로 설명합니다. 각 코드와 함께 그 역할과 효과를 자세히 알아보겠습니다.

 

---

1. 테이블 스타일링

To-Do 달력에서 데이터를 표 형식으로 정리하려면 테이블 스타일링이 중요합니다. 기본적으로 테이블의 경계선(border)을 설정하고, 각 셀의 크기와 간격을 조정합니다. 아래 코드는 테이블 스타일을 간단하고 직관적으로 만드는 데 사용됩니다.

#todo-list td, #todo-list th, #todo-list tr {
    border: 1px solid lightgray; /* 테두리를 연한 회색으로 설정 */
    border-color: lightgray; /* 추가적으로 테두리 색상 명시 */
}

#todosMain-list td, #todosMain-list th, #todosMain-list tr {
    border: 1px solid lightgray; /* 동일한 스타일 적용 */
    border-color: lightgray;
}

설명

• border: 테이블의 셀, 헤더, 행을 구분하는 선을 설정합니다.
• border-color: 테두리 색상을 연한 회색으로 명시하여 깔끔한 느낌을 줍니다.

이 코드는 테이블을 더 선명하게 보이게 하며, 직관적으로 데이터를 구분할 수 있도록 도와줍니다.

---

2. 헤더 스타일링

테이블의 헤더는 다른 셀과 구별되도록 스타일링하는 것이 좋습니다.

.tui-grid-cell-header {
  font-size: 12px!important; /* 폰트 크기를 12px로 설정 */
}

설명

• font-size: 헤더 텍스트의 크기를 조정하여 내용을 명확히 전달합니다.
• !important: 다른 스타일 규칙보다 우선적으로 적용되도록 강제합니다.

이 설정은 헤더의 크기를 일정하게 유지하며, 달력의 전체적인 시각적 일관성을 제공합니다.

---

3. 모달 창 스타일링

To-Do 달력에는 추가 정보나 작업 세부 정보를 표시하기 위해 모달 창이 자주 사용됩니다. 아래는 모달 창의 스타일을 정의한 코드입니다.

.todo_modal-header {
    background-color: #1f48d4; /* 모달 헤더 배경색 */
    color: white; /* 텍스트 색상 */
    padding: 10px; /* 패딩 추가 */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; /* 모서리를 둥글게 */
    display: flex;
    justify-content: space-between; /* 제목과 닫기 버튼 간격 조정 */
    align-items: center;
}

.todo_modal-title {
    font-size: 18px; /* 제목 폰트 크기 */
}

.todo-close {
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer; /* 커서 변경 */
}

.close:hover,
.close:focus {
    color: #bbb; /* 닫기 버튼 호버 시 색상 변경 */
    text-decoration: none; /* 밑줄 제거 */
}

설명

• background-color: 모달 헤더를 파란색(#1f48d4)으로 설정하여 시각적으로 강조합니다.
• border-top-left-radius, border-top-right-radius: 모달 창의 상단 모서리를 부드럽게 만들어 사용자 경험을 개선합니다.
• display: flex: 헤더 내부 레이아웃을 정렬합니다.

이 코드는 To-Do 달력에서 사용자가 작업을 추가하거나 수정할 때 필요한 모달 창을 더욱 직관적으로 보여줍니다.

---

4. 모달 본문 및 카드 스타일링

모달 본문과 To-Do 항목 카드를 스타일링하는 코드입니다.

.todo_modal-body,
.todosMain_modal-body {
    padding: 15px;
}

.todo_custom-card,
.todosMain_custom-card {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

설명

• padding: 본문과 카드 내부에 여백을 추가하여 콘텐츠가 답답하지 않게 만듭니다.
• background-color: 카드 배경색을 연한 회색(#f9f9f9)으로 설정해 시각적인 편안함을 줍니다.
• box-shadow: 그림자를 추가하여 카드가 살짝 떠 있는 느낌을 줍니다.

---

5. 모달 창 레이아웃

모달 창이 화면 전체를 덮으며, 배경을 반투명하게 설정합니다.

.todo_modal,
#todosMainModal,
#todoModal {
    display: none;
    position: fixed;
    z-index: 1100; /* 화면 최상단에 위치 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6); /* 어두운 배경 설정 */
    padding-top: 80px; /* 상단 여백 추가 */
}

.todo_modal-content {
    background-color: #fefefe;
    margin: auto;
    border-radius: 10px;
    width: 80%;
    max-width: 1200px;
    animation: fadeIn 0.5s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

설명

• z-index: 모달 창을 화면 위에 표시합니다.
• background-color: 배경을 어두운 반투명 색상으로 설정하여 모달이 강조되도록 합니다.
• animation: fadeIn 0.5s;: 모달 창이 부드럽게 나타나는 애니메이션 효과를 추가합니다.

---

6. 테이블 셀 스타일링

마지막으로 테이블 셀의 텍스트 정렬과 간격을 설정하는 코드입니다.

#todosMain-list td,
#todo-list td {
    vertical-align: top;
    font-size: 13px;
    padding: 2px;
}

설명

• vertical-align: 셀의 텍스트가 위쪽에 정렬되도록 설정합니다.
• font-size: 텍스트 크기를 조정하여 가독성을 높입니다.
• padding: 셀 내부 여백을 추가합니다.

---

위 코드를 사용하면 To-Do 달력을 만드는 데 필요한 CSS가 완성됩니다. 각 코드의 역할을 이해하면서 프로젝트에 적용해 보세요. 간단한 CSS 설정만으로도 UI를 더욱 직관적이고 아름답게 만들 수 있습니다.

#todo-list td, #todo-list th, #todo-list tr {
    border: 1px solid lightgray; /* 또는 #d3d3d3 */
    border-color: lightgray; /* 추가 설정 */
}

#todosMain-list td, #todosMain-list th, #todosMain-list tr {
    border: 1px solid lightgray; /* 또는 #d3d3d3 */
    border-color: lightgray; /* 추가 설정 */
}

.tui-grid-cell-header{
  font-size:12px!important;
}

.todo_modal-header {
    background-color: #1f48d4;
    color: white;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.todo_modal-title {
    font-size: 18px;
}

.todo-close {
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

.todo_modal-body,
.todosMain_modal-body {
    padding: 15px;
}

.todo_custom-card,
.todosMain_custom-card {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.todo_modal,
#todosMainModal,
#todoModal {
    display: none;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6); /* 배경 어둡고 반투명 */
    padding-top: 80px;
}

.todo_modal-content,
.todo_modal-content {
    background-color: #fefefe;
    margin: auto;
    border-radius: 10px;
    width: 80%;
    max-width: 1200px;
    animation: fadeIn 0.5s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

#todosMain-list td,
#todo-list td {
    vertical-align: top;
font-size : 13px;
padding : 2px;
}