static/css/style.css

/*
    [ CSS 기본 문법 ]
    AND 연산자 : 선택자 사이에 공백이 제거되는 경우 여러 선택자를 동시에 만족하는 태그의 스타일을 적용
    OR 연산자 : 두 선택자 중 하나라도 만족시 적용되는 조건 (쉼표를 통해 두 선택자 중 하나라도 만족시 적용)


    ".a .b .c" : a클래스 내부의 b클래스 내부의 c클래스 요소에만 스타일 적용
    ".a.b.c" : 클래스 속성 내에 a, b, c 모두 설정된 모든 요소들을 선택
    ".a, .b, .c" : 일치하는 모든 요스들을 선택
*/


/* Stocks 관련 */

/* .sec_cal { */
#nasdaq-table-container .stocks_wrap {
    width: 580px; /* 속성의 요소 너비 */
    margin: 0 auto;
    font-family: "NotoSansR";
}


/* .sec_cal .cal_wrap { */
#nasdaq-table-container .stocks_wrap {
    padding-top: 40px;
    position: relative;
    margin: 0 auto;
}


/* .sec_cal .cal_wrap .days { */
#nasdaq-table-container .stocks_wrap .stocks_columns {
    display: flex;
    margin-bottom: 20px; /* 요소 하단의 margin 하단의 영역을 설정 */
    padding-bottom: 20px; /* 요소의 바닥에서 패딩 영역의 높이를 설정 */
    border-bottom: 1px solid #ddd;
}


/* .sec_cal .cal_wrap .day { */
#nasdaq-table-container .stocks_wrap .stocks_columns .column,
#nasdaq-table-container .stocks_wrap .stocks .stock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    text-align: left;
    color: #999;
    font-size: 12px;
    text-align: center;
    border-radius: 5px; /* rounds the corners of an element's outer border edge. */
}




#nasdaq-table-container .stocks_wrap .stocks_columns .column {
    font-size: 17px;
    /* width: 70px; */
}
#nasdaq-table-container .stocks_wrap .stocks .stock {
    font-size: 13px;
    /* width: 35px; */
}


#nasdaq-table-container .name {
    margin-right: 30px;
    margin-left: 30px;
}
#nasdaq-table-container .sector, .industry{
    margin-right: 18px;
    margin-left: 48px;
}
#nasdaq-table-container .dff, .open, .close {
    margin-right: 5px;
    margin-left: 5px;
}

#nasdaq-table-container .stocks_wrap .stocks .ticker {
    color: #04b70d;
    text-decoration: underline;
}
#nasdaq-table-container .stocks_wrap .stocks .up {
    color: #ed2a61;
}
#nasdaq-table-container .stocks_wrap .stocks .down {
    color: #3c6ffa;
}



/* .sec_cal .cal_wrap .dates { */
#nasdaq-table-container .stocks_wrap .stocks {
    display: flex;
    flex-flow: wrap;
    height: 5000px; /* 높이 간격 */
}

/* h1 태그 부분 */
#nasdaq-table-container .gohome {
    text-decoration: none;
}














/*
    위 : nasdaq-table-container 관련 CSS
    아래 : chart-container 관련 CSS
*/
















/* id : "#" */
#chart-container .myChart-container {
    /* 속성의 요소 너비를 지정 */
    width: 60vw;

    /* 속성의 요소의 높이를 지정 */
    height: 30vh;

    /*
        [ margin 태그 ]
        margin-top (상단 여백)
        margin-right (오른쪽 여백)
        margin-bottom (아래 여백)
        margin-left (왼쪽 여백)

        지정값은 px, cm, %로 지정할 수 있다.
        음수값도 지정 가능(ex. -10px)

        * 4면 한꺼번에 margin 지정하기
            ex) margin: 5px 7px 3px 0px;
                (위, 오른쪽, 아래, 왼쪽)
        * 4면이 모두 같을 때 margin 지정하기
            ex) margin: 5px;
        * 위, 오른쪽&왼쪽, 아래 margin 지정하기
            ex) margin: 5px 10px 0px;
        * 위&아래, 오른쪽&왼쪽 margin 지정하기
            ex) margin: 5px 10px;
        * margin 자동 지정하기
            ex) margin: auto 0;
                (위아래 값이 자동, 좌우가 0px)
            ex) margin-left: auto;

    */
    margin: 40px auto;
    padding-bottom: 13%;
}

