Post

Tips CSS(2)

Posted
By SungNam Kim 2 min read

1. CSS @import 사용을 피하세요

  • @import선언을 찾기 위해 이 선언이 포함된 CSS파일을 먼저 다운로드해야 하기 때문에 Request chain이 발생하여 처음 렌더링 시간을 지연 시킵니다.
  • <link rel="stylesheet"> 방법으로 대체할 수 있습니다.
  • CSS 전처리기(SASS, LESS등)를 사용한다면 @import구문을 사용할 때 별개의 더 모듈화된 소스파일을 허용하므로 Request Chain 패널티를 방지합니다.

2. 자식요소에서 current color 속성을 사용해서 코드 반복을 줄이고 유지보수성을 높일 수 있습니다.

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

<!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로 도형을 그릴 수 있습니다.

1

clip-path: polygon(50% 0%, 0% 100%, 100% 100%); //삼각형

4. 스크롤 팁

  • css에 scroll-behavior: smooth;를 적용하면 스크롤 시 애니메이션 효과가 나타납니다.

  • 브라우저에서는 #로 id를 지정하면 해당 위치로 스크롤이 이동합니다.

    1

    <a href="#some-place">Some Place</a>
  • js에서 window.scrollTo({ top: 500, behavior: 'smooth' }) 처럼 옵션을 추가하면 부드러운 스크롤링을 구현할 수 있습니다.
  • js에서 history.scrollRestoration = 'auto'; 로 지정하면 페이지 이동 후 이전 스크롤 위치로 자동 복원됩니다.

5. 순서 li 태그에 counter를 활용해 스타일 입히기

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

<!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>
CSS, Tips
web css tip
This post is licensed under CC BY 4.0 by the author.