잘 알려지지 않은 CSS 팁
See the Pen Vertical padding by Peedu Tuisk (@matude) on CodePen.
See the Pen Margins overlap by Peedu Tuisk (@matude) on CodePen.
위의 경우 마진이 40px이 아닌 20px로 축소됩니다.
그러나 예외가 있습니다! 마진은 다음과 같은 경우 축소되지 않습니다.
* float 요소
* absolute 된 요소
* inline-block 요소
* overflow가 있는 요소
* 삭제된 요소
* 루트 요소
3. opacity 속성으로 z-index 스택 순서를 변경할 수 있습니다.
See the Pen Z-index order and opacity by Peedu Tuisk (@matude) on CodePen.
4. css 커스텀 속성과 변수
SASS 또는 LESS를 사용하면 CSS 사용자 지정 속성과 변수가 해당 전처리기에서 사용할 수있는 기능과 동일하다는 것을 알 수 있지만 살펴볼 가치가있는 주요 차이점이 있습니다.
1 2 3 4 5 6 7 | // you can set and use custom properties like such: :root { --foo: #000; } button { background-color: var(--foo); //background is black } | cs |
또한 상속받을 수 있기 때문에 로컬 변수를 재 할당하면 모든 자식 요소에 영향을 미치며 전처리기와 달리 브라우저는 실제로 해당되는 경우 모든 변수와 표현식을 다시 계산합니다.
폴백은 쉼표로 사용할 수 있습니다. 쉼표 뒤에 여러 개의 폴백을 쌓거나 다른 변수를 쌓을 수도 있습니다.
1 2 3 | .foo { color: var(—-my-var, 'blue'); } | cs |
1 2 3 4 5 6 7 8 9 | ::root { --default-color: #000000; } header { --primary-color: #ff0000; } a { color: var(--primary-color, --default-color); } | cs |
1 2 3 4 | // get variable from inline style element.style.getPropertyValue("—-my-var"); // set variable on inline style element.style.setProperty("--my-var", jsVar + 4); | cs |
1 2 3 4 5 | <html> <body> <div style=”height:100%;background:red;”></div> </body> </html> | cs |
1 2 3 4 | // target all zip files, case insensitive a[href$=".zip" i] { } // make google.com links red [href*="google.com"] { color: red; } | cs |
1 2 3 4 5 6 | img:not([alt]) { border: 2px dashed red; } img[alt=""] { border: 2px dashed red; } | cs |
See the Pen jZXXjZ by Peedu Tuisk (@matude) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 | @keyframes foo { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes bar { 0% { transform: translateX(-100px); } 100% { transform: translateX(0px); } } .element { animation: foo 2s 0s, bar 1s 0s; } | cs |
See the Pen Hash target pseudo-class highlighting in CSS by Peedu Tuisk (@matude) on CodePen.
See the Pen LQMMGX by Peedu Tuisk (@matude) on CodePen.
1 2 3 4 5 6 | <div style="--background-image: url('http://via.placeholder.com/150x150');"></div> div:after { content: ''; background-image: var(--background-image); } | cs |
See the Pen CSS counter-increment property by Peedu Tuisk (@matude) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 | h1 { font-weight: bold; font-style: italic; font-size: 1rem; //etc… } // vs h1 { font: italic lighter 1rem/150% Verdana, Helvetica, sans-serif; } // syntax // font: font-style font-variant font-weight font-size/line-height font-family; | cs |
1 2 3 4 5 | @supports (display: flex) { div { display: flex; } } | cs |
1 2 | <div class="justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around"> <button class=”bg-blue hover:bg-blue-dark text-white hover:text-blue-light”>Button</button> | cs |
1 | .sm\:justify-center { } | cs |
1 2 3 4 5 6 | <div id="example-paragraphs"> <p>Fernstraßenbauprivatfinanzierungsgesetz</p> <p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p> <p>Fernstraßen­bau­privat­finanzierungs­gesetz</p> </div> | cs |
'CSS' 카테고리의 다른 글
| [Reflow] Reflow 최소화 (0) | 2019.01.29 |
|---|---|
| Will-Change (0) | 2019.01.22 |
| [GRID] CSS Grid의 인터넷 익스플로러(IE) 지원 (0) | 2018.09.18 |
| [ Animation ] CSS Animation vs Javascript Animation (0) | 2018.07.24 |
| CSSOM + 렌더링 (0) | 2018.04.16 |
댓글