선택자

Web Basic/CSS

계층선택자와 가상선택자

저번에 기본선택자에 이어서 계층선택자와 가상선택자를 공부하도록 하겠습니다 (*ㅁ*) 앞서 말씀드렸다시피 웹페이지의 디자인을 의도한대로 나타나게 하기 위해서는 알맞는 선택자를 쓰는 것이 중요합니다. 계층선택자 및 가상선택자는 특정 조건을 만족하는 정확한 태그를 찾도록 도와줄 것입니다. 계층선택자 HTML 문서는 태그끼리 트리형태의 계층구조를 띕니다. 부모 태그 아래에 여러 자식 태그가 있고 그 자식 아래에 손자가 있는.... 계층선택자는 이런 복잡한 계층 구조 속에서 원하는 태그를 찾는 방법입니다. 계층선택자에서는 자식선택자와 형제선택자로 나눌 수 있습니다. 먼저 자식선택자는 태그 아래에 직계 자식만을 선택합니다. 부모태그 > 자식태그 {...} 와 같은 형태로 '

Web Basic/CSS

기본선택자

앞서 CSS 세가지 요소에 대해 말했습니다. S (Selector, 선택자) P (Property, 속성) V (Value, 속성값) 이 있고 문법은 S {P : V;} 와 같이 사용할 수 있습니다. 이렇게 CSS 문법을 적용할 때 스타일 적용 대상을 명확히 해야 의도한대로 웹 페이지의 스타일이 적용될 수 있습니다. 따라서 스타일을 적용할 대상을 지정하는 선택자는 매우 중요한 요소라고 생각합니다. ★★★★★ (별이 다섯개!) 이번 포스팅에서는 선택자 중에서 기본이 되는 선택자들을 살펴보겠습니다. Tag 선택자 선택자 중 가장 많이 사용하는 선택자가 바로 Tag 선택자입니다. 적용할 태그 이름 { 속성1 : 속성값; ...}과 같은 방식으로 사용할 수 있습니다. 이전 포스팅에서 태그에 적용한 방법이 태그 ..

pkch
'선택자' 태그의 글 목록