테이블을 활용한 메뉴를 만들때 보더라인이 두꺼워져서 머리가 아프신가요? 네 저도 그래요^^
html에서 table태그를 사용할 경우 border-collapse를 설정해주면 되는데 table태그보단 div를 css에서 display: table이런 방식을 많이 사용하게 되죠. 이럴때 margin-left: -1px를 해주면 해결되는데...
문제는 첫번째 셀도 왼쪽으로 1픽셀 움직이기 때문에 첫번째 셀을 뺀 나머지에게만 적용해줘야하죠. 이럴때 유용하게 사용되는 선택자가 인접 형제 선택자 입니다!
먼저 기본동작은 아래와 같습니다.
형제1 + 형제2 은 형제1의 형제들 중에 첫번째로 등장하는 형제2를 선택합니다. (예제에서는 첫번째로 등장하는 bro) 간단하쥬? 😉
그런 처음에 언급한 메뉴는 어떻게 적용해야 할까요? 아마 각 메뉴들은 div에 또 한번씩 싸여있겠죠?
menu_item에 바로 적용하면 될것 같지만 border속성이 menu_link에 적용되있기 때문에 아래와 같이 만들어 줘야 합니다.
여기서 중요한 포인트는 margin-left: -1px값이 첫번째 셀을 제외하고 적용되야 한다는 것!!!
"Think Now, Design Later"