CSS를 배우는 것은 평생의 여정입니다. 매일 새로운 기능이 등장합니다. 그렇긴 하지만, 매우 유용함에도 불구하고 거의 사용되지 않는 기능이 꽤 많이 있습니다. 이 기사는 기술을 한 단계 끌어올리거나 워크플로를 단순화할 수 있는 5가지 멋진 CSS 트릭을 간략하게 편집한 것입니다.

1. CSS 변수

변수는 코드를 DRY(반복하지 않음) 상태로 유지하는 데 크게 도움이 됩니다. 스타일시트에서 변수의 힘을 활용하기 위해 SCSS가 필요하지 않으며, 바닐라 CSS도 이를 지원합니다. CSS에서 변수를 만드는 구문은 다음과 같습니다.

:root {
    --variable-name: value;
}

값은 10px , 20rem , #ffffff , box-shadow: 0px 0px 0px 0px rgb(0,0,0) 등을 저장할 수 있으며 모든 CSS 선택기와 함께 사용할 수 있지만 :root 에서 변수를 선언하는 것이 관례입니다.
padding , color , background 등과 같은 매개변수와 함께 변수를 사용할 수 있습니다.

.selector {
    <param>: var(--variable-name);
}

변수를 사용하여 아래와 같은 멋진 효과를 쉽게 만들 수 있습니다.

2. 클립 경로

clip path 속성을 사용하면 웹사이트에서 멋진 모양을 만들 수 있습니다. clip path 중 A simple example 용법은 아래와 같습니다.



CSS에서 clip-path 구문은 다음과 같습니다.

.selector {
    clip-path: <path>;
}

Clippy을 사용하여 단순clip paths을 생성하거나 다음과 같은 고급 모양에 대한 사용자 정의clip paths를 개발할 수 있습니다.



참고: 이 펜은 Jon Kantner에 의해 개발되었습니다.

3. 텍스트 줄임표

오버플로 텍스트가 웹사이트에 어떻게 표시되는지 처리하고 싶은 경우가 종종 있는데, text-overflow 속성은 이러한 상황에서 갈 수 있는 방법입니다. text-overflow는 오버플로 된 텍스트가 어떻게 나타나는지 처리하기 때문에 텍스트 오버플로를 강제로 수행하는 전제 조건이 있습니다.

/* Pre-requisite */
overflow: hidden;
white-space: nowrap;

추가 시text-overflow: ellipsis; 넘친 텍스트가 잘리고 텍스트 끝에 '...'가 나타납니다.

4. 커스텀 커서

CSS에는 이미 cursor: <cursor name> 와 함께 사용할 수 있는 과다한 커서가 있습니다. 대부분의 사람들이 모르는 것은 다음을 사용하여 이미지에서 자신만의 커서를 만들 수 있다는 것입니다.

cursor: url("<link to image>"), auto;

참고: 커서는 모바일 장치에서 볼 수 없습니다.



참고: 이 펜은 Geoff Graham에 의해 개발되었습니다.

5. 배경 이미지 자동 크기 조정

초보자로서 배경 이미지를 처리하는 데 많은 어려움을 겪었습니다. CSS가 배경 이미지 크기 조정을 처리하도록 하는 간단한 방법이 있습니다.

background-size: cover;

결론

이 기사에서는 친구들 앞에서 자신을 과시하고 기술을 한 단계 끌어올리기 위한 몇 가지 고급 트릭을 배웠습니다. 계속 배우고 연습하면 분명 뛰어난 개발자가 될 것입니다 ;)

읽어 주셔서 감사합니다

함께 일하고 싶으세요? Upwork로 저에게 연락하십시오

내가 작업하고 있는 것을 보고 싶습니까? 내 GitHub를 확인

저는 2022년 중반에 디지털 노마드로 시작하는 프리랜서입니다. 여행을 잡고 싶습니까? 나를 따라와

내 블로그를 팔로우하여 매주 새로운 정보를 확인하세요.

다음에서 나에게 연결:

Portfolio

Upwork

GitHub