#chart-container .table {
    /* 
        [ align-items 태그 ]
        flex-box 요소의 수직 방향 정렬 방식을 설정
        ex. flex-start, flex-end, center        
    */
    align-items: center;

    /* 
        [ justify-content 태그 ]
        flex-box 요소의 수평 방향 정렬 방식을 설정
        ex. flex-start, flex-end, center        
    */
    justify-content: center;


    /*
        [ margin 태그 ]
        margin-top (상단 여백)
        margin-right (오른쪽 여백)
        margin-bottom (아래 여백)
        margin-left (왼쪽 여백)

        지정값은 px, cm, %로 지정할 수 있다.
        음수값도 지정 가능(ex. -10px)

        * 4면 한꺼번에 margin 지정하기
            ex) margin: 5px 7px 3px 0px;
                (위, 오른쪽, 아래, 왼쪽)
        * 4면이 모두 같을 때 margin 지정하기
            ex) margin: 5px;
        * 위, 오른쪽&왼쪽, 아래 margin 지정하기
            ex) margin: 5px 10px 0px;
        * 위&아래, 오른쪽&왼쪽 margin 지정하기
            ex) margin: 5px 10px;
        * margin 자동 지정하기
            ex) margin: auto 0;
                (위아래 값이 자동, 좌우가 0px)
            ex) margin-left: auto;

    */
    margin: 20px auto;


    /*
        [ text-align 태그 ]
        텍스트의 정렬 방향을 설정

        left: 왼쪽 정렬
        right: 오른쪽 정렬
        center: 중앙 정렬
        justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)
    */
    text-align: center;
}


#chart-container .table .title-width {
    width: 10px;
    text-align: center;
}


#chart-container .table .table-title {
    font-size: 50px;
}








/* h1, h2 태그 부분 */
#chart-container .gohome, .goticker {
    text-decoration: none;
}


#chart-container .table .news-table .news.diff.up {
    color: #ed2a61;
}
#chart-container .table .news-table .news.diff.down {
    color: #3c6ffa;
}




























/*
    위 : chart-container 관련 CSS
    아래 : news-container 관련 CSS
*/


























/* ner 관련 */

#news-container .ner-box {
    width: calc(92%); /* 속성의 요소 너비를 지정 */
    height: 500px; /* 속성의 요소의 높이를 지정 */


    /* 
        [ align-items 태그 ]
        flex-box 요소의 수직 방향 정렬 방식을 설정
        ex. flex-start, flex-end, center        
    */
    align-items: center;

    /* 
        [ justify-content 태그 ]
        flex-box 요소의 수평 방향 정렬 방식을 설정
        ex. flex-start, flex-end, center        
    */
    justify-content: center;

    /*
        [ text-align 태그 ]
        텍스트의 정렬 방향을 설정

        left: 왼쪽 정렬
        right: 오른쪽 정렬
        center: 중앙 정렬
        justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)
    */
    text-align: center;


    /*
        [ margin 태그 ]
        margin-top (상단 여백)
        margin-right (오른쪽 여백)
        margin-bottom (아래 여백)
        margin-left (왼쪽 여백)

        지정값은 px, cm, %로 지정할 수 있다.
        음수값도 지정 가능(ex. -10px)

        * 4면 한꺼번에 margin 지정하기
            ex) margin: 5px 7px 3px 0px;
                (위, 오른쪽, 아래, 왼쪽)
        * 4면이 모두 같을 때 margin 지정하기
            ex) margin: 5px;
        * 위, 오른쪽&왼쪽, 아래 margin 지정하기
            ex) margin: 5px 10px 0px;
        * 위&아래, 오른쪽&왼쪽 margin 지정하기
            ex) margin: 5px 10px;
        * margin 자동 지정하기
            ex) margin: auto 0;
                (위아래 값이 자동, 좌우가 0px)
            ex) margin-left: auto;

    */
    margin: 1rem;


    min-height: 1.2rem;
    border: 0.5px solid grey;
    padding: 0.5rem 1rem;
}



