탭메뉴 만들기

오늘 탭메뉴를 만들다가 살짝 헤매서 기록용으로 글을 남긴다.
기록이 모이다 보면.. 뭐든... 되겠지...

원래 만들고 싶은 메뉴는 위의 그림과 같은 메뉴이다.
평상시 웹 사이트에서 많이 볼 수 있는 디자인이다.

처음 작성한 CSS

얼핏보면 맞게 만든것 같다.
하지만 자세히 보면 문제가 있는데, li.active가 됐을때 메뉴1의 오른쪽 선이 보이면 안되는데 그대로 있는것이다 :-(

이런식으로 선이 겹쳐져서 보인다.
내가 원하던 디자인이 안나왔다.

/* css 코드 */

.tab_menu li {
	background: #fafafa;
    border: 1px solid #e4e8eb;
}

.tab_menu li ~ li {
	border-left: none;
}

.tab_menu li.active {
	position: relative;
    background: #fff;
	border: 1px solid #000;
}

여기서 TMI) 일반형제선택자 " ~ "

요소들의 부모가 같을때(형제일때) A ~ 다음 형제를 모두 선택한다.
말로 설명하기엔 어려운데, 예시로 p ~ span 이면 p의 형제인 span을 모두 선택하는 선택자이다.
위 코드를 보면, 나는 li ~ li으로 사용했기 때문에, li의 형제인 li을 선택하는 것이라, 맨 첫번째 li를 제외한 다른 li의 border-left를 none으로 처리한것이다.

보완한 CSS

/* css 코드 */

.tab_menu2 li {
  margin-left: -1px;
  background: #fafafa;
  border: 1px solid #e4e8eb;
}

.tab_menu2 li.active {
  position:relative;
  background: #fff;
  border: 1px solid #000;
} 

이번에는 li에 margin값을 마이너스로 줘서 선이 겹치게끔 만들었다.
이렇게 하니까 li.active가 됐을때 position: relative의 영향을 받아 본인 자리를 유지하면서 z축으로 올라오게 되어 원하는 디자인을 만들 수 있게 되었다.

결과

여기서 TMI2) inline, inline-block의 여백

display 속성값이 inline이나 inline-block인 요소들은 각 요소 사이에 여백이 생긴다.
제일 쉽고 간단한 방법은 부모 요소에 font-size: 0;을 주면된다.
그 뒤에 자식한테 다시 font-size를 줘야 텍스트가 보이니 주의하자.