본문 바로가기

www74

border-radius 속성 개요border-radius 속성은 테두리를 둥글게 표시해준다.px, em등의 단위를 사용하며 border-top-left-radius , border-bottom-right-radius 같은 속성이나 margin/padding처럼 띄어쓰기를 구분으로 4개 모서리를 각각 설정 할 수 있다.사용법#box { border-radius: 7px 2px 15px 5px} #box2 { border-radius: 3px} 예제 #box { border-radius: 0px 5px 10px 15px; border:3px solid;} #box2 { border-radius: 5px; border:3px solid} Border Radius Test Border Radius Test2 출력 결과:Border Radi.. 2015. 1. 5.
cursor 속성 개요cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있다.auto : 자동default : 기본값 (화살표)pointer : 클릭시의 마우스 (손가락 모양)wait : 로딩등 다양한 종류의 cursor 속성이 있다.사용법Wait 예제 Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help 출력 결과:AutoCrosshairDefaultPointerMovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizeTextWaitHelp 2015. 1. 5.
가상 클래스 개요CSS 태그 혹은 아이디, 클래스명 설정 뒤 :이벤트 를 붙이면 특정 이벤트마다 적용 할 CSS를 사용 할 수 있으며 이를 가상 (추상)클래스라 한다. 그 중 :hover을 붙이면 CSS가 적용된 태그에 마우스가 올려졌을 때 적용할 CSS를 의미한다.사용법.box{ background-color:blue; } .box:hover{ background-color:red; } div#c_box span:hover {background-color:green; } 예제 .box{ background-color:blue; } .box:hover{ background-color:red; } div#c_box span:hover {background-color:green; } 마우스를 올려보세요. span 태그에.. 2015. 1. 5.
after 가상 선택자 개요:hover, :active 외에도 다양한 추상 클래스 / 가상 선택자가 존재하는데 그 중 :after 라는 가상 선택자가 존재한다.이는 컨테이너 요소 안 맨 마지막에 추가시킬 태그를 지정할 수 있다.Internet Explorer 7 이하 버전은 after 가상 선택자를 지원 하지 않는다.사용법#container:after{ content:"추가된 텍스트"; display:block } 예제 #container:after{ content:"더 텍스트가 추가되었습니다."; display:block } 기존 텍스트에 출력 결과:기존 텍스트에더 텍스트가 추가되었습니다 2015. 1. 5.

티스토리툴바