How TO - Side Navigation

사이드 메뉴바

https://www.w3schools.com/howto/howto_js_sidenav.asp

How To Create a Side Navigation Menu

---

Sidenav Overlay Example.txt

0.00MB

Study Point 1.

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

보통 a태그를 클릭하면 href에 지정한 url로 페이지가 바뀌면서 이동하게 됩니다.

그런데 a태그는 이용하되 페이지가 바뀌면서 이동을 하고싶지않을때 이 javascript:void(0)을 이용하면 됩니다.

 

void(0)은 undefined를 반환하는 함수입니다.

이를 이용해 void 연산자가 undefind 값을 반환하면, a태그의 href 속성 값에 undefind 값이 지정되어 아무런 동작도 하지않게되는 원리입니다.

즉, a태그의 디자인성은 살리고 링크 기능을 무효화 시키는 것입니다.

void(0)의 경우 () 안의 값이 숫자나 영문자 등등을 사용해도 상관없으나 일반적으로 0을 이용합니다.

 

* javascript:undefined 도 동일한 방법이나 예전에는 undefined가 global 변수로 사용되어져 재사용 될 수 있는 소지가 있으며 구버전 브라우저에 대한 대응문제 등도 있어서 void(0)을 주로 이용합니다.

* <a href="">의 형태로 비운 상태로 코드를 생성하면 유효성 오류가 나기때문에 좋은 코드가 아닙니다.

위와 비슷한 기능을 하는 href 값들은 아래와 같습니다.

• <a href="#"> : #만 쓸 경우 이 태그를 누르면 스크롤이 어디에있든 최상단으로 이동됩니다.
• <a href="#none"> : #뒤에 id로 쓰지않는 값을 넣으면 어느 오브젝트로 이동하지도 스크롤 이동하지도 않습니다.
• <a href="javascript:;"> : 아무런 일도 생기지 않습니다. (스크롤이동 X, undefined 발생 X)
• <a href="javascript:void(0)"> : void 안에 0말고 영문, 숫자도 사용가능.

---

Study Point 2.

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

여기서 &times은 HTML에서 이용하는 X 곱셈 기호로 사이드 메뉴바가 열렸을때 보이는 X 표시 용도로 작성.

이외에도 HTML 엔티티는 표기에 혼란을 줄 수 있는 <, > 같은 문자나 키보드로 표현하기 어려운 특수문자를 표현할 수 있도록 엔티티의 이름이 지정되어있습니다.

 

&nbsp; : 공백, &lt; : <(보다 작은), &gt; : >(보다 큰), &amp; : &(and 기호), &quot; : "(큰따옴표), &apos; : '(작은따옴표)

https://www.w3schools.com/html/html_entities.asp

HTML Entities

또 다른예시로 위의 <span> 태그 내에 입력된 '&#9776;' 도 ☰ 모양의 특수문자를 지칭합니다.

https://www.w3schools.com/charsets/ref_utf_symbols.asp

HTML Unicode UTF-8