이번의 목표 01.스타일을 그룹으로 한번에 지정해보자. 다수의 구역에 같은 스타일을 한꺼번에 적용할 때에는 번거롭게 각각의 구역에 스타일을 지정할 필요가 없습니다. 한번에 손쉽게 여러 구역을 그룹으로 적용할 수 있기 때문입니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 Group Selector_1 스타일 지정을 그룹으로 적용 Group Selector_2 02. 실행 화면

이번의 목표 01. overflow를 사용해보자 하위의 구역이 상위의 구역보다 클때 구역을 넘기는 경우가 종종 있습니다. 이럴 때에 해결하기 위해서 overflow 속성을 사용할 수 있습니다. overflow 속성에는 크게 hidden, scroll, visible 세가지가 있습니다. 설명은 코드에 적어 두었습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 hello css 다음 내용 02. 실행 화면

이번의 목표 01. class를 이용하여 가상 클래스를 사용해보자. 지난 시간에는 가상 클래스를 만들고 사용해보았습니다. 이번에는 class를 이용하여 가상 클래스를 사용해보겠습니다. 하면서 border 의 종류에 대해서도 몇가지 간단히 알아보겠습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 Pseudo Class 속성 값 : solid, double, dotted, dashed 가상 클래스 1 영역 마우스 위치에 따른 박스의 스타일 변화. 가상 클래스 2 영역 마우스 위치에 다른 박스의 스타일 변화. 가상 클래스 2 영역 마우스 위치에 다른 박스의 스타일 변화. 가상 클래스 2 영역 마우스 위치에 다른 박스의 스타일 변화. 02. 실행 화면 border의 종류에는 이외에도 다양하게 있..

이번의 목표 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. 실행 화면