본문 바로가기

반응형

selector

(2)
#8. CSS 선택자(Selector) - 복합선택자 / 가상 클래스 선택자 CSS 선택자(Selector)란? 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있게 됩니다. 바로 예제로 들어가보도록 하겠습니다. 아래 예제들은 codepen(Click!)에 코드를 붙여넣어 어떻게 실행이 되는지 확인할 수 있습니다. 복합선택자 일치선택자:: 조건을 만족해야 선택이 됩니다. 선택자가 span.orange인 경우에는 태그가 이면서 orange라는 클래스를 가지고 있어야 적용이 됩니다. /* css */ span.orange { color: red; } 사과 딸기 오렌지 당근 토마토 자식선택자:: 자식 요소를 선택합니다. (E > F) :: 꺽쇠(>)가 선택자의 기호로 사용됩니다. 아래 코드는 ul 코드의 자식들(li) 중 orange ..
#1. CSS 정의 및 selector 사용법 # CSS의 정의와 selector를 알아보고, 기본적인 css 사용법을 알아보도록 하겠습니다. # CSS: Cascading Style Sheet # 비전공자가 이해한 CSS 1. CSS란 ? CSS는 Cascading Style Sheet의 약어입니다. Markup language가 실제 표시되는 방법을 기술하는 언어로, HTML과 XTML에 주로 쓰입니다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높습니다. 1) Cascading Style Sheet CSS의 "Style Sheet"는 Web Browser에서 사용되는 스타일을 정의한 문서를 이야기합니다. "Cascading"은 사전적으로는 "연속"이라는 의미를 갖고 있습니다. 즉, 세부적으로 정의된 스타일이 있다면 정의된 내용..

반응형