40_css_Base.css

/* ================================================= */
/* 🟩 일반적인 HTML 태그 자체의 기본 조건들 */

body{
    margin: 0;
}

a {
    color:black;
    text-decoration: none;
}

h2 {
    margin-bottom: 10px;
}

.mainContents {
    margin-top: 10px; margin-left: 20px; margin-bottom: 70px;
}

img {
    margin-left: 20px;
}

/* ================================================= */
/* 🟩  */

#hiddenMenuButton{
    margin: 20px;
    padding: 10px;
    font-size: 24px;
    color:gold;
    border: none;
    background-color: rgb(115, 226, 104);
    cursor: pointer;
    
}

/* 깨알같이 넣어봤는데 동작을 안함.. */
#hiddenMenuButton-hover #hiddenMenuButton{
    display: block;  /* 메뉴 버튼 위에 마우스 올려놓으면 메뉴 표시 */
}

#hiddenBigTile {
    font-size:45px;
    text-align: center;
    margin: 0;
    padding: 20px;
}

#hiddenGrid{    
    border-bottom: 2px solid black; /* 🟢 제목 아래에 라인을 넣어서 구분합니다. */
    display:none;
    grid-template-columns: 100px 1fr /* 🔴 이 친구가 grid를 나눠주는 놈이다. div를 기준으로 나눠주심 */
}


/* ================================================= */
/* 🟩  */

#emptyBox{ /* 굳이 필요없지만, 단지 인지를 위함 */
    /* width: 3px; */
    /* height: 3px; */
    margin: 0px; /* 굳이 필요없지만, 단지 인지를 위함 */
    /* padding: 0px; */
    /* display: none; */
}

#bigTile {
    font-size:45px;
    text-align: center;
    margin: 0;
    padding: 20px;
}

#topGrid{
    border-bottom: 2px solid black; /* 🟢 제목 아래에 라인을 넣어서 구분합니다. */
    display:grid;
    grid-template-columns: 70px 1fr /* 🔴 이 친구가 grid를 나눠주는 놈이다. div를 기준으로 나눠주심 */
}

/* ================================================= */
/* 🟩  */

/* 🆘 사이드에서 나오는 메뉴... CSS가 문제였구나.. 
   display : none;이 문제가 아니였다!!!!
   position 이라는 존재를 파악해보니,  */

/* 🟩 사이드 메뉴 */
#hiddenList {    /* 📋 이거는 div에 지금 되어 있는 친구입니다. */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background-color: #fff;
    border-right: 2px solid black;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
  }
  
  /* 사이드 메뉴 열림 상태 */
  #hiddenList.active {
    transform: translateX(0);
  }

  /* 사이드 메뉴 목록 항목 링크: 호버 효과 */
#hiddenList li a:hover {
    color: #000;
  }
  

/* ================================================= */
/* 🟩  */

/* 🟥 그리드 컬럼 형태를 만들기 위한 친구입니다.*/
#centerGrid{ /*  */
    font-size: 17px;
    display:grid;
    grid-template-columns: 220px 1fr; /* 🔴 이 친구가 grid를 나눠주는 놈이다. div를 기준으로 나눠주심 */
}

        /* 🟥 grid 첫빠따에 있는 놈으로 리스트이다. */
        /* 칼럼 나눠지는 기능 인지가 어렵습니다. 주석을 좀 적어넣도록 하겠습니다. */
        .ulList { /* 🟩 리스트의 왕 */
            border-right: 2px solid black; /* 🟢 리스트 옆에 라인을 넣어서 칼럼 구분을 합니다. */
            margin: 0;
            padding: 20px; 
            list-style-type: none; /* 앞에 붙는 ●이거 없애기 위해서 넣었습니다. */
        }

        #centerGrid ul{
            margin-bottom: 20px;
        }

        #centerGrid li{
            margin-bottom: 15px;
        }

        .plusMaginForSecondList {
            margin-top: 10px;
        }


    /* 🟥 칼럼에 넣기 위한 그런 놈 */    
    #article{ /* 왜 article이야??? */
        padding-left: 30px;
        /* 억지로 화면상에 맞춰주기 위한  */
    }



/* ================================================= */
/* 🟩  */

/* 🆘 🔥 고쳐야할 점 : 디스플레이 블락으로 풀리는 건 너무 좋은데!!! 중요한 건 리스트가 가려지고, 버튼을 눌렀을 때 보이도록 바꿔야 합니다. 
...어렵네!
💡 특정 픽셀일 때 별도로 만들어놓은 ul태그가 보이게 하면 될 것 같습니다.
*/
@media(max-width:800px){  /* 🟢 800px 이하일 때를 의미합니다. */
    #hiddenGrid{
        display: grid;
    }
    /* #hideenList{
        display: block;
    } */
    #topGrid{
        display: none;
    }
    #centerGrid{
        display:block;
    }
    .ulList{
        display: none;
        border-right: none;
    }
}