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 *"와 같은 방법으로도 활용할 수 있습니다. 이것은..

1. CSS로 지정하는 길이의 단위 알아보기CSS에서 지정하는 길이값의 단위는 문서가 표현되는 매체의 종류(인쇄물/모니터)에 따라 달라질 수 있습니다. 인쇄용이라면 "절대값"과 관련된 단위인 "in(인치), cm(센티미터), mm(밀리미터), pt(포인트), pc(파이카)" 등을 적용하고 모니터(또는 스크린)용이라면 "em, ex, px, %" 등의 "상대값"을 적용합니다. 웹작업에서는 주로 상대값으로 지정하는 것이 효과적입니다. HTML5에서는 "ren과 ch"가 추가됐고, 뷰포트(viewport)의 백분율 길이인 "vw, vh, vmin, vmax"등이 추가됐습니다. 1-1. 절대값에 해당하는 단위는 in, cm, mm, pt, pc 등이 있는데, 이 값들의 길이는 다음과 같습니다. 1in = 96i..

1. CSS의 값을 표현하는 규칙들1-1. CSS로 표현하는 색상값 알아보기글자와 배경의 색상을 지정할 때 그 값으로 "16진수를 이용한 헥사표기법, 색상의 키워드(이름)를 입력하는 방법, RGB의 범위 값 입력 방법"등을 사용할 수 있습니다. HTML5에서는 "색조/채도/명도 입력"과 "투명도 추가"방법이 도입됐습니다. ex1) "16진수 표기법"은 "#"으로 시작해서 R(red), G(green), B(blue)에 해당하는 색상값을 16진수로 연이어 입력합니다. 각 16진수는 2자리로 표현되며 "#rrggbb"의 형식이 되는데, 각 값들이 반복되는 값일 경우 "#rgb"의 형식으로 한 자리씩 생략 가능합니다.#ffddbb ☞ #fdb 앙큼한유채`S 일상 Story ex2) "색상 키워드"를 입력하는 ..