12월 16, 2022

웹사이트 메뉴 | 세로점 3개 이름과 보이기 | Vertical Ellipsis

기호는 인터넷상에서 많이 활용되지만, 공식적인 마땅한 이름이 없어 ‘세로 3개 점’과 같이 주관적으로 이름을 유추해야 하므로 불편하기 짝이 없습니다. 다만 가장 공신력이 높다고 회자 되는 구글 위키백과에 서술되는 ‘세로 줄임표’(vertical ellipsis)나 케밥 메뉴(kebap menu)가 나름대로 호칭의 타당성이 있어 보입니다. 그중 의태어 측면에서 주로 꼬치(Skewer)에 양고기를 꿰는 ‘케밥 요리’와 모양이 흡사하여 붙여진 이름으로 추측되는 ‘케밥 메뉴(kebap menu)’가 적당한 것으로 보여 이후 기호를 ‘케밥 메뉴’로 호칭합니다.

⠇의 유래

원래 기호는 알파벳 'U'를 나타내는 점자(點字)입니다. 점자는 1821년에 '루이 브라유(Louis Braille)'가 시각장애가 있는 사람을 위해 최초로 고안해서 개발한 문자 체계입니다.

는 유니코드(U+22EE, 특수문자)이기 때문에 문자처럼 사용하면 됩니다. & #8942;,& #x22EE;, & vellip; 중 하나를 html문서로 작성하면  처럼 표시됩니다. 그러나 & #8942;를 텍스트 문서로 작성하면 특수문자 대신& #8942; 처럼 그대로 보여집니다. 또한 '&'사이의 여백이 전혀 없으면 특수문자( )로 보이고, 여백이 있으면 (& #8942;) 처럼 그대로 표시됩니다.

유니코드(특수문자)를 html을 이용하여 표시할 때는 구성하는 문장부호와 기호 및 숫자 간 여백이 전혀 없어야 합니다. 위의 문장에서 일부가 특수문자 대신 부호와 기호 및 숫자로 보이는 것은 설명을 목적으로 일부러 여백을 주었기 때문입니다.

⠇표시 방법

구글 아이콘

<div id="verti"></div>
<style>
.verti:after {
   content: 'more_vert';
   font-family: 'Material Icons';
   color:gray;
   vertical-align: top;
   font-size: 100px;
}
</style>

폰트어썸

<div id="test"></div>
<style>
.test:after {
  content: '\2807';
  font-size: 100px;
}
</style>

SVG 코드

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>