본문 바로가기

CSS3/CSS Tutorial

(8)
background background : background-color : background-image : url(); background-repeat : - repeat ; - repeat-x ; - repeat-y ; - no-repeat ; background-position : - background-position : 30px 20px; - background-position :center bottom; ( top, left, center, right) (top, middle, bottom) background-attachment : - scroll // 스크롤에 따라 이동 - fixed // 스크롤되지 않음 background-size : - auto - contain - cover - 300px, 300% ..
font, text font-family :font-size :font-style :font-variant :font-weight : text-align :text-shadow : h-shadow v-shadow blur color;text-decoration : none, underline, overline, line-throughtext-indent : 10px; // 문장의 첫 글자를 들여쓰기할 때 line-height : 1.5; list-style-type : (순서 없는 목록) - disc- circle- square- none list-style-type : (순서 목록) - decimal : 1로 시작하는 십진수- decimar-leading-zero : 01로 시작하는 십진수- lower-roman : 소문..
ul, li nav ul{list-style: none;margin: 0 auto;} nav ul li{float: left;display: inline;}
a {text-decoration: none} a: link, a: visited{ }a: hover, active{ }
blank
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);