자주 사용하는 디자인 코드

/*

    자주 사용하는 디자인 코드를 모아놓은 파일

*/

@charset "UTF-8";

* {

    box-sizing: border-box;

    font-family: 'Noto Sans KR', sans-serif;

}

/*

    컨테이너(Container)

    - 화면의 단위

    - 가운데 정렬되도록 구현

    - 내부에 행(row)을 배치하여 원하는 화면을 구성

*/

.container {

    margin-left: auto;

    margin-right: auto;

}

/*

    자주 사용할 것으로 예상되는 폭을 클래스로 지정

    - 최소 300px, 최대 1200px까지 100px 단위로 설정

    - 100부터는 비율(%)로 설정

*/

.w-100 { width:100%; }

.w-300 { width:300px; }

.w-400 { width:400px; }

.w-500 { width:500px; }

.w-600 { width:600px; }

.w-700 { width:700px; }

.w-800 { width:800px; }

.w-900 { width:900px; }

.w-1000 { width:1000px; }

.w-1100 { width:1100px; }

.w-1200 { width:1200px; }

/*

    컨테이너에 배치할 태그의 자리를 row라고 부른다

*/

.row {

    margin:10px 0px;

}

/*

    정렬 스타일

*/

.row {

    text-align: center;

}

.left {

    text-align: left;

}

.center {

    text-align: center;

}

.right {

    text-align: right;

}

/*

    입력창 디자인

    - 글자가 핵심이므로 글자 크기를 정하고 나머지를 비율(em)로 설정

*/

.form-input,

.btn

{

    /* a 태그 때문에 추가한 속성 */

    display: inline-block;

    text-decoration: none;

    vertical-align: bottom;

    font-size: 20px;

    padding: 0.5em 1em;

    outline: none; /*outline은 입력 창 선택 시 강조 효과 */

    border: 1px solid #636e72;

    border-radius: 0.1em;

    line-height: 1.2em;

}

.form-input:focus {/*선택된 상태를 focus라 한다 */

    border-color: #2d3436;

}

/*

    입력창의 변형(확장) 스타일

    - 기본 스타일에 옵션을 추가하듯이 추가 클래스를 작성하여 적용

*/

/*

    2개 클래스가 모두 적용된 경우만 디자인하도록 설정

*/

.form-input.form-underline {

    border-top: none;

    border-left: none;

    border-right: none;

    border-radius: 0px;

    padding-left: 0px;

    padding-right: 0px;

}

/*

    입력창 변형 스타일

    - 배경이미지를 포함하는 입력창

    - background-image 속성 사용

*/

.form-input.form-image {

    padding-left: 2em;

    /* background-image: url("./images/email-icon.png"); */

    background-size: 1.25em;

    background-repeat: no-repeat;

    background-position-x: 0.35em;

    /* background-position-y: 50%; */

    background-position-y: center;

}

/*

    textarea는 크기 조정을 resize라는 속성으로 제어한다

*/

textarea.form-input {

    resize: vertical;

    min-height:6em;

}

textarea.form-input.fixed {

    resize: none;

}

/*

    버튼은 입력창과 동일하게 구현

    글자를 두껍게 보여주도록 처리(bold)

*/

.btn {

    font-weight: bold;

    border-color: #2d3436;

    background-color: white;

    color: #2d3436;

    cursor: pointer;

}

.btn:hover { /*마우스가 버튼에 올라가면 배경을 조금 더 어둡게*/

    filter:brightness(98%);

}

/*

    버튼은 역할에 따라 구분

    - 긍정버튼 - 페이지의 목적을 달성할 수 있도록 하는 버튼

    - 중립버튼 - 페이지의 목적과 아무 상관 없는 버튼(기본값)

    - 부정버튼 - 페이지의 목적을 달성할 수 없도록 하는 버튼

*/

.btn.btn-positive {

    border-color: #0984e3;

    background-color: #0984e3;

    color: white;

}

.btn.btn-negative {

    border-color: #e17055;

    background-color: #e17055;

    color: white;

}

/*

    간격 스타일(spacing)

    - margin, padding을 자주 사용하는 것들 위주로 클래스화

    - 기본 간격은 10px이며 10px 단위로 설정 가능하도록 구현

    - margin은 m, padding은 p로 설정

*/

.m-10 { margin: 10px; }

.m-20 { margin: 20px; }

.m-30 { margin: 30px; }

.m-40 { margin: 40px; }

.m-50 { margin: 50px; }

.mh-10 { margin:0px 10px; }

.mh-20 { margin:0px 20px; }

.mh-30 { margin:0px 30px; }

.mh-40 { margin:0px 40px; }

.mh-50 { margin:0px 50px; }

.mv-10 { margin:10px 0px; }

.mv-20 { margin:20px 0px; }

.mv-30 { margin:30px 0px; }

.mv-40 { margin:40px 0px; }

.mv-50 { margin:50px 0px; }

.mt-10 { margin-top: 10px; }

.mt-20 { margin-top: 20px; }

.mt-30 { margin-top: 30px; }

.mt-40 { margin-top: 40px; }

.mt-50 { margin-top: 50px; }

.mb-10 { margin-bottom: 10px; }

