내일 배움 캠프 4기 TIL(22.11.02)

baesee·2022년 11월 2일

내일배움캠프

목록 보기

3/75

토글 버튼 구현

HTML

    <nav class="navbar">
        <div class="nav2">
            <div class="navbar__logo"><a href="">돈 많 백</a></div>

            <button id="btn">
                <i class="fa-solid fa-bars"></i>
              </button>
        </div>

        <div class="nav3">
            <ul class="navbar__menu">
                <a href="">
                    <li>돈많백?</li>
                </a>
                <a href="">
                    <li>팀원TMI</li>
                </a>
                <a href="">
                    <li>목표</li>
                </a>
                <a href="">
                    <li>방명록</li>
                </a>
            </ul>
        </div>

    </nav>

CSS

  .navbar {
    display: flex;
    flex-direction: column;
    padding: 8px 24px;
    align-items: stretch;
    
  }

  .navbar__logo {
    margin-bottom: 4px;
  }

  .navbar__menu {
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: none;
  }

  .navbar__menu a {
    width: 100%;
  }

  .navbar__menu li {
    text-align: center;
    margin: 4px 0;
  }
  .dynamic-g {
    flex-direction: column;
    text-align: center;
  }
    .nav2{
      display: flex;
      justify-content: space-between;
      
      
    }
    #btn{
      display: inline-block;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
    }
    
    .nav3{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

JavaScript

// 버튼 토글 이벤트
const nav = document.querySelector('.navbar__menu');

const btns =document.querySelector('#btn');

btns.addEventListener('click',toggle1)


function toggle1() {


    if(nav.style.display !== 'none') {

      nav.style.display = 'none';

    }

  

    else {

      nav.style.display= 'flex';

    }

    

  };
// 변경

window.onresize = function(event){
  var innerWidth = window.innerWidth;
  innerWidth > "769" ? nav.style.display= 'flex': nav.style.display = 'none';
}

html에서 nav2 와 nav3로 영역을 나눠서 화면이 일정이상 커졌을때 justify-content: space-between;을 주기위해 영역을 나눴고 css 는 자바스크립트로 flex none이 번갈아 가면서 보이기위해
위와같이 주었고

window.onresize = function(event){
var innerWidth = window.innerWidth;
innerWidth > "769" ? nav.style.display= 'flex': nav.style.display = 'none';

화면이 작아졌을때 버튼을 사라지게 하고 화면이 커졌을때 보이지 않아서 화면이 769이상일때 새로고침을
주게해서 버튼이 보이게 만들었다.

git 강의

인프런에서 강의 보면서 실습하고 있다.

깃이 관리하는 세 개의 공간

작업 디렉터리

.git이 있는 디렉터리

버전 관리의 대상이 위치하는 공간

깃이 관리하는 가상의 공간

스테이지

다음 버전이 될 후보가 올라가는 공간

저장소

번전이 만들어지고 관리 되는 공간

작업 디렉터리 에서 스테이지를 올리는것을

add

스테이지에서 저장소로 추가한다

commit

touch "파일명" : 빈 파일 생성

git commit -m " ": 커밋 해준다

만들어진 버전을 되돌리는 두 가지 방법

revert

reset

soft reset 커밋만 되돌리기

mixed reset 스테이지까지 되돌리기

hard reset 작업 디렉터리까지 되돌리기

baesee

이전 포스트

내일 배움 캠프 4기 TIL(22.11.01)

다음 포스트

내일 배움 캠프 4기 TIL(22.11.02)