본문 바로가기

www/CSS_tip51

position 속성 개요position 속성은 태그의 위치 표시 상태를 의미한다.속성값에는 아래의 5개가 있다.static - 기본값으로 위치정보를 임의로 설정 해줄 수 없다. absolute - 절대위치로, 문서 최 좌측상단을 기준으로 위치정보를 설정하며 스크롤시 이동한다. relative - 상대위치로, static 위치 사용시 있던 위치를 기준으로 이동한다. fixed - 위치 고정으로, 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표가 설정되어있다. inherit - 부모 태그의 속성값을 상속받게 된다.position 속성은 보통 단독으로 쓰이기 보단 left, right, top, bottom 속성과 함께 쓰인다.position 을 absolute 나 fixed로 설정시 가로 크기가 100%가 되는 blo.. 2015. 1. 5.
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.

티스토리툴바