.mb-20 { margin-bottom: 20px; }

.mb-30 { margin-bottom: 30px; }

.mb-40 { margin-bottom: 40px; }

.mb-50 { margin-bottom: 50px; }

.ms-10 { margin-left: 10px; }

.ms-20 { margin-left: 20px; }

.ms-30 { margin-left: 30px; }

.ms-40 { margin-left: 40px; }

.ms-50 { margin-left: 50px; }

.me-10 { margin-right: 10px;}

.me-20 { margin-right: 20px;}

.me-30 { margin-right: 30px;}

.me-40 { margin-right: 40px;}

.me-50 { margin-right: 50px;}

/*

    테이블 디자인

    - 클래스가 table인 항목을 디자인

    - 연계 선택자를 이용하여 대상을 제한해야 함

    연계 선택자

    [1] .table th - .table 안에 있는 모든 th를 의미 (후손선택자)

    [2] .table > thead > tr > th - 직접적인 경로를 알려주어 th를 선택(자식선택자)

*/

.table {

    width:100%;

    border-spacing: 0px;

    border-collapse: collapse;

}

.table > thead > tr > th,

.table > thead > tr > td,

.table > tbody > tr > th,

.table > tbody > tr > td,

.table > tfoot > tr > th,

.table > tfoot > tr > td

{

    padding:0.25em;

}

/*

    확장 스타일 - 테두리가 있는 테이블

*/

.table.table-border {

    border: 1px solid #2d3436;

}

.table.table-border > thead > tr > th,

.table.table-border > thead > tr > td,

.table.table-border > tbody > tr > th,

.table.table-border > tbody > tr > td,

.table.table-border > tfoot > tr > th,

.table.table-border > tfoot > tr > td

{

    border: 1px solid #2d3436;

}

/*

    확장 스타일 - 마우스 반응 테이블

*/

.table.table-hover > tbody > tr:hover {

    background-color: #dfe6e9;

}

/*

    확장 스타일 - 줄무늬 테이블

*/

.table.table-stripe > thead {

    background-color: #dfe6e9;

}

.table.table-stripe > tbody > tr:nth-child(2n) {

    background-color: #dfe6e9;

}

/*

    확장 스타일 - 옆트임 테이블

*/

.table.table-slit {

    border-top: 1px solid #2d3436;

    border-bottom: 1px solid #2d3436;

}

.table.table-slit > thead {

    border-bottom: 1px solid #2d3436;

}

.table.table-slit > tfoot {

    border-top: 1px solid #2d3436;

}

.table.table-slit > tbody > tr :not(tr:last-child) {

    border-bottom: 1px dotted #2d3436;

}

/*

    페이지 네비게이터 디자인

*/

.page-navigator > a {

    display:inline-block;

    font-size: 12px;

    padding: 0.5em;

    min-width:2.25em;

    cursor: pointer;

    text-decoration: none;

    /* border:1px solid #2d3436; */

    box-shadow: 0px 0px 1px 0px #2d3436;

    color: #2d3436;

}

.page-navigator > a.on,

.page-navigator > a:hover {

    /* border-color: #0984e3; */

    box-shadow: 0px 0px 2px 0px #0984e3;

    color: #0984e3;

}

/*

    글자 색상과 관련된 클래스

    - 아이콘에도 사용 가능

*/

.red { color: #d63031; }

.blue { color:#0984e3; }

.yellow { color:#fdcb6e; }

.green { color:#00b894; }

.gray { color:#b2bec3; }

.black { color:#2d3436; }

.white { color:#FFF; }

/*

    전체 화면 디자인

*/

.backdrop {

    /*

        opacity는 현재 태그 뿐 아니라 내부 태그의 투명도도 조절한다

    */

    background-color: rgba(0, 0, 0, 0.1);

    /* background-color: black; */

    /* opacity: 0.1; */

    /* 전체 화면을 덮을 수 있도록 위치 설정 */

    position: fixed;

    top:0px;

    left:0px;

    right:0px;

    bottom:0px;

}

/*

    화면의 가운데 위치시키는 방법

    [1] margin을 음수로 부여하는 방법(폭을 알 때)

        - 모든 브라우저에서 작동하는 코드

        - 폭을 모를 때는 사용할 수 없다

        .backdrop > .modal {

            background-color: white;

            width: 100px;

            height: 100px;

            position: fixed;

            top:50%;

            left:50%;

            margin-top: -50px;

            margin-left: -50px;

        }

    [2] 폭을 몰라도 가운데로 배치하는 방법

    - transform 속성을 사용하여 translate 함수로 이동 처리

    - translate 함수는 현재 대상을 기준으로 비율을 계산한다

    .backdrop > .modal {

        background-color: white;

        position: fixed;

        top:50%;

        left:50%;

        transform: translate(-50%, -50%);

    }

    [3] flexible layout을 사용하는 방법

    .backdrop {

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .backdrop > .modal {

        background-color: white;

    }

*/

/* 영역 가운데 위치시키는 필살 클래스(2번 방법 사용) */

.position-center {

    position: absolute;

    top:50%;

    left:50%;

    transform: translate(-50%, -50%);

}