본문 바로가기

CSS3

(18)
selsector
block, inline display block ~ inline display - block // 블록레벨 요소로 만든다 - inline // 인라인레벨 요소로 만든다 - inline-block // 블록레벨 박스지만 인라인 레벨 박스처럼 배치한다 - none // 화면에 표시하지 않는다 - inherit // 상위 요소의 display 속성을 상속 - table // 블록레벨의 표로 만든다 - inline-table // 인라인레벨의 표로 만든다 - table-cell // 표의 셀로 표시한다
vender prefix border-radius: 15px 0px;-webkit-border-radius: 15px 0px; // sapari, chrome-moz-border-radius: 15px 0px; // firefox-o-border-radius: 15px 0px; // opera-ms-border-radius: 15px 0px; // IE background: -prefix-radial-gradient(circle, white, blur);
ul li .menu{margin: 0px;padding: 0px; // ul 에는 기본적인 margin값과 padding값을 가지고 있으므로 없애준다} .menu li{float: left;width: 100px;text-align: center;list-style: none; // 점을 없앤다.border: 1px solid #000;margin-right: -1px;height: 30px;line-height: 30px;} menu1 menu1menu1menu1menu1
float float: left; // 부모 요소의 왼쪽 끝으로 이동float: right; // 부모 요소의 오른쪽 끝으로 이동float: inherit; // 부모 요소의 float속성을 물려받는다는 뜻float: none; // 요소가 플로트되지 않는다는 뜻이고, 기본값img { float: right; margin: 10px;} 값
position: relative, alsolute position: absolute;left: 50px;margin-left: -50px; // width 의 절반width:100pxheight:100px;text-align:center;line-height:100px;border:1px solid #eee; background: #ff0404;
list-style-type list-style-type:square;list-style-type:upper-alpha;
border - none : 테두리 없음- solid : 실선- double : 이중 실선- dotted : 점선- dashed : 굵은 점선- groove : 오목하게 들어간 액자 테두리 모양- ridge : 볼록하게 나온 액자 테두리 모양- inset : 내용이 잠긴 느낌의 입체선 모양- outset : 내용이 튀어나온 느낌의 입체선 모양 border: solid 2px;border-color: #ccc;border-radius: 7px;-webkit-border-radius:7px;