이번의 목표 01. 에 가상 클래스를 만들고 사용해보자. 가상 클래스를 이용하여 마우스 이벤트에 따른 링크의 변화를 확인해 볼것입니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 Pseudo Class test : 마우스 이벤트에 따른 링크의 변화 test : 마우스 이벤트에 따른 링크의 변화 link : 웹 문서에서 사용자가 방문하지 않았던 곳을 표시한다 visited : 웹 문서에서 사용자가 방문한 곳을 표시한다. hover : 웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간을 나타낸다. active : 웹 문서에서 사용자가 링크를 클릭하는 순간을 나타낸다. 02. 실행 화면 ①방문하지 않은 문서인 test는 분홍색 글씨로 출력되고, 이미 방문한적이 있는 문서는 파란색으로 출력..

이번의 목표 01. 자식 객체에 스타일을 적용해보자. 02. 자식의 자식 객체에도 스타일을 적용해보자. 03. 자식의 자식 객체에서 id와 class를 이용하여 스타일을 적용해보자. 네이버의 홈페이지 html 코드를 보면 안에 하위 가 몇번이고 반복 되는 것을 알 수 있습니다. 이럴 때에도 하위의 범위를 지정하여 스타일을 적용할 수 있습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 Descendant Selector_1 자식의 자식 (후손1) 자식의 자식 (후손2) 자식의 자식 (후손3) 자식의 자식 (후손4) 자식의 자식 (후손5) Descendant Selector_2 02. 실행 화면

이번의 목표 01. [] (대괄호) 를 이용하여 스타일을 적용해보자. 02. 임의의 속성을 만들어서 스타일을 적용해보자. 만약에 어떠한 속성을 사용하는 구역에만 스타일을 적용하고 싶다면 [] 를 이용하여 가능합니다. 태그의 속성에는 jsp에서 지원하는 속성 외에도 개발자가 임의로 속성을 사용할 수 도 있습니다. 당연하게도 개발자가 임의로 넣은 속성에는 아무런 기능도 존재하지 않습니다. 하지만 이 우리가 부여한 속성을 구분자로 하여 다양하게 활용이 가능합니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 a m 속성 이름 선택자 m 속성 이름 선택자 text 속성 이름 선택자 속성과 속성값 선택자 속성과 속성값 선택자 속성 선택 없음 02. 실행 화면

이번의 목표 01. class 속성을 이용하여 스타일을 적용해보자 이전 시간에는 id 속성을 이용하여 스타일을 적용해보았습니다. 이번에는 class를 지정하여 각각의 class에 스타일을 적용하는 것을 해보겠습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 id1 Selector id1 Selector id2 Selector id2 Selector id2 Selector 02. 실행 화면

이번의 목표 01. id 속성을 이용하여 스타일을 적용해보자 이전 시간에는 각각의 태그별로 일괄적으로 스타일을 적용했습니다. 이번에는 구역에 id를 지정하여 각각의 id에 스타일을 적용하는 것을 해보겠습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 id1 Selector id1 Selector id2 Selector id2 Selector id2 Selector 02. 실행 화면

이번의 목표 01. 구역을 지정해서 스타일을 꾸며보자 지난 시간에는 * 을 이용하여 모든 객체에 일괄적으로 동일한 스타일을 적용시켰습니다. 이번에는 각각의 구역에 서로 다른 스타일을 적용하는 것을 해볼 것입니다. 01. jsp 코드 02. 실행화면 01. jsp 코드 tag Selector 서로 다른 색상 태그별로 다른 스타일을 적용 시 사용 tag를 지정해서 적용하기에 동일한 tag에 모두 적용 02. 실행 화면