목록CSS3 (10)
름름
rgba는 선언한 요소에만 적용되며 상속되지않는다.opacity는 모든 자식요소에 상속된다. background:rgba(255,0,0,0.5); background:red; opacity:0.5;
div { animation-name: moving; animation-duration: 5s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: backwards; animation-play-state: running; } short [이름] [실행속도] [속도곡선타입] [딜레이시간] [반복횟수] [진행방향] [끝난후 위치] [실행or정지][name] [duration] [timing-function] [delay] [count] [direction] [fill-mode] [play-state] anim..
transition-property:width; transition-duration: 1s; transition-timing-function: ease; transition-delay: .5s; short [속성] [실행속도] [속도곡선타입] [딜레이시간][property] [duration] [timing-function] [delay] transition: width 1s ease .5s; // 생략가능 Transition property 위치속성 top, left, bottom, right 크기속성 width, height 박스 속성 margin, padding 테두리 속성 border-width, border-height 색상 속성 color, background-color 변환 속성 transf..
그라디언트 background {linear-gradient(각도, 컬러1 위치, 컬러2 위치);} .gr {width:100px; height:100px; background: linear-gradient(180deg, yellow 0%, orange 100%)} .gr { background: linear-gradient(to bottom, yellow 0%, orange 100%)} // 하이라이트생략가능(default 값으로 적용) .gr { background: linear-gradient(yellow,orange)} * 그라디언트 방향과 각도 지정시주의 1. 방향으로 지정시 (최신 모더브라우저에서는 방향지정시 to로 시작 ) .gr {background:linear-gradient(to lef..
가상 요소(Pseudo-elements) ::first-line ::first-letter ::before ::after ::first-line Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. ::first-letter Lorem ipsum dolor sit amet, consectetur adipiscing elit. ::before..
자식 선택자(Child Selector) .as > p {color: red;} .as의 자식인 p를 선택 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 하위 선택자 Descendant Selector .as p {color: red;} .as의 자식과 자손인 p를 선택 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
인접형제 선택자(Adjacent Sibling Selector) h1 + p {color: red;} h1의 첫번째 형제요소인 P를 선택 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 형제 선택자(Sibling Selector) h1 ~ p {color: red;} h1의 형제요소인 P를 모두 선택 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
속성 선택자(Attribute Selector) [attribute] [attribute="value"] [attribute~="value"] [attribute|="value"] [attribute^="value"] [attribute$="value"] [attribute*="value"] h1[title] title 속성을 가진 h1태그를 선택 Lorem Lorem Lorem h1[title=abc] title 속성값이 abc인 h1 태그를 선택 (속성값이 정확히 일치) Lorem Lorem Lorem h1[title~=abc] title 속성값이 abc를 포함하는 h1 태그를 선택(단어기준/공백포함한 단어제외) Lorem Lorem Lorem h1[title|=abc] title 속성값이 abc이거..
text-transform. text-transform: capitalize; /*시작하는 문자를 대문자로 변경*/ text-transform: uppercase;/*모든 문자를 대문자로 변경*/ text-transform: lowercase; /*모든 문자를 소문자로 변경*/ text-transform: none; text-transform: full-width; /*폰트중에서도 width 값이 full width이거나 normal width일때가 있는데 옆 속성을 이용하면, full width로 설정이 됩니다.*/ [출처] [css] text-transform 속성을 알아보자|작성자 찡이찡
first-child 와 first-of-child 차이 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 Document .case1 {width: 100px; float: left; padding: 20px; border:3px solid #ccc; margin-right: 20px;} .case2 {width: 100px; float: left; padding: 20px; border:3px solid #ccc;} .case1 p:first-of-type {color: red;} /*부모로 부터 시작되는 첫번째 p태그(형..