1. 선택자의 우선순위란?어떤 대상을 여러 번 선택하고 샅은 속성을 지정했다면, 순서에 관계없이 우선 순위가 높은 선택자가 적용될 것입니다. 선택자의 우선 순위를 값으로 표현한다면 공통 선택자는 "0", 타입 선택자는 "1", 클래스 선택자는 "10", 아이디 선택자는 "100"의 우선 순위를 가집니다. 물런 그 값이 클수록 우선 적용됩니다. 1-1. 다음의 예제에서 ".area p" 선택자는 그 값이 클래스와 타입을 더해 "11"을 가지고 "area #text"는 클래스와 아이디를 더해 "110"의 값을 가집니다. 결국 ".area #text"로 선택한 방법이 적용됩니다. 앙큼한유채`s 일상 Story 1-2. 한편 스타일을 시작태그에 인라인 형식으로 지정한다면 그 값이 "1000"정도로 아주 높아집니..

1. 가상 선택자 (Pseudo selector)알아보기선택하려고 하는 요소를 좀 더 구체적으로 또는 그 요소의 상태를 같이 지정하는 방법입니다. 아주 다양한 가상 클래스 선택자가 있는데, 오래 전부터 활용되어 온 예로는 요소에 링크 스타일을 지정하는 방법입니다. ※ 익스플로러 버전6에서는 ":link",":visited", ":hover", ":active"만 지원합니다. 1-1. 링크 가상 클래스(link pseudo classes)와 동적 가상 클래스(dyna,ic pseudo classes) 선택자:link 요소에 링크가 지정됐으면 :visited 지정된 링크를 방문했었다면 :active 사용자의 동작에 따라 변화를 렌더링하는 방법으로 클랬했을 경우 :hover 마우스를 올릴 경우 :focus 키..

1. 속성 선택자 (Attribute selectors) 알아보기언떤 요소를 선택할 경우에 그 요소가 가진 "속성"을 추가로 지정할 수도 있습니다. 속성은 중괄호([, ])안에 적용하고, 속성이 가진 특징에 따라서 다음과 같은 다양한 옵션을 지정할 수 있습니다. 여기서는 몇가지 유용한 속성 선택자를 알아보겠습니다. ※ 속성 선택자는 익스플로러 버전 6이라에서는 적용되지 않습니다. 1-1. "E[foo]"는 "foo"라는 속성을 가진 요소를 선택하는 방법입니다. 다음은 "title" 속성을 가진 요소를 선택해서 글자 색상을 변경하는 예제입니다. 1-2. "E[foo='warning']"이라는 속성과 값을 모두 만족시키는 요소를 선택합니다. 다음 코드와 같이 작성하면 요소 중에서 "target='_blank..

1. 구체적으로 찾아가는 방법1-1. 자손(하위) 선택자 (Descendant selectors)자손(하위) 선택자는 "E, F"의 형식(띄어쓰기)으로 작성하는데, "E"요소의 하위에 있는 모든 "F" 요소를 선택하는 방법입니다. 다음의 예제에는 세 개의 요소가 있지만, 선택할 때 ".area"하위의 요소를 지정했으므로 클래스 명이 ".area" 인 요소의 하위에 있는 2개의 요소들만 선택됩니다. 앙큼한유채`s 일상 StoryLorem ipsum dolor sit amet, consectetur adipisicing exit. 1-2. 자식 선택자(Child selectors)자식 선택자는 "E>F"의 형식으로 작성하며 "E"의 자식요소인 "F"를 선택하는 방법입니다. "자식 선택자"와 "자손 선택자"의..

1. 기본 선택자 알아보기1-1. 태그 산택지(타입 선택자)문서의 html 태그를 선택자로 지정하는 방법입니다. 다음 코드는 문서의 요소의 글자 색상을 "orange"색으로 지정한다는 의미입니다. 1-2. 전체 선택자(공통 선택자)css를 적용할 대상을 지정하는 방법 중에서 모든 요소를 지정할 수 있는 선택자가 있습니다. 다음 코드에서 "*" 선택자는 문서 내에 있는 요소인 body, h1, p, span, address, a 요소를 각각 선하는 것과 같습니다. 앙큼한유채`s 일상 StoryLorem ipsum dolor sit amet, consectetur adipisicing exit.mail : sample.com "*"선택자는 "selector *"와 같은 방법으로도 활용할 수 있습니다. 이것은..