/* NER label_ */
#news-container .entities .entity_person {
    background-color: #aa9cfc;
}

#news-container .entities .entity_org {
    background-color: #7aecec;
}

#news-container .entities .entity_fac {
    background-color: #9cc9cc;
}

#news-container .entities .entity_gpe {
    background-color: #feca74;
}

#news-container .entities .entity_product {
    background-color: #bfeeb7;
}

#news-container .entities .none {
    background-color: transparent;
}

/* 마우스 올렸을 때, 보이게 하는 것 */
#news-container .entities .show-label {
    display: none;
}

#news-container .entities .entity_person:hover .show-label,
#news-container .entities .entity_org:hover .show-label,
#news-container .entities .entity_fac:hover .show-label,
#news-container .entities .entity_gpe:hover .show-label,
#news-container .entities .entity_product:hover .show-label {
    display: block;
}





/* Model 관련 */

/* id : "#" */
#news-container #model {
    /*
        [ text-align 태그 ]
        텍스트의 정렬 방향을 설정

        left: 왼쪽 정렬
        right: 오른쪽 정렬
        center: 중앙 정렬
        justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)
    */
    text-align: center;
}

/* id : "#" */
#news-container #text-input {
    width: calc(100% / 2); /* 속성의 요소 너비 */
    height: 78px; /* 속성의 요소의 높이를 지정 */
    word-break: break-all;
}


#news-container .text-output {
    width: calc(100% * (2/3)); /* 속성의 요소 너비 */
    min-height: 10rem;



    /*
        [ margin 태그 ]
        margin-top (상단 여백)
        margin-right (오른쪽 여백)
        margin-bottom (아래 여백)
        margin-left (왼쪽 여백)

        지정값은 px, cm, %로 지정할 수 있다.
        음수값도 지정 가능(ex. -10px)

        * 4면 한꺼번에 margin 지정하기
            ex) margin: 5px 7px 3px 0px;
                (위, 오른쪽, 아래, 왼쪽)
        * 4면이 모두 같을 때 margin 지정하기
            ex) margin: 5px;
        * 위, 오른쪽&왼쪽, 아래 margin 지정하기
            ex) margin: 5px 10px 0px;
        * 위&아래, 오른쪽&왼쪽 margin 지정하기
            ex) margin: 5px 10px;
        * margin 자동 지정하기
            ex) margin: auto 0;
                (위아래 값이 자동, 좌우가 0px)
            ex) margin-left: auto;

    */
    margin: 20px auto;

    /* 
        [ border 태그 ]
        해당 태그의 테두리를 설정
        width - style - color
        border-width - border-style - border-color

        border-width : 테두리의 두께로, 주로 px 단위를 사용
        border-style : 테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재
        border-color : 테두리의 색상으로, 값은 color 속성의 포맷을 사용
    */
    border: 0.5px solid grey;

    /*
        [ padding 태그 ]
        지정값은 px, cm, %로 지정할 수 있다.
        margin은 음수값이 지정 가능하지만 padding은 음수값 지정이 안된다.
        
        padding 태그와 비슷한 태그
        : padding-top, padding-right, padding-bottom, padding-left

        * 4면 한꺼번에 padding 지정하기
            ex) padding: 5px, 7px, 3px, 0px;
                (위, 오른쪽, 아래, 왼쪽)
        * 4면 모두 같을 때 padding 지정하기
            ex) padding: 5px;
        * 위, 오른쪽&왼쪽, 아래 padding 지정하기
            ex) padding: 5px 10px 0px;
        * 위&아래, 오른쪽&왼쪽 padding 지정하기
            ex) padding: 5px, 10px;

    */
    padding: 0.5rem 1rem;
}



/* h1, h2 태그 부분 */
#news-container .gohome, .goticker {
    text-decoration: none;
}