HTML, CSS, Javascript로 To Do List 만들기 - CSS로 간단히 정렬하기

나중에 예쁘게 꾸미는 것은 맨 뒤의 이야기로 지금은 CSS를 사용해 요소들을 페이지 가운데에 정렬하게 만드는 정도로 하겠습니다.

 

각 항목이 위에서 아래로 흐르고 좌우로 가운데에 놓기 위해서 flex-direction: column과 align-itmes: center;를 사용합시다.

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

 

 

겹쳐있으면 곤란하니 각 항목에 여백을 주고

#title {
    margin-bottom: 20px;
}

#inputSection {
    margin-bottom: 20px;
}

 

#title은 #inputSection( 입력할 칸, 버튼들이 있는 구역)과 아래로 여백 차이가 20px

#inputSection과 #table의 아래로 여백 차이가 20px

 

table {
    width: 75%;
    margin-bottom: 20px;
    border-collapse: collapse;
}

 

표의 가로 길이를 전체 페이지의 75%로 설정

여백 차이 20px

border-collapse로 테이블 테두리와 안의 값이 간격이 없다고 설정합니다.

 

th, td {
    height: 50px;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
}

 

칸의 높이를 50px

표의 선 두께를 1px, 검정색

내용이 가운데 오도록 설정합니다.

 

th:nth-child(1), td:nth-child(1) {
    width: 10%;
}

th:nth-child(2), td:nth-child(2) {
    width: 45%;
}

th:nth-child(3), td:nth-child(3) {
    width: 20%;
}

th:nth-child(4), td:nth-child(4) {
    width: 20%;
}

 

만들다 보니 칸의 가로 비율이 신경쓰여서 각 칸마다 보기 좋게 비율을 설정합니다.

No는 10%, Content는 45%, Done과 Delete는 각 20%

 

.button-done {
    background-color: #05f96f;
    color: white;
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50%;
}

 

HTML로 표시 안하고 앞으로 JavaScript로 구현할 할 일을 마쳤다는 의미의 Done 버튼 입니다. 대충 초록색 아무거나 골랐습니다.

 

.button-delete {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50%;
}

 

각 항목을 삭제할 Delete 버튼입니다. Done 버튼과 동일한 디자인을 가지고 있습니다. 이것은 빨간색 아무거나 찍어서 설정했습니다.

 

CSS로 HTML에 만든 뼈대를 예쁘게 정렬했습니다. 이제 JS로 기능을 구현하도록 하겠습니다.

 

만들어진 구성

이얏!