css지옥에서 탈출하자(14) - 특정 element를 우클릭했을시 새탭과 새창 고르는 창(context menu)뜨게하기

이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.

여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.

 

참고:

css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.

css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열

css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)

css지옥에서 탈출하자(4) - display: flex와 margin: auto를 이용해서 기존의 문제 해결(header나 nav에서 한 엘리먼트만 좌측 배치, 바닥에 붙는 footer, 수직 중앙정렬)

css지옥에서 탈출하자(5) - 엘리먼트를 드래그 앤 드랍(drag and drop)으로 자유롭게 옮긴다고?

css지옥에서 탈출하자(6) - css로 삼각형을 그려보자

css지옥에서 탈출하자(7) - display inline-block 나열시 공백 제거하기

css지옥에서 탈출하자(8) - div에 transition을 줘서 부드럽게 애니메이션 효과로 움직이기

css지옥에서 탈출하자(9) - 스크롤바가 없는 스크롤을 만든다?

css지옥에서 탈출하자(10) - 현재 내가 얼마나 스크롤(scroll)했는지 부여주고 싶을 때, 진행도(progressed) 표시

css지옥에서 탈출하자(11) - css로 원을 그려보자. 원속의 원 만들기(과녁처럼)

css지옥에서 탈출하자(12) - 반응형과 미디어 쿼리 완전 기초

css지옥에서 탈출하자(13) - table에서 문자열 조정하기(word-break , word-wrap, white-space)

특정 엘리먼트(태그)를 우클릭 했을 시 반드시 새탭과 새창을 고르는 메뉴가 뜨는건 아니다.

이건 조금 특별해서 크롬브라우저기준으로 a태그(앵커태그)만 인식해서 새탭과 새창을 뜨게한다.

따라서 만약 여러분이 특정 컴포넌트를 눌렀을때 새탭과 새창이 뜨게하고싶다면 전체를 a태그로 감싸주면된다.

단 a태그는 기본이 inline이므로 (잘 모르면 해당 포스팅 참조) block으로 바꿔주는 작업이 필요하다.

See the Pen new tab default by justkukaro (@kukaro) on CodePen.

아래 예제를 실행해보면 이제 여러분의 컴포넌트가 정상적으로 실행되는걸 알 수 있다.

하지만 여기에서도 주의를 요한다.

위의 코드를 자세히보면 a태그가 event를 가지는걸 알 수 있다.

보면 a태그의 링크는 google페이지로 가게 해뒀다.

그런데 js를 보면 naver로 가게해놨다.

preventDefault로 인하여 a태그는 본연의 기능을 상실하고 js만 동작하게 된다.

이러한 코드는 꽤 흔하게 볼 수 있는데 a태그를 동작하기 전에 기능들을 할때 a태그의 기능을 막고 js로 동작하는 방법이다.

하지만 만약 여러분이 위 처럼 짜게되면 문제는 우클릭으로 새탭 혹은 새창에서 띄울때랑 그냥 누를때랑 다른페이지가 뜨게된다.

눌러서 들어갈때는 js가 동작하지만 새탭을 띄울때는 js가 동작하지 않는 것이다.

이를 여러분이 잘 알아서 판단해야한다.

즉 href를 장식용으로 사용하지 않고 정말 의미있게 사용해야한다.

이는 js를 이용해서라도 말이다.

하지만 아래같은경우 또다른 문제를 야기할 수 있다.

이러한 코드를 가정해보자.

여러분이 지금 페이지를 넘어가기 전에 쿠키나 스토리지, 세션등에 데이터를 저장한 후 다음페이지로 넘어간다면?

쉽게 말해서 여러분이 새탭으로 열기전에 해야할 액션이 많은 경우를 가정하자는 것이다.

이경우에 여러분은 원하는데로 코드가 동작하지 않을것이다.

이런식으로 새창으로 열때는 onclick로직을 실행하지 않는다. 그래서 여러분의 작업에 영향을 줄 수 있다는 것이다.

따라서 이런경우에는 우클릭시에 로직을 따로 만들어 주는것이 좋다.

사실 이 방법도 완벽하지는 않고 허점은 있지만 아마 여러분이 원하는 대부분의 상황에서는 유효할 것이다.