본문으로 건너뛰기
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

요소가 하나만 있을 때 그 요소에 적용하는 CSS 가상 선택자 :only-child, 언제 사용하면 좋은가?

toddler looking at believe in yourself graffiti
혼자만 있을 때 뿅 하고 사라지기 ©Katrina Wright

CSS 가상 선택자 :only-child는 혼자 있는 요소에 적용할 스타일을 지정할 때 사용합니다.

<ul class="tabs">
    <li class="tab">혼자만 있는 탭</li>
</ul>

위와 같은 상황에서 사용하면 좋습니다. 탭은 여러 개 있을 때 의미가 있는 것은데, DB에 콘텐츠가 없어서 탭이 하나만 노출되는 경우가 발생할 수 있죠.

예컨대, 제품 스펙, 다운로드, 보도자료 같은 탭이 있다고 가정해 봅시다. 그런데 어떤 제품은 다운로드나 보도자료가 없습니다. 그러면 제품 스펙이라는 탭 하나만 남는데, 그러면 모양이 별로죠. 그럴 때는 그냥 탭을 없애는 게 낫습니다.

PHP 같은 서버단 언어로 처리하는 게 깔끔할 텐데요. 뜻대로 안 될 때가 있죠. 그럴 때 아래와 같은 코드를 사용하면 유용합니다.

.tab:only-child {
    display: none;
}

아래는 예제입니다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

Leave a Reply

Your email address will not be published. Required fields are marked *