[Lunch Box] 5. css 파일

index.js에서는 두개의 css 파일인 textField.css, button.css를 import한다. 두 css 파일 모두 다른 모듈에서도 공통적으로 사용하기 때문에 index.js에서 import 하였다. 기본적인 스타일만 지정하였고 크기는 rem 단위를 이용하여 정의하였다.

 

rem은 root element에서 설정한 크기를 기준으로 몇배인가를 의미하는 단위이다. index.css에서 960px보다 큰 화면에서는 font-size를 100%(16px)로 설정하였고 960px보다 작은 화면에서는 80%(12.8px)로 정의하였다. 예를들어 font-size를 4rem으로 했다면 큰 화면에서는 64px 작은 화면에서는 51.2px로 나타내게 된다. 크기 단위를 px로 하면 화면 크기와 상관없이 같은 크기를 나타내게 된다. 화면크기에 따라 UI가 변하는 반응형 웹이 대세라는 생각에 rem을 단위로 크기를 설정하게 되었다.

 

textField.css

/* White Text Field*/
.lunchBox-textField-white-large{
    font-weight: bold;
    color: white;
    font-size: 4rem;
}
.lunchBox-textField-white-title{
    font-size: 1.5rem;
    color: white;
    font-weight: bold;
}
.lunchBox-textField-white-content{
    font-size: 1.25rem;
    color: white;
    font-weight: normal;
}
/* Dark White Text Field */
.lunchBox-textField-darWhtie-content{
    font-size: 1.25rem;
    color: #cccdce;
    font-weight: normal;
    font-family: 'Times';
}
/* Black Text Field*/
.lunchBox-textField-black-title{
    font-size: 1.5rem;
    color: #494949;
    font-weight: normal;
}
.lunchBox-textField-black-content{
    font-size: 1.25rem;
    color: #494949;
    font-weight: normal;
}
.lunchBox-textField-black-content-small{
    font-size: 1rem;
    color: #494949;
    font-weight: normal;
}

 

button.css

/* Rectangular Line Button */
.lunchBox-btn-rec-line{
    background: rgba(255, 255, 255, 1);
    font-family: 'Noto Sans KR';
    border: 1px solid black;
    font-size: 1rem;
    font-weight: normal;
    border-radius: 2px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    outline: none;
    color: #494949;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    box-sizing: border-box;
}
.lunchBox-btn-rec-line:hover{
    background-color: rgba(230, 230, 230, 1);
}
.lunchBox-btn-rec-line:active{
    background-color: rgba(180, 180, 180, 1);
}
/* Rectangular Solid Button */
.lunchBox-btn-rec-solid{
    cursor: pointer;
    background: rgb(50, 50, 50,1);
    font-family: 'Noto Sans KR';
    border: none;
    font-size: 1rem;
    font-weight: normal;
    border-radius: 2px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    outline: none;
    color:white;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}
.lunchBox-btn-rec-solid:hover{
    background-color: rgba(80, 80, 80, 1);
}
.lunchBox-btn-rec-solid:active{
    background-color: rgba(50, 50, 50, 1);
}
/* Round Button */
.lunchBox-btn-round{
    cursor: pointer;
    color: rgba(0, 0, 0, 0.87);
    width: auto;
    height: 3rem;
    padding: 1rem;
    font-size: 1rem;
    box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    font-weight: normal;
    border-radius: 24px;
    background: rgba(255, 255, 255, 1);
    border: none;
    outline: none;
}
.lunchBox-btn-round:hover{
    background-color: rgba(230, 230, 230, 1);
}
.lunchBox-btn-round:active{
    background-color: rgba(180, 180, 180, 1);
}
/* Tab Button */
.lunchBox-btn-tab{
    background: #181a1e;
    height:3.5rem;
    line-height: 3.5rem;
    width: 10rem;
    font-family: 'Noto Sans KR';
    border: none;
    font-size: 1rem;
    font-weight: normal;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    outline: none;
    color:rgba(255, 255, 255, 0.7);
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}
.lunchBox-btn-tab:hover{
    background-color: #333333;
}
.lunchBox-btn-tab-clicked{
    background: #181a1e;
    height:3.5rem;
    line-height: 3.5rem;
    width: 10rem;
    font-family: 'Noto Sans KR';
    border: none;
    font-size: 1rem;
    font-weight: normal;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    outline: none;
    color:white;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}
.lunchBox-btn-tab-clicked:hover{
    background-color: #333333;
}