본문 바로가기

HTML

자식, 형제 - 고급 선택자

자식 선택자

ul 태그를 이용해 일반 메뉴처럼 보이는 확장이 가능한 확장 메뉴 1개와 일반 상위 메뉴 4개를 구성했다.

   

html만 작성한 후 미리보면 위와 같은 형태다.

   

자식 콤비네이터 >

상위 메뉴만 자식 콤비네이터 ">"를 이용해 background 속성에 #fff 색상이 적용되도록 했다.

하위 메뉴는 태그 요소를 자세히 작성해서 background 속성에 #bbb 색상을 적용했다.

   

상위 메뉴와 하위 메뉴의 background 색상이 다르게 표현되었다. 콤비네이터 ">"는 태그와 태그 사이에 다른 태그가 존재하면 작동하지 않는다. 바로 다음 태그에만 적용할 때 사용하는 태그다.

   

nav ul li ul li 선택자는 위와 같이 줄여서 사용할 수 있다. 다음은 형제 콤비네이터에 대해 살펴본다.

   

형제 선택자

   

이번에는 ul 태그를 이용해 article 태그를 3개 구성했다. 기본 구성은 같되 마지막 input 태그의 type 속성만 다르게 구성했다.

   

html만 작성한 후 미리보면 위와 같은 형태다.

   

p 태그를 다른 콤비네이터를 이용해 선택한 후 스타일을 변경한다.

   

일반 선택자 ( article p )

아무런 콤비네이터 없이 p 태그를 선택해서 color 속성에 #fff 값을 적용하면 모든 p 태그의 텍스트 색상이 변경된다.

   

인접 형제 콤비네이터 ( article h2+p )

h2 태그와 p 태그를 인접 형제 콤비네이터 "+" 를 이용해 선택한 후 color 속성에 #628 값을 적용하면 h2 태그 바로 다음에 오는 p 태그의 텍스트 색상만 변경된다.

   

일반 형제 콤비네이터 ( article h2~p )

h2 태그와 p 태그를 일반 형제 콤비네이터 "~" 를 이용해 선택한 후 margin 속성 top. bottom에만 10px 값을 적용하면 h2 태그와 동일한 단계의 모든 p 태그의 margin이 추가되어 위, 아래 간격이 벌어진다.


대부분의 스마트폰 웹브라우저는 일반 형제 콤비네이터 "~" 를 지원하지 않는다. 


'HTML' 카테고리의 다른 글

의사, 기타 - 고급 선택자  (0) 2015.04.08
속성 - 고급 선택자  (0) 2015.04.07
reset, normalize  (0) 2015.04.02
reset (스타일 초기화)  (0) 2015.04.01
viewport 설정  (0) 2015.03.31