fixed position을 이용해서 스크롤에 해도 따라가지 않고 항상 화면 상단에 고정되어 있는 메뉴바를 만들어보겠습니다. CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 어떤 엘리먼트의 position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게
배치시킬 수 있게 됩니다. 뿐만 아니라, 브라우저 화면을 스크롤했을 때도 영향을 받지 않기 때문에, 다른 엘리먼트들이 상하좌우로 움직일 때, position 속성이 fixed로 설정되어 있는 엘리먼트는 그 자리에서 움직이지 않습니다. 이러한 fixed position의 특징은 웹에서 다양한 UI를 구현하는데 사용될 수 있는데요. 이번 포스팅에서는 그 중에서 가장 널리 사용되고 있는 상단에 고정되어 있는 메뉴바/네비게이션을 만드는 방법에 대해서 알아보겠습니다. 일반적으로 메뉴바는 <header/>과 <nav/> 태그를 이용해서 마크업을 많이 합니다. 실제로는 <ul/>, <li/>, <a/> 태그를 이용해서 다른 웹페이지로 이동이 가능한 메뉴 목록을 만들어야 하지만 최대한 간단한 예제를 위해서 <span/> 태그만을 사용하였습니다. <header>
<h2>Brand</h2>
<nav>
<span>Menu1</span>
<span>Menu2</span>
<span>Menu3</span>
</nav>
</header> 헤더 영역에 대한 스타일도 메인 영역과 시작적으로 구분이 될 수 있을 정도로만 간단히 합니다. header {
height: 75px;
padding: 1rem;
color: white;
background: teal;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
} 이렇게 작성된 전형적인 메뉴바는 스크롤바를 아래로 움직이면, 움직이는 만큼 브라우저 화면에서 사라지게 됩니다. 이러한 전형적인 메뉴바가 보여줄 컨턴츠가 적은 웹사이트에서는 다시 금방 스크롤바를 위로 움직일 수 있기 때문에 큰 문제가 되지 않겠지만, 리스트 형태로 컨텐츠를 세로로 길게 보여줘야 하는 웹사이트의 경우, 다른 메뉴로 이동하기 위해서 사용자가 매번 맨 위까지 스크롤링을 해야 한다면 상당히 불편할 것입니다.전형적인 메뉴바 만들기
메뉴바를 화면 상단에 고정시키기
자 그럼, fixed position을 활용해서 위에서 작성한 메뉴바를 화면 상단에 고정시켜보겠습니다. 우선 스크롤에 영향을 받지 않고 화면의 특정 지점에 고정될 수 있도록 헤더 영역의 position 속성을 fixed로 지정합니다. 그 다음, 헤더 영역을 화면의 어디에 고정시킬지를 offset 속성을 이용해서 설정해줍니다. 화면 상단에 빈틈없이 붙일 것이기 때문에 top 속성을 0으로 설정하고, 헤더 영역을 화면 양측에 꽉차게 하기 하기 위해서 left 속성과 right 속성도 0으로 설정합니다. (left 속성과 right 속성 대신에 width 속성을 100%로 설정해도 됩니다.)
header { position: fixed; top: 0; /* width: 100% */ left: 0; right: 0; /* 생략 */ }
그리고 나서 스크롤을 해보면 메뉴바가 화면 상단에 고정되어서 아무리 아래로 스크롤해도 항상 메뉴바를 볼 수 있는 상태가 됩니다.
하지만 여기서 한가지 문제가 발생하는데요. 자세히 보면 메인 영역의 윗 부분이 헤더 영역의 뒤로 들어가서 일부 컨텐츠가 보이지 않습니다. 이 것은 <header> 엘리먼트가 부모인 <body> 엘리먼트로 부터 완전히 독립되면서, <body> 엘리먼트에서 점유하고 있던 <header> 엘리먼트 공간이 사라져버렸기 때문입니다.
가려진 컨텐츠 보이게 하기
위 문제는 상단 고정 메뉴바 사용할 때 흔히 겪은 문제이며, <body> 엘리먼트의 상단에 메뉴바 높이 만큼 패딩(padding)을 주면 쉽게 해결할 수 있습니다.
body { padding-top: 75px; /* 생략 */ }
자, 이제 가려지는 컨텐츠 없이 상단 고정 메뉴바를 사용할 수 있게 되었습니다. :)
마치면서
본 포스팅에서 간단하게 구현해본 상단에 고정되는 메뉴바는 사실 Bootstrap과 같은 CSS 라이브러리를 통해 쉽게 접할 수 있습니다. 하지만 한번 직접 구현하고 어떻게 동작하는 건지 파악해보는 것도 CSS를 공부하고 계신다면 도움이 될 것 같습니다.
참고로 최근에는 fixed position 대신에 sticky position을 이용해서 동일한 UI를 구현하는 경우가 많은 것 같습니다. 이에 대한 내용은 별도의 포스팅에서 다루었으니 참고 바랍니다.
안녕하세요. 정보의중심입니다. 디스코드 오버레이 설정방법에 대한 포스팅 시작하겠습니다. 배틀그라운드, 롤과 같은 게임 시 음성채팅 프로그램은 필수로 사용들 하십니다. 그 중에서 디스코드는 편리하고 깔끔한 음질로 많이 찾고 계신데요. 게임 속 화면에 디스코드를 오버레이 하는 방법이 있습니다. 알트 텝을 이용하여 디스코드를 한 번씩 사용하는 것보다 훨씬 간단하게 한 화면에서 관리 하실 수 있어서 편리합니다.
어떤게임을 하시던 디스코드가 감지 할 수 있는 게임이라면 모두 오버레이 가능하며 간단한 설정만 하시면 되겠습니다.
두 가지 설정만 하시면 되는데요 굉장히 간단하니 포스팅 내용을 보시고 천천히 따라하시기 바랍니다.
우선 디스코드 프로그램을 실행시킨 후, 좌측 하단에 보이는 톱니바퀴모양의 버튼을 누르시면 디스코드 사용자 설정 및 앱설정 메뉴로 이동하게 됩니다.
디스코드의 설정 창으로 들어가셨으면 좌측에 오버레이 메뉴를 클릭합니다. 오버레이 활성화를 할건데요, 게임 내에서 오버레이 표시 설정을 활성화 한 후, 오버레이 잠금 전환에 본인이 원하는 단축키를 지정합니다. 저는 F10으로 지정했습니다. 어떤 게임을 플레이 하느냐에 따라 다르겠지만 플레이 하시는데에 지장이 없는 단축키로 지정하시기 바랍니다. 이곳에서 아바타 크기, 사용자 이름 등
오버레이시 나타나는 간단한 설정을 하실 수 있습니다. 여기에서 아바타란 디스코드 사용자 아이콘을 말합니다.
두번째로 좌측의 게임 메뉴를 선택합니다. 이 설정은 어떤 게임에서 오버레이 설정을 할 것인지 선택할 수 있는 설정창 입니다.
기본적으로 디스코드 프로그램 자체적으로 내 컴퓨터에 설치되어있는 게임들을 감지하며, 최근 플레이했던 시간 까지 알려주고 있습니다. 각 게임마다 따로 오버레이 설정이 가능하며 원하는 게임의 우측 버튼을 클릭하여 'OVERLAY : ON' 으로 변경
해 줍니다.
위의 사진은 현재 롤을 플레이 중이라서 상단에 현재 게임 중이라고 나타나게 되네요.
설정 완료가 되어 게임화면 속에 디스코드가 오버레이 되고 있는 모습입니다. 상대방이 말 하면 밝게 빛나게 되며, 현재 접속하고 있는 디스코드 채팅방 상황을 게임 속에서 한 눈에 보실 수 있습니다.
디스코드 오버레이 설정창에서 지정했던 단축키 버튼을 누르면 투명했던 디스코드의 오버레이가 활성화되며 디스코드 내의 모든 채널 정보를 바로 확인 가능합니다. 이 상태에서 마우스로 드래그하여 오버레이 위치를 이동할 수 있으니 게임에 방해가 안되는 곳에 위치시키면 될 것 같습니다.
이상으로 디스코드 오버레이 설정 방법을 자세히 알아봤습니다.