나의 디딤돌

안녕하세요 이번 글은 자바스크립트에서 버튼을 누르면

해당 위치로 스크롤이 이동하는 방법에 대해서알아보겠습니다.

한 번이라도 보셨는지는 모르겠으나,어떤 회사 사이트라던지 아니면 인터넷에 무수히 많은사이트 중, 버튼을 누르면 해당 위치로 스크롤을 이동하는 사이트를보셨을지 모르겠습니다.

저는 일단 그 방법을 scrollIntoView를 통해 구현해봤습니다.먼저 버튼 부분을 상수로 만들어준 다음.

이동하고 싶은 콘텐츠 부분을 만들어줍니다.저는 임의로 인라인 스타일로 만들어 주겠습니다.

<div class="div div1" style="background-color: red;"></div>
<div class="div div2" style="background-color: blue;"></div>
<div class="div div3" style="background-color: green;"></div>

간단하게 div로 만들어준 다음 크기는 저는 css부분에서 공통적으로 

주기 위해 div라는 클래스를 공통으로 주었습니다.

이후 크기는 width:100% height:100%으로 주었습니다.

이후 a 태그 또는 button 태그를 통해 각 이동할 버튼을 만들어줍니다.

이후 버튼을 const를 통해 먼저 변수로 만들어줍니다.

예를 들어

const DIVRED = document.querySelector("div-btn");

이런 것처럼요. 

이후 해당 버튼에 이벤트를 만들어줍니다.

DIVRED.addEventListener("click",(e)=>{
    let div1 = document.querySelector(".div1");
    div1.scrollIntoView({behavior:'smooth'});
    e.preventDefault();
});

let div1 같은 경우 red div부분입니다.

3개의 div 중 첫 번째 div입니다.

버튼을 누르게 되면 div1 콘텐츠 부분으로 스크롤이 이동하게 되는데

smooth 속성을 통해 부드럽게 이동하게 됩니다.

e.preventDefault()는 이벤트를 중지시켜주는 것인데,

이 코드를 추가시키지 않는다면

테스트를 위해 여러 번 클릭을 하게 되는 경우에는

원하시는 동작이 나오지 않을 수도있습니다.

구글 애드몹을 이용하기 위해 임포트 하다 보면 standardin has not been redirected

이런 에러가 발생하는 경우가 있습니다.

해당 문제점을 해결하는 방법은

인터넷에 방법을 찾아보면서 제가 해본 방법은 다음과 같습니다.

1.

유니티 폴더 및 프로젝트에 ' "  이런 기호를 제거하는 것입니다.

(remove apostrophe in the names of one of the folders or project)

2.

유니티 jdk 경로와 시스템 설정에 있는 java_home 경로가 같은지 확인한다.

유니티에서 경로확인은 Edit -> Preferences ->External Tools을 찾아보시면 있습니다.

자바 홈은 내컴퓨터(내PC)에서 아무 곳에 마우스 오른쪽 클릭 속성 -> 시스템 -> 고급 시스템 설정

-> 환경 변수 - > 시스템 변수에 JAVA_HOME을 유니티 경로와 같게 해주면 됩니다.

만약 JAVA_HOME이 없으시다면 새로만들기

변수 이름에는 JAVA_HOME 

변수 값에는 유니티 JDK 경로로 설정해주시면 됩니다.

vscode를 이용해서 css를 이용할 때 배경색을 주기 위해서

background 또는 background-color를 이용합니다.

둘 다 배경색을 입혀줄 수 있다는 공통점이 있으나

둘의 차이점이 궁금해서 알아보았습니다.

TMI지만 저 같은 경우 처음에 배울 때 bgc를 입력해서 자동완성으로 하다 보니

항상 후자를 사용하고 있었습니다.

background와 background 둘 다 배경색을 줄 수 있다는 공통점은 있으나

background 같은 경우 배경색과 더불어 다른 옵션까지 줄 수 있습니다.

예를 들어 url를 준 경우이죠.

아래와 코드를 보게 되면

.bg{
  width: 150px;
  height: 150px; 
}
.background-color{
  background-color: pink;
}

.background{
  background: blue url("test.jpg") no-repeat left center;
}

background는 배경색과 더불어 url 사진까지 포함할 수 있습니다.

이렇게 말이죠 

가장 쉽게 생각하면 background-color는 뒤에 color는 옵션으로 생각해서

색깔만 줄 수 있다고 생각하시면 쉬우실 것 같습니다.

웹 페이지를 만들 때 어떤 거는 위치를 고정시키고 싶은 게 나올 수 있습니다.

가령 메뉴 같은 거는 위치를 고정시켜 스크롤을 내려도 있게 하는 등으로요.

이때 css를 통해서 위치를 고정시키는 방법이 있습니다.

먼저 순서는

fixed를 이용하는 방법과

z-index 순서대로 쓰도록 하겠습니다.

(색깔로 구분 지어놓겠습니다.)

간단하게 고정시키고 싶은 것을 css에서

position: fixed를 주면 되는데요.

예를 들어 메뉴를 고정시키고 싶은데

아무 조건이 없다면 다음과 같이 스크롤을 내리면

메뉴가 스크롤 된만큼 사라지는 것을 볼 수 있습니다.

이걸 간단하게

1. position: fixed

를 이용해서 할 수 있습니다. css 코드는 아래와 같습니다.

.menu{
    position: fixed;
    top:0;
    left:0;
    height: 80px;
    width: 100%;
    background-color: gray;
    
}

.test{
    height: 1500px;
}

이렇게 스크롤을 내려도 고정되어 있는 모습을 확인할 수 있습니다.

2. z-index

다음은 fixed와 그 외에 포지션과 같이 사용할 때입니다.

예를 든 상황으로는 각 각 일정한 크기의 div를 선언한

상태로 초기 상태는 아래 그림과 같습니다.

이후 position을 absolute를 준다음

각 각 left를 통해 크기를 변경해보면

 위 그림처럼 나오게 되는데요.

여기서 가운데 노란색을 나오게 하고 싶다

그렇다면 다른 두 div 보다 z-index를 주시면 됩니다.

숫자가 클수록 더 우선순위가 높은 것으로,

주의할 점은 px나 다른 단위를 붙이시면 안 됩니다.

일단 html 코드와 css 코드입니다.

html

<div class="A hei"></div>
<div class="B hei"></div>
<div class="C hei"></div>

혹시라도 해보고 싶으시다면 body 태그 안으로 위 3 div를 넣어주시면 됩니다.

css

.hei{
    height: 200px;
    width: 100px;
    float: left;
    
}

.A{
    position: absolute;
    left: 20px;
    z-index: 20;
    display: inline;
    background:red;
}

.B{
    left: 50px;
    position: absolute;
    z-index: 40;
    background-color: yellow;
}

.C{
    position: absolute;
    left: 100px;
    z-index: 30;
    background: green;
}

저는 가운데 div 노란색을 가장 앞으로 나오게 하고 싶어서 가장 높게 설정해주었습니다.

그럼 이렇게 노란색이 가장 크게 나오게 되죠.

원래 메뉴를 고정시키고 반응형으로 만들다 보니 상대적으로 포지션을 주었던 것 때문에

문제가 발생하다가 이렇게 알아보고 하게 되었습니다.

저는 메뉴를 fixed로 주고 그 아래 콘텐츠를 relative로 주었었는데요.

생각한 것처럼 하려다 보니 z-index를 사용해서 해결이 되었습니다.

저도 공부하는 입장이라 아직 부족하고 잘못한 코드가 있다면

댓글로 남겨주시면 감사하겠습니다.