- CSS @import 사용을 피하세요
- @import선언을 찾기 위해 이 선언이 포함된 CSS파일을 먼저 다운로드해야 하기 때문에 Request chain이 발생하여 처음 렌더링 시간을 지연 시킵니다.
- <link rel="stylesheet"> 방법으로 대체할 수 있습니다.
- CSS 전처리기(SASS, LESS등)를 사용한다면 @import구문을 사용할 때 별개의 더 모듈화된 소스파일을 허용하므로 Request Chain 패널티를 방지합니다.
- 자식요소에서 current color 속성을 사용해서 코드 반복을 줄이고 유지보수성을 높일 수 있습니다.
This is a child element. This is a grandchild element.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.parent {
color: blue;
}
.child {
border: 1px solid currentColor;
}
.grandchild {
text-decoration: underline;
background-image: linear-gradient(90deg, currentColor, #fff);
}
</style>
</head>
<body>
<div class="parent">
<p class="child">
This is a child element.
<span class="grandchild">This is a grandchild element.</span>
</p>
</div>
</body>
</html>3. clip-path 속성을 활용해서 css로 도형을 그릴 수 있습니다.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); //삼각형4. 스크롤 팁
- css에 scroll-behavior: smooth;를 적용하면 스크롤 시 애니메이션 효과가 나타납니다.
- 브라우저에서는 #로 id를 지정하면 해당 위치로 스크롤이 이동합니다.
- <a href="#some-place">Some Place</a>
- js에서 window.scrollTo({ top: 500, behavior: 'smooth' }) 처럼 옵션을 추가하면 부드러운 스크롤링을 구현할 수 있습니다.
- js에서 history.scrollRestoration = 'auto'; 로 지정하면 페이지 이동 후 이전 스크롤 위치로 자동 복원됩니다.
5. 순서 li 태그에 counter를 활용해 스타일 입히기
- a
- b
- c
- d
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style-type: none;
counter-reset: ol-counter;
}
li {
counter-increment: ol-counter;
}
li::before {
color: red;
font-size: 20px;
content: counter(ol-counter);
}
</style>
</head>
<body>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
</body>
</html>
반응형
'Tips' 카테고리의 다른 글
| 프론트엔드 개발 팁 모음 CSS(2) (0) | 2024.04.25 |
|---|---|
| 프론트엔드 개발 팁 모음 HTML(2) (0) | 2024.04.25 |
| 프론트엔드 개발 팁 모음 HTML(1) (0) | 2024.04.25 |
| 티스토리에 마크다운 스타일 게시물 작성하기 (4) | 2018.09.12 |
| 프로그래밍 인터넷 강의 사이트 추천 (3) | 2018.07.09 |