[할 일 목록 #2] CSS 로 이쁘게 꾸미기 (To-do list)

강의 목표

저번 시간에는 html을 이용해서 기본 페이지를 만들었습니다. 하지만 아직 꾸미지 않았기 디자인이 완성 되지 않은 느낌입니다. 이번 시간에는 css를 이용해서 index.html 파일을 아래와 같이 이쁘게 꾸며보겠습니다.

See the Pen todo list by David Kijung Park (@ramiram) on CodePen.

css 파일 만들기

먼저 이번 강의에 코딩할 style.css 파일을 저번에 만든 index.html 과 같은 폴더에 만들어 줍니다. index.html 파일이 들어있는 폴더에서 오른쪽 클릭 후 새 텍스트 파일을 만든다음에 파일 이름을 style.css 로 바꿔 주시면 됩니다.

css 파일을 html 파일에 연결 하기

css 파일을 만들었으니 이제 html 파일에 css 파일을 <link> 태그를 이용해서 연결 하겠습니다. <link> 태그 안에 href 속성에는 파일 이름을 지정합니다. 저희는 style.css 라고 이름을 지었으니 그 파일 이름을 넣어줍니다.

<head> 태그 안에 <meta> 태그 아래에 넣어줍니다.

<link rel="stylesheet" href="style.css" />

<link> 태그까지 추가 된 지금까지 만든 html 코드입니다. 지금까지 만들어 놓은 id와 class를 이용해서 스타일링할 예정입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <title>
      할일 목록
    </title>
  </head>
  <body>
    <div class="container">
      <div class="input-container">
        <input id="input" placeholder="예) 코딩공부하기" />
        <button id="add-button">추가</button>
      </div>
      <div class="list-container">
        <h1>할 일 목록</h1>
        <ul id="list">
          <li class="list-item">코딩팍 팔로우하기</li>
          <li class="list-item">html 꾸미기</li>
        </ul>
      </div>
    </div>
  </body>
</html>

css 코딩 시작

css 의 기본적인 파일 구조를 간단히 설명하겠습니다. css 파일의 기본적인 포맷은:

스타일을-바꿀-요소 {   
    /* 스타일링 코드 */
}

입니다. 여기서 스타일을 바꿀 엘리멘트는 id, class 또는 요소를 타겟팅 할 수 있습니다.

id 타겟팅은 #으로 합니다.
예시) #input { /*스타일링 */ }

class 타겟팅은 . 으로 합니다.
예시) .container { /*스타일링 */ }

요소 타겟팅은 태그 이름으로 합니다.
예시) h1 { /*스타일링 */ }

이제부터 저희의 할 일 목록을 위에서부터 아래로 스타일링하겠습니다.

1. .container

처음으로 꾸밀 요소는 모든 요소들을 감싸고 있는 <div class="container">입니다. 클래스이기 때문에 .으로 타겟팅 합니다.

.container {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    padding: 32px 0;
}

background-color: #f9f9f9; 배경색을 #f9f9f9 (밝은 회색)으로 바꿔줍니다
display: flex; 디스플레이를 flex로 바꿔줍니다. flex 를 이용하면 요소들을 중앙에 두는데 편합니다.
flex-direction: column; 이 클래스 안에 있는 요소들이 위에서 아래 (수직)로 쌓이게 해 줍니다.
padding: 32px 0; 위아래의 여백을 32픽셀로 설정해 줍니다. 너무 화면 모서리와 붙어 있는 걸 방지해 줍니다.

2. .input-container

<input>과 <button>을 감싸고 있는 <div class="input-container">를 스타일링하겠습니다.

.input-container {
    width: 80%;
    display: flex;
    align-self: center;
    justify-content: space-between;
}

width: 80%; 양 옆에 여백을 10%씩 두기 위해서 넓이를 80%를 설정합니다.
display: flex; 여기서 flex를 이용해서 이 요소를 중앙에 위치하게 만들고 자식 요소들이 서로 자동으로 거리를 두게 합니다. (align-self와 justify-content 속성을 이용해서)
algin-self: center; 디스플레이 속성이 flex 이기 때문에 자동으로 중앙에 위치시켜 줍니다.
justify-content: space-between; 자식 요소들이 서로 자동으로 거리를 두게 합니다. <input>과 <button> 사이에 여백이 자동으로 남은 여백으로 설정된 것이 보입니다.

3. #input

사용자의 입력 칸인 <input id="input" /> 을 스타일링하겠습니다.

#input {
    width: 70%;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #eaeaea;
}

