[HTML/CSS] HTML 에서 진짜 탭(tab)을 사용하는 방법

🕓2018.09.05 📈85

제목부터 조금 이상하긴 하지만, HTML 로 작성된 웹페이지를 만들면서 탭(tab) 키를 입력 했을때 처럼 공백을 사용하고 싶은 경우가 있습니다. 예를 들어 아래 처럼요.

Left		Right
LeftAgain	Right

HTML 문서에서 탭을 사용하려는 여러가지 시도가 있습니다만, 거의 대부분은 잘 못된 경우 입니다. 진짜 탭을 사용한 결과를 나타내려면 탭 다음에 나오는 열들이 딱 정렬되어야 하는데 보통은 그냥 같은 수의 공백이나 padding 을 추가하는 경우가 많아 진짜 탭 처럼 사용할 수 없지요. 그래서 진짜 탭을 사용할 수 있는 방법을 기록해 봅니다.

(참고로 HTML 과 CSS 모두를 사용해야 합니다.)

기본 사용법

HTML + CSS

/* HTML */
<span class="tab">&#9;</span>

/* CSS */
.tab { white-space: pre; }

워드프레스 숏코드

아래는 워드프레스에서 탭을 숏코드로 만들어 사용하는 방법입니다. [tab] 이라는 숏코드를 입력하면 자동으로 탭을 넣어줍니다.

/* HTML */
<span class="tab">&#9;</span>

/* CSS */
.tab { white-space: pre; }

/* PHP in WordPress */
function tab_shortcode() {
	return '<span class="tab">&#9;</span>';
}
add_shortcode( 'tab', 'tab_shortcode' );

설명

그럼 이제부터 위 코드들이 어떻게 돌아가는지 설명 들어 갑니다.

탭을 나타내는 문자, 	

HTML 문자 중에서 공백을 나타내는 것으로 가 보통 많이 쓰입니다. 이 문자는 한 칸의 공백을 만들어 줍니다. 이처럼 탭을 만들어 주는 문자도 있습니다. 바로 	 가 바로 그것입니다.

이 말은 곧 HTML 문서를 작성하면서 	 를 넣으면 문서에 탭을 넣을 수 있다는 것입니다.

white-space: pre;

하지만 이 	 문자가 그냥 HTML 문서에 노출될 경우 공백 한 칸으로 밖에 표현이 되지 않습니다. 이 문자가 제 기능을 하는 곳은 오직 pre 태그 내부에서만입니다.

하지만 CSS 를 활용하면 보통의 HTML 문서에서도 	 가 탭으로서의 역할을 할 수 있도록 할 수 있습니다.

그래서 	 를 span 태그로 감싼 후 class 를 지정하고 해당 클래스를 가진 요소에 대해 white-space 를 pre 처럼 표현하라고 스타일을 지정하는 것입니다.

이 과정이 바로 기본 사용법의 첫번째 예제입니다.

숏코드로 간편하게 사용하기

워드프레스를 이용하는 중이고 어느정도 PHP 를 다룰줄 아는 상태라면 숏코드를 만들어 간단하게 사용할 수도 있습니다.

특정 숏코드를 만들어서 해당 숏코드에서 위의 white-space 가 pre 로 지정된 	 가 들어 있는 span 태그를 반환하도록 하면 되는 것입니다.

간단하죠? 플러그인을 만들어 배포해보는 것도 나쁘지 않아 보이네요.