/* 10번 부터 이후 모든 box 배경색 변경 */ .box:nth-child(n+10) {background: #000;} /* 7의배수 box 배경색 변경 (7,14,21 ...) */ .box:nth-child(7n){background: #f00;} /* 1번째 부터 4번째 까지 box 배경색 변경 */ .box:nth-child(-n+5) {background:#ff0;} /* 10번째 부터 14번째 까지 box 배경색 변경 */ .box:nth-child(n+10):nth-child(-n+14) {background: #f0f;} /* 마지막에서 부터 4번째 box 배경색 변경 */ .box:nth-last-child(4) {background: #ddd;} /* nth-last-child(..
한줄일 경우 처리 하단 코드로 처리 .text{ white-space:nowrap; overflow: hidden; text-overflow: ellipsis; } 두줄 이상(문장)으로 처리하려면 하단 코드로 처리 * IE는 지원하지 않으니 height값을 넣어주어야 합니다. .text{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2 /* IE는 height값 추가*/ height:80px }
아이프레임(iframe) 반응형으로 제작하는 방법 .video_wrap > iframe .video_wrap{ position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%; padding-top: 30px; } .video_wrap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }