[PROJECT] jQuery-UI를 이용한 Trello clone project (3) Trello 웹 스타일 입히기

jQuery-UI를 이용한 Trello clone project (3) - 웹 스타일 입히기

지난 시간에

Trello 클론 프로젝트의 html 업을 작성해 보았다. 오늘은 퍼블리싱의 꽃인 스타일 입히기를 해보자.

 

Style 입히기

이번에는 scss 를 사용한다. 하지만 내가 scss 를 잘 모르고 사용한 것을 프로젝트를 완성한 다음에야 깨달았다. 그래서 물론 사용은 해보겠지만 이번 프로젝트와 같이 사용하는 것은 추천하지 않는다. 다음 프로젝트에서는 좀더 체계적으로 사용하는 모습을 보여주겠다.

자 그럼 스타일을 입혀보자. 저번 첫 차시에서

sass --watch scss/style.scss:css/style.css 명령어를 작성했던 것이 기억 날것이다. 이 명령을 이용하면 매번 명령을 치지 않아도 scss 의 변경을 감지해서 css 로 변환 시켜 준다.

 

helper 작성

나는 scss 에서 색깔이나 mixin, extends 등을 helper 라고 정의한다.

# /scss/style.scss

$nav-color: #6F777B;
$bg-color: #838C91;
$list-color: #DFE3E6;
$list-placeholder-color: #737B7F;
$card-placeholder-color: #D6DCE0;
$font-color: #2F4E60;
$btn-color: #5AAC44;
$thumb-color: #A9ADB0;
$shadow: 1px 1px 1px 0px rgb(186, 186, 186);

@import url(https://fonts.googleapis.com/css?family=Lato|Roboto);

사용하는 색상 코드를 정의 했다. 이때까지만 해도 extend 의 개념을 몰랐다. 다음번에 scss 관련 문법을 정리하여 포스팅 해보겠다.

 

기본 뼈대 코드 작성 (초기화 코드)

# /scss/style.scss

html, body {
  min-width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* 커스텀 스트롤 디자인을 위한 코드 */
::-webkit-scrollbar {
  width: 7px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

::-webkit-scrollbar-track {
  background: $list-color;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: $thumb-color;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

input, button, textarea {
  font-family: 'Lato', sans-serif;
}

/* 크롬에서 focus 시 파란 테두리가 생기는 것을 방지 */
input, textarea {
  &:focus {
    outline: none;
  }
}

/* 기본 버튼 템플릿을 만들어 놓음 ( 다른 플젝에서도 많이 사용 ) */
.btn {
  padding: 5px 10px;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-shadow: $shadow;
  cursor: pointer;
  font-size: 15px;
}

.btn-green {
  background: $btn-color;
  color: white;
}

/* 가장 부모 엘리먼트 */
.wrapper {
  width: 100%;
  min-height: 100vh;
  background: $bg-color;
}

/* navigation 스타일 */
nav {
  height: 50px;
  background: $nav-color;
  text-align: center;
  color: #fff;
  line-height: 50px;
  font-size: 18px;
  font-weight: 100;
  font-family: 'Roboto', sans-serif;
}

vh, vw 는 웹사이트의 브라우저의 넓이, 높이를 100으로 나누어 사용하는 단위이다. 100vh 는 웹 브라우저의 전체 높이를 말한다. 주석으로 나누어 설명은 했으나 궁금한 점이 있으면 댓글에 적어주세요...

 

contentWrap & projectTitleWrap 스타일 입히기

# /scss/style.scss

#contentWrap {
  box-sizing: border-box;
  padding: 0px 15px;
  font-family: 'Lato', sans-serif;
  max-width: 100%;
  min-height: calc(100vh - 50px);
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

#projectTitleWrap {
  height: 50px;
  font-size: 17px;
  font-weight: bolder;

  #title {
    height: 100%;
    line-height: 50px;
    color: white;
    float: left;
  }

  #titleEdit {
    height: 100%;
    float: left;
    line-height: 50px;
    display: none;

    input {
      font-size: 17px;
      background: transparent;
      color: #fff;
      border: none;
      background: $nav-color;
      height: 35px;
      padding-left: 10px;
      font-weight: bolder;

      &::placeholder {
        font-weight: bolder;
        color: #fff;
      }
    }
  }
}

#contentWrap 으로 x 축의 overflow를 auto 로 처리하여 기존 Trello 처럼 x축 스크롤이 가능하게 했다. 그리고 white-space: nowrap; 속성을 사용하여 넘치는 요소들을 감싸지 않게 설정하면 list가 늘어나도 줄바꿈이 되지않고 증가할 수 있게 해준다.

 

listWrap 스타일 입히기

# /scss/style.scss

#listWrap {
  display: inline-block;
  vertical-align: top;
  .list {
    background: $list-color;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 250px;
    padding: 5px 10px;
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;
    margin-bottom: 35px;

    .listTitleWrap {
      height: 40px;
      font-size: 15px;
      margin-bottom: 10px;

      .title {
        height: 100%;
        line-height: 40px;
        color: $font-color;
        font-weight: 600;
        float: left;
      }

      .titleEdit {
        height: 100%;
        float: left;
        line-height: 40px;
        background: #d0d0d0;
        padding-left: 10px;
        display: none;

        input {
          font-size: 15px;
          background: transparent;
          color: $font-color;
          font-weight: 600;
          border: none;

          &::placeholder {
            color: $font-color;
          }
        }
      }
    }

    .cardWrap {
      min-height: 10px;
      max-height: 663px;
      overflow-y: auto;
      margin-bottom: 10px;

      .cardContent {
        padding: 7px 10px;
        background: white;
        width: calc(100% - 20px);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        overflow: hidden;
        -webkit-box-shadow: $shadow;
        -moz-box-shadow: $shadow;
        box-shadow: $shadow;
      }
    }

    .cardAddWrap {
      .addLabel {
        padding: 7px 5px;
        color: $bg-color;
        margin-bottom: 12px;
        cursor: pointer;
      }

      .addCard {
        display: none;

        textarea {
          border: none;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          padding: 7px 10px;
          width: calc(100% - 20px);
          font-size: 15px;
          resize: none;
          height: 80px;
          margin-bottom: 7px;
          -webkit-box-shadow: $shadow;
          -moz-box-shadow: $shadow;
          box-shadow: $shadow;
        }

        button {
          margin-bottom: 5px;
          float: left;
        }
      }
    }
  }
}

#listWrap과 .list을 inline-block 처리 한 후 vertical-align: top;을 주어 위로 정렬이 되게 하였다. 원래 scss 로 작성할 때 블럭이 5단계 이상 되면 나누는 것이 좋다. 다음 프로젝트에서는 제대로 나누어 개발해 보겠다.

그리고 scss 문법을 정리하여 올릴 예정이므로 이 프로젝트를 하다가 헷갈리는 문법이 있으면 참고바란다.

 

listAddWrap 스타일 입히기

# /scss/style.scss

#listAddWrap {
  display: inline-block;
  vertical-align: top;

  #addLabel {
    width: 250px;
    background: $nav-color;
    color: white;
    font-size: 15px;
    padding: 10px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
  }

  #addList {
    background: $list-color;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 250px;
    padding: 8px 10px;
    float: left;
    margin-right: 15px;
    display: none;

    input {
      padding: 7px 10px;
      background: white;
      width: calc(100% - 20px);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      border: none;
      margin-bottom: 7px;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
      overflow: hidden;
      font-size: 15px;
      -webkit-box-shadow: $shadow;
      -moz-box-shadow: $shadow;
      box-shadow: $shadow;
    }

    button {
      float: left;
      margin-bottom: 5px;
    }
  }
}

.close {
  float: left;
  display: flex;
  height: 28px;
  width: 28px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#listAddWrap 의 스타일 코드이다 딱히 어려운것이 없을 것 이다.

 

전체 코드

# /scss/style.scss

$nav-color: #6F777B;
$bg-color: #838C91;
$list-color: #DFE3E6;
$list-placeholder-color: #737B7F;
$card-placeholder-color: #D6DCE0;
$font-color: #2F4E60;
$btn-color: #5AAC44;
$thumb-color: #A9ADB0;
$shadow: 1px 1px 1px 0px rgb(186, 186, 186);

@import url(https://fonts.googleapis.com/css?family=Lato|Roboto);

html, body {
  min-width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 7px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

::-webkit-scrollbar-track {
  background: $list-color;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: $thumb-color;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

input, button, textarea {
  font-family: 'Lato', sans-serif;
}

input, textarea {
  &:focus {
    outline: none;
  }
}

.btn {
  padding: 5px 10px;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-shadow: $shadow;
  cursor: pointer;
  font-size: 15px;
}

.btn-green {
  background: $btn-color;
  color: white;
}

.card-placeholder {
  width: 250px;
  height: 33px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: $card-placeholder-color;
  margin-bottom: 12px;
}

.list-placeholder {
  width: 270px;
  height: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: $list-placeholder-color;
  margin-right: 15px;
  display: inline-block;
}

.ui-sortable-helper {
  transform: skew(-5deg, 5deg) !important;
}

.wrapper {
  width: 100%;
  min-height: 100vh;
  background: $bg-color;
}

nav {
  height: 50px;
  background: $nav-color;
  text-align: center;
  color: #fff;
  line-height: 50px;
  font-size: 18px;
  font-weight: 100;
  font-family: 'Roboto', sans-serif;
}

#contentWrap {
  box-sizing: border-box;
  padding: 0px 15px;
  font-family: 'Lato', sans-serif;
  max-width: 100%;
  min-height: calc(100vh - 50px);
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

#projectTitleWrap {
  height: 50px;
  font-size: 17px;
  font-weight: bolder;

  #title {
    height: 100%;
    line-height: 50px;
    color: white;
    float: left;
  }

  #titleEdit {
    height: 100%;
    float: left;
    line-height: 50px;
    display: none;

    input {
      font-size: 17px;
      background: transparent;
      color: #fff;
      border: none;
      background: $nav-color;
      height: 35px;
      padding-left: 10px;
      font-weight: bolder;

      &::placeholder {
        font-weight: bolder;
        color: #fff;
      }
    }
  }
}

#listWrap {
  display: inline-block;
  vertical-align: top;
  .list {
    background: $list-color;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 250px;
    padding: 5px 10px;
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;
    margin-bottom: 35px;

    .listTitleWrap {
      height: 40px;
      font-size: 15px;
      margin-bottom: 10px;

      .title {
        height: 100%;
        line-height: 40px;
        color: $font-color;
        font-weight: 600;
        float: left;
      }

      .titleEdit {
        height: 100%;
        float: left;
        line-height: 40px;
        background: #d0d0d0;
        padding-left: 10px;
        display: none;

        input {
          font-size: 15px;
          background: transparent;
          color: $font-color;
          font-weight: 600;
          border: none;

          &::placeholder {
            color: $font-color;
          }
        }
      }
    }

    .cardWrap {
      min-height: 10px;
      max-height: 663px;
      overflow-y: auto;
      margin-bottom: 10px;

      .cardContent {
        padding: 7px 10px;
        background: white;
        width: calc(100% - 20px);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        overflow: hidden;
        -webkit-box-shadow: $shadow;
        -moz-box-shadow: $shadow;
        box-shadow: $shadow;
      }
    }

    .cardAddWrap {
      .addLabel {
        padding: 7px 5px;
        color: $bg-color;
        margin-bottom: 12px;
        cursor: pointer;
      }

      .addCard {
        display: none;

        textarea {
          border: none;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          padding: 7px 10px;
          width: calc(100% - 20px);
          font-size: 15px;
          resize: none;
          height: 80px;
          margin-bottom: 7px;
          -webkit-box-shadow: $shadow;
          -moz-box-shadow: $shadow;
          box-shadow: $shadow;
        }

        button {
          margin-bottom: 5px;
          float: left;
        }
      }
    }
  }
}

#listAddWrap {
  display: inline-block;
  vertical-align: top;

  #addLabel {
    width: 250px;
    background: $nav-color;
    color: white;
    font-size: 15px;
    padding: 10px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
  }

  #addList {
    background: $list-color;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 250px;
    padding: 8px 10px;
    float: left;
    margin-right: 15px;
    display: none;

    input {
      padding: 7px 10px;
      background: white;
      width: calc(100% - 20px);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      border: none;
      margin-bottom: 7px;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
      overflow: hidden;
      font-size: 15px;
      -webkit-box-shadow: $shadow;
      -moz-box-shadow: $shadow;
      box-shadow: $shadow;
    }

    button {
      float: left;
      margin-bottom: 5px;
    }
  }
}

.close {
  float: left;
  display: flex;
  height: 28px;
  width: 28px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

이번 시간의 전체 코드이다.

 

결과화면

 

전에 마크업만 작성했을 때 화면보다 한결 보기 좋아졌다.

 

다음 시간에

다음 시간에는 돔을 제어하는 스크립트를 작성해보자