속성에 따른 CSS 적용 CSS를 적용할 때 동적으로 변경되는 UI를 지정하는 방법이 있습니다. 다름아닌 :hover 속성을 이용하는 것인데요. IE6에서는 A 엘레먼트에 대해서만 지원이 되었습니다. 즉 태그를 사용해서 하이퍼링크를 걸어놓은 텍스트에 마우스 커서가 올.....
본 글은 독자들이 보다 쉽게 이해를 할 수 있도록 하기 위해 최삼순이라 는 특정인물과 상황을 만들었습니다. 이제 본격적으로 “최삼순”인턴과 함께 CSS를 공부해 볼까요? CSS의 핵심은 스타일을 적용하는 것입니다. 그럼 이제 CSS로 스타일을 어떻게 구현하는지 .....
CSS에서 사용하는 다중 선택자(Multi Class)란 동일 엘리먼트에 여러개의 선택자(id, class)를 동시에 적용하기 위한 목적으로 여러개의 선택자를 사용하는 것을 말합니다.CSS1에서 선택자의 개념이 사용된 후, CSS2에서 다중 선택자가 추가되어 사용되고 있는데요, CSS.....
class로 처리할 것인지 id로 처리할 것인지 tag명으로 처리할 것인지 구분하는 방법 정해야하는 순서(커버리지가 더 넓은 것에서 더 좁은 쪽으로 정해 나간다.)1. tag2. class3. id4. 선택자를 이용한 조합 Q1. 현재 작업하고 있는 페이지 혹은 웹사이트 전체에서 .....
pseudo-class selector(유사 클래스 선택자) 중 :hover는 마우스 오버시 스타일을 지정할 수 있게 해주는 선택자 입니다. :hover를 포함한 :active, :focus 등의 동적 유사 클래스는 모든 엘러먼트에 적용이 가능하나 몇몇 최근 브라우저에서만 사용이 가능합니다. .....
Base.css 설명 태그 속성 설명 body {margin:0;padding:0;background-color:font-size:12px;font-family:굴림,gulim,sans-serif;color:} 배경 color 필수 hr {display:none;} 레이아웃 구분(top/left/contents/footer)에만 적용 img,fieldset {bor.....
마지막으로 여러 class를 선택하는 방법을 보시겠습니다. abc ol {list-style:none;margin-left:20px;} 이런 상황이었는데, 새로 올라온것은 볼드를, 인기있는것은 밑줄로 표시를 하고 이 두가지 모두인경우는 볼드, 밑줄 전부 주기로 하겠습니다. 우선 HTML을 수.....
다른 응용방법, 자기 자신에 대한 class를 선택하는 방법(?)을 보시겠습니다.123abc.list {list-style:none;margin-left:20px;}디자인은 똑같지만, 시멘틱한 마크업을 위해 li, ol 를 구분해서 코딩 했다고 가정을 하겠습니다.이렇게 서비스를 하던 어느날, ol 의 list .....
CSS의 시작은 Selector로부터 한다고 말을 해도 과언이 아닙니다.그 이유는 모두가 알고 있겠지만, Selector 즉 선택자가 존재하지 않는다면 선언된 CSS가 어떤곳에 적용을 해야 할지 모르기때문이죠.명령은 했지만, 누구에게 명령을 한건지 모르는것과 비슷하다고 .....
dojo 자바스크립트 툴킷이 dojo.query라는 dojo를 위한 CSS Query Engine을 공개했다. CSS Query Engine이란 HTML DOM structures를 CSS 선택자로 접근할 수 있도록 하여, 보다 쉽고 빠르며 효율적으로 DOM을 이용할 수 있는 방법을 제공한다. 이 CSS Query Engine라는 .....