클론코딩-mdn_grid

11월 21일
스터디에서 진행하던 mdn 사이트를 grid를 이용해 짜보았다.

mdn클론코딩

지난주까지 flex를 이용해서 짠 코드를 grid를 이용해서
재개편을 해보았다.

우선 그리드와 플렉스의 사용 용도의 차이를 살펴보면

grid: 기존의 틀에 변경이 별로 없는 경우, 내용이 추가되거나 삭제되는 경우가 적은 경우에 사용하게 된다.
flex: 정해진 틀에서 내용을 수정하거나, 추가되는 경우에 사용된다.

이러한 차이점으로 살펴봤을때,
mdn은 grid에 좀더 적합한 사이트이다.
물론 기존의 사이트도 grid로 되어 있다.
처음에는 grid가 너무 낯설어서 flex로 했지만, 해보고 나니 grid가 더깔끔한 느낌?!

우선 원래 있던 파일을 살펴보면
큰틀은 display: block으로 진행하고, 세부적인 부분들을
flex로 조정을 해줬다.

cont-menu {
    display: flex;
    margin: 35px 100px 25px 40px;
}

.cont-menu .mdn-logo {
    width: 210px;
    margin-right: 60px;
}

.cont-menu .nav-menu {
    display: flex;
    font-size: 100%;
    text-decoration: none;
}

flex 구현

flex는 css를 하면서 계속 수정하면서 부분부분에 넣을 수있어서
좀 더 편하게 사용할 수 있었다. 세부적인 부분들을 움직일때 사용하기 좋은 기능이다.

이번주에 grid로 수정한은 맨처음 22개의 column을 잡고 시작했다...
그냥 제일 작은 것을 기준으로 나눠서 진행했던게 이런 큰일을 벌인거 같다.
다행히, 스터디에서 auto로 나눠서 3-4개로만 나누면 좀더 수월할 것이라는 조언을 들을 수 있었다!👍

body {
    display: grid;
    font-family: arial, x-locale-body, sans-serif;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: repeat(3,auto)
}
.header {
    grid-row: 1/2;
    grid-column: 1/6;
}
.mdn-blog {
    grid-row: 2/3;
    grid-column: 1/4;
    margin: 75px 30px 0 20px;
}
.cont-art {
    grid-row: 2/3;
    grid-column: 4/6;
    margin: 75px 30px 87px 20px;
}
footer {
    grid-column: 1/6;
    grid-row: 3/4;
    display: grid;
    background-color: #1b1b1b;
    padding: 50px 0 70px 20px;
}

전체적으로 5개의 column과 3개의 row를 가지고 진행했고,
auto는 내용물에 맞게 크기가 조절되었다.

grid 구현

이렇게 진행하니까 크기를 굳이 맞추지 않아도 되서 좋았다.
상황에서 맞춰서 grid와 flex를 능숙하게 사용할 수 있도록 연습해야 겠다.(물론 float도)🤣

---

📒오늘 배운것!
📍반응형을 구현하면서 아직 JS가 능숙하지 않은 상황에서 토글버튼과, 클릭후 화면이 나타났다 사라지게 하는 것들을 배울 수 있었다.

<input type="checkbox" id="expandable-input" class="checkbox">   
<label for="expandable-input" class="toggle_btn"></label>        
<ul class="nav-menu">
     <li><a href="#" class="decs">Technologies</a></li>
     <li><a href="#">References & Guides</a></li>
     <li><a href="#">Feedback</a></li>
</ul>

@media screen and (max-width: 740px) {
    .header .cont-menu .find-menu{
        display: none;
    }
    .header .cont-menu .nav-menu{
        max-height: 0px;
        overflow: hidden;
    }
    .header .cont-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header .cont-menu .mdn-logo {
        width: 170px;
    }
    .header .cont-menu .toggle_btn{
        display: block;
        background-image: url(./img/bars-solid.svg);
        width: 30px;
        height: 30px;
    }
    .checkbox:checked  + .toggle_btn + .nav-menu {
        max-height: 1000px;
        display: block;
        padding: 30px;
    }
    
}

코드는 이렇다.
우선, input의 type=checkbox를 선택하고 label과 input의 id를 연결해준다. 그럼 label에 있는 텍스트나 이미지를 클릭해도, 체크박스가 체크될 수 있다.

그리고 처음에는 max-height를 0으로, over-flow를 hidden으로 해서 완전히 가렸다가, 체크 박스에 클릭하면, max-height를 확 키워서,
컨텐츠가 보이게 하는 방법이다.

요 방법으로 반응형에서 메뉴들이 사라졌을때 요긴하게 이용할 수 있었다!
다시 월요일! 모두들 화이팅 합시다!😁