width: 70%; 먼저 넓이를 70%로 설정합니다.
padding: 8px 12px; 여백을 위아래로 8px, 좌우로 12px을 줍니다. padding으로 생기는 여백은 입력 창 안에서 생기기 때문에 힌트 문자와 사용자 입력 문자를 입력창 모서리에서 떨어뜨려 줘서 여유롭게 해 줍니다.
border-radius: 4px; 입력창의 모서리를 둥글게 해 줍니다.
border: 1px solid #eaeaea; 경계선을 1px 두께, 선으로, #eaeaea 색깔로 만들어 줍니다.

4. #add-button

추가 버튼인 <button id="add-button">을 스타일링하겠습니다.

#add-button {
    width: 20%;
    background-color: #1890ff;
    border-radius: 4px;
    border: 1px solid #41a3fe;
    color: white;
}

width: 20%; 넓이를 20%로 설정해 줍니다. 위에서 입력창이 70% 넓이 엿으니, 10%의 여백을 주기 위해서입니다.
color: white; 폰트 색을 흰색으로 만듭니다.

5. .list-container

이제 할 일 목록 제목인 <h1> 태그와 <ul>을 감싸고 있는 <div class="list-container"> 를 스타일링하겠습니다.

.list-container {
    display: flex;
    flex-direction: column;
    margin-top: 48px;
    width: 80%;
    align-self: center;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    background-color: white;
}

display: flex, flex-direction: column; 자식 요소들이 위아래로 (수직)으로 쌓이게 만듭니다.
margin-top: 48px; 위에 여백을 48픽셀로 설정합니다. 유저 입력창과 거리를 주기 위해서입니다.

나머지 속성들은 위에서 이용했던 속성들과 같습니다.

6. h1

할 일 목록의 제목을 스타일링하겠습니다. 이번에는 id와 class가 없이 <h1> 요소 자체를 타기팅해서 꾸미겠습니다.

h1 {
    padding: 16px 24px;
    margin: 0;
    font-size: 16px;
    border-bottom: 1px solid #eaeaea;
}

margin: 0; h1 요소에는 기본적으로 위아래 여백을 주기 때문에 그걸 없애기 위해 0으로 설정합니다.
font-size: 16px; 폰트 사이즈를 16픽셀로 바꿔줍니다.

나머지 속성들은 위에서 이용했던 속성들과 같습니다.

7. #list

리스트인 <ul id="list">를 스타일링하겠습니다.

#list {
    margin: 32px 0;
}

8. .list-item

마지막으로 리스트 아이템인 <li class="list-item">을 스타일링하겠습니다. 오른쪽에 margin을 줘서 화면 끝에서 떨어지게 하고 위아래로 padding을 줌으로서 내용물을 테두리로 부터 여유를 줬습니다.

.list-item {
    border-bottom: 1px solid #eaeaea;
    margin-right: 32px;
    padding: 16px 0;
    font-size: 14px;
}

정리

여기까지 잘 따라오셨나요? html 코드의 요소들을 타겟팅해서 스타일링 하는 법을 배웠습니다. 위에 코드 외에도 본인의 취향대로 꾸며보세요!

지금까지 만든 css 코드:

.container {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    padding: 32px 0;
}

.input-container {
    width: 80%;
    display: flex;
    align-self: center;
    justify-content: space-between;
}

#input {
    width: 70%;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #eaeaea;
}

#add-button {
    width: 20%;
    background-color: #1890ff;
    border-radius: 4px;
    border: 1px solid #41a3fe;
    color: white;
}

.list-container {
    display: flex;
    flex-direction: column;
    margin-top: 48px;
    width: 80%;
    align-self: center;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    background-color: white;
}

h1 {
    padding: 16px 24px;
    margin: 0;
    font-size: 16px;
    border-bottom: 1px solid #eaeaea;
}

#list {
    margin: 32px 0;
}

.list-item {
    border-bottom: 1px solid #eaeaea;
    margin-right: 32px;
    padding: 16px 0;
    font-size: 14px;
}

축하합니다!

이제 css의 기본을 익히셨으니 얼마든지 html을 이쁘게 꾸밀 수 있게 되었습니다. 다음 시간에는 Javascript를 이용해서 버튼 기능을 구현해 보겠습니다.

[할 일 목록 #3] Javascript로 버튼 누르는 기능 만들기 (To-do list)

'개발 Develop > HTML, CSS, Javascript' 카테고리의 다른 글

[HTML 배우기] input 태그: 사용자 입력칸 (0)	2020.05.23
[할 일 목록 #3] Javascript로 버튼 누르는 기능 만들기 (To-do list) (0)	2020.05.23
[할 일 목록 #1] HTML 으로 기본 페이지 만들기 (To-do list) (0)	2020.05.20
[할 일 목록 #0] 웹 사이트 만들기 프로젝트 HTML, CSS, Javascript로 할 일 목록 (To-do List) 만들기 소개 (0)	2020.05.20
코딩팍과 함께 실전 코딩 배우기 (0)	2020.05.20