javascript로 보였다 안보였다 만들기 / display속성 / 자바스크립트

a태그를 이렇게도 쓸 수 있구낭...😯🤭

 

 

 

처음부터 안보였다가 누르면 보이게 하고 싶은데 

지금은 처음부터 바로 보임

 

다른 함수는 그대로 이고 처음부터 style 바로 넣어서 그냥 처음부터 none로 숨겨줌 

a링크 타고 누를때 마다 

href="javascript:doDisplay();"

이거로 호출 

보였다 안보였다 하고싶은 div에 id와 style지정

<div id="toDisplay" style="display:none;">
    <h1>test</h1>
    <p>test test test test</p>
  </div>

스크립트 작성 / 어느위치에 갖다 붙여도 상관 없는듯 

<script type="text/javascript">
  function doDisplay() {
    var con = document.getElementById("toDisplay");
    if (con.style.display == "none") {
      con.style.display = "block";
    } else {
      con.style.display = "none";
    }
  }
</script>

링크를 누를때마다 스크립트 안의  doDisplay()함수가 호출되고

id값 toDisplay의 요소 정보를 con에 담아서

con.style.display의 상태에 따라 보였다 안보였다로 만들기

none이면 -> block으로

block이면 -> none로

배움 : https://mainia.tistory.com/2710

---

 

꼭 저 버튼 하나만이 아니더라도 보였다가 다른곳을 클릭하면 안보이게 하고싶음

그럼 배경div로 아래에 크게 깔아주고 거기를 클릭할 때도 함수를 호출하게 하면 될거같음

 

친구한테 배운 팁인데 div모습을 알고싶을땐 그냥 background-color를 빨간색으로 입혀두기

vw, vh단위를 사실 엇그제 알게되었는데 엄청 유용하게 쓰인다 이걸 왜 이제 알았지😭

이렇게 됐다가 저 빨간 영역 클릭하면 사라진다

음~ 된다 근데 왜 저장했는데도 코드 정렬 안해주지

이제 포지션값을 이리 저리 해서 배경처럼 깔아주면 될듯

 

<style>
.background-area{
    position: fixed;
    z-index: -1;
    height: 100vw;
    width: 100vw;
    left: 0;
    top: 0;
    background-color: red;
  }
  
  </style>

z-index를 -1로 해두고 position을 fixed로 해두면 바닥에 깔린다...

근데 너무 바닥에 깔려버린듯

전부다 빨강이 돼서 당황했는데

그냥 배경색을 initial로 해두니까 원하는 대로 됐다