2021 년에 따라야 할 5 가지 프런트 엔드 트렌드
게시 됨: 2020-12-17웹에는 수많은 "따라야 할 디자인 트렌드"기사가 있습니다. 우리는 또한 2021 년에 따라야 할 Hot Web Design Trends에 우리의 스핀을 넣었습니다. 이러한 기사에 대한 초점은 매우 이해할 수 있습니다. 디자인 자체는 클라이언트와 방문자 모두에게 표시됩니다. 그러나 그 뒤에있는 코드는 대부분의 사용자와는 무관합니다.
하지만 관련성이 없어 보이지만 물론 매우 중요합니다. 깔끔한 코드, 최적화 된 접근 방식 및 새로운 기술을 통해 개발자는 확장 가능한 방식으로 아름다운 디자인을 제시 할 수 있습니다. 성능 은 사용자가 원하는 것이고 확장 성은 클라이언트가 원하는 것입니다.
따라서 모든 프론트 엔드 개발자를 존중하고 디자이너에게 통찰력과 아이디어를 제공하기 위해 "2021 년에 따라야 할 프론트 엔드 트렌드"목록을 작성했습니다.
1. CSS 사용자 정의 속성
이것은 CSS 사용자 정의 속성 (또는 CSS 변수라고도 함)이 한동안 사용 되었음에도 불구하고 개발자가 수년 동안 원했던 것입니다. 예를 들어, W3C 모듈 레벨 1은 2015 년의 것입니다.하지만 다른 신기술과 마찬가지로 관심을 끄는 데 시간이 걸립니다. 그리고 우리는 2021 년에 도입 이후 가장 큰 채택률을 보일 것이라고 믿습니다.
왜 멋진가요?
사용자 지정 속성은 실제로 CSS의 변수 입니다. "하지만 Sass에는 변수가 있지 않습니까?"라고 말할 수 있습니다. 응 우리는 그래! 하지만 Sass를 CSS로 컴파일하면 CSS를 얻게됩니다. 그리고 변수가 없습니다. 더 이상 해당 변수의 값을 변경할 수 없습니다. $primary: red 은 그냥 빨간색입니다.
사용자 지정 속성은 Internet Explorer를 제외한 모든 곳에서 잘 지원됩니다.
그러나 사용자 정의 속성에는 --primary: red 있습니다. 예를 들어 --primary 에서 파란색으로 재정의 할 수 있습니다. 브라우저에서 직접 컴파일 할 필요가 없습니다. 이러한 CSS 트릭에 대해 자세히 알아 보려면 CSS 변수와 전 처리기 변수의 차이점은 무엇입니까?
그것들을 사용하는 한 가지 깔끔한 해킹은 사용자 정의 테마입니다. 변수를 통해 HSL 값을 정의한 다음 사용자가 프런트 엔드의 슬라이더를 통해 색조를 변경하도록 허용 할 수 있습니다. "Set your color scheme"기능을 사용하여 JS 및 BAM을 사용하여 슬라이더 값을 CSS 변수에 연결합니다.
2. 가변 글꼴
CSS 사용자 정의 속성과 같은 가변 글꼴은 한동안 사용되었지만 여전히 널리 사용되지는 않습니다. 한 가지 이유는 그들이 더 인기를 가져야하는 시간, 개발자가 채택하기위한 튜토리얼 / 가이드 및 기술의 수와 필요한 글꼴 자체 때문입니다. 글꼴을 선택하고 변경 사항을 적용 할 수는 없습니다.
탐색하고 실험하는 데 사용할 수있는 웹 사이트 중 하나는 가변 글꼴입니다. 이 용어를 처음 듣는 경우 좋은 데모 역할도합니다. 가변 글꼴을 사용 하면 단일 파일 을 사용 하고 "font-weight" 또는 "font-style" 과 같은 속성을 적용 할 수 있으며 두께 또는 기울기를 완벽하게 제어 할 수 있습니다.
출처 : 웹의 가변 글꼴 소개
왜 멋진가요?
글쎄요, 그것은 우리, 개발자 (및 디자이너)에게 글꼴 모양에 거의 무한한 자유 를 제공한다는 것이 분명합니다. "font-weight: bold" 가 너무 많지만 "normal"이 너무 얇고 그 사이에 아무것도 없다고 생각한 적이 있습니까?
글꼴 디자이너는이를 잘 알고 있으며 종종 중간 속성을 제공합니다. 100 (가벼움) 또는 900 (매우 두꺼움)과 같은 숫자와 300, 400, 600, 700 등과 같은 그 사이의 숫자로 레이블을 지정합니다.하지만 750이 필요할 수도 있고 사용할 수 없습니까? 이제 가변 글꼴을 사용하면됩니다!
가변 글꼴에는 또 다른 큰 이점이 있습니다. 잘 알고 계시 겠지만 글꼴은 로드 시간에 큰 기여를합니다. 대역폭과 화면 렌더링 측면에서 모두. 다소 표준적인 요청은 다음과 같습니다.
-
headings-font-normal.woff2 -
headings-font-bold.woff2 -
body-normal.woff2 -
body-italic.woff2 -
body-bold.woff2
이 모든 장점으로 500kb를 쉽게 넘을 수 있습니다. 가변 글꼴을 사용하면 하나의 글꼴 만 있으면 다른 모든 변형을받을 수 있습니다. 하나의 요청.
더 자세한 내용은 Variable Fonts : Introduction to variable fonts on the web.
3. 더 많은 JavaScript!
이것은 "눈길을 끄는"제목이지만 사실입니다! 프런트 엔드 개발자는 "JS 개발자"일뿐만 아니라 "CSS / HTML"개발자이기도합니다. 그리고이 제목은 그들을위한 것입니다.
자바 스크립트는 단순한 트렌드가 아니지만, 누구에게 물어 보느냐에 따라“예, 요즘에는 JS를 사용하지 않으면 웹 사이트를 열 수도 없습니다.”또는 정보 페이지에 5MB 슬라이더 및 광고로드”.
그러나 얼마나 많은 긍정적이고 부정적인 측면이 있더라도 그 사용은 증가합니다. 그렇다면 어떤 JS 기반 기술 / 접근법 / 툴링이 더 많이 유행해야할까요?
- WordPress (headless)와 같은 CMS에 대한 프런트로 React / Vue
- WebGL (Three.js) 3D 그래픽, 시뮬레이션, 상호 작용
- VR 및 AR 콘텐츠
- 더욱 최적화 된 빌드 워크 플로 (webpack, gulp)
- 더 많은 제어 / 기능을위한 브라우저 API
더 깊이 파고 들어야하는 또 다른 큰 이유를 추가하려면 JS 만 있으면 원하는 거의 모든 크기의 프로젝트를 기술적으로 빌드 할 수 있습니다. JS 만 있으면 반응 형 프런트 엔드를 수행하고 일부 데이터 저장소에 연결하고 최상의 사용자 경험을 위해 브라우저의 API를 활용하고 프로젝트를 실시간으로 배포 할 수 있습니다. 설정에 대한 모든 조정은 설정에서 쉽게 수행 할 수 있습니다.
4. 유틸리티 기반 스타일링
유틸리티 기반 스타일링은 미리 정의 된 클래스를 통해 스타일을 적용하는 데 중점을 둡니다. 이것이 웹 페이지 스타일링이 일반적으로 의미하는 바입니다. 그러나 여기에서는 표준 접근 방식과 약간 다릅니다. 그림자, 배경 등으로 .card 스타일을 지정하지 않습니다. .shadow 및 .bg-light 및 .br-5 (예 : border-radius)로 HTML 요소의 스타일을 지정합니다.
빠르게 무언가를 출력해야하고 CSS에 대해 걱정하지 않는 JS 개발자에게 놀랍도록 잘 작동하는 접근 방식입니다.
이것은 전혀 새로운 것은 아니지만 Tailwind의 인기로 인해 개발자는 접근 방식을 재고하게되었습니다.
Tailwind 홈페이지
어떤 사람들은 CSS에서 구성 요소를 실제로 변경할 수없고 모든 곳에서 업데이트 할 수없는 "HTML로 CSS 작성"이라고 주장 할 수 있습니다. 기술적으로, 그 사실이지만, 당신의 구성 요소가 JS 파일에있는 경우는 한 곳에서 그들을 업데이트 마십시오, 예를 들어 / 뷰 응용 프로그램을 반응한다.
단점 중 하나는 다른 프레임 워크를 배워야한다는 것입니다. CSS 만있는 것이 아니라 일부 요소가 다음과 같이 보일 수 있으므로 속성을 기억해야합니다.
class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"
항상 그것을 좋아하고 싫어하는 사람들이 있지만 많은 문제에 대한 훌륭한 해결책입니다. 또한 실제로 시도하기 전까지는 그것이 당신에게 효과가 있는지 결코 알 수 없습니다 .
5. 새로운 CSS 기능
새로운 CSS 기능을 사용하는 것은 그 자체로 트렌드가 될 수 있습니다. 특정 기능이나 접근 방식에 대한 변경은 아니지만 지금까지 코딩 해 온 방식에 도전합니다. 프로? 그것은 많은 문제를 해결합니다. 나쁜가요? 하위 호환성.
그러나 지난 1 ~ 2 년 동안 브라우저 공급 업체의 발전 덕분에 (마이크로 소프트를 바라보며) 전 세계 대부분의 사용자가 그 어느 때보 다 효율적으로 웹에 액세스 할 수 있습니다.
다가오는 또 다른 기능으로 CSS Shadow Parts
CSS 사용자 정의 속성은 이러한 기능 중 하나이지만 약 5 년 (매우 중요한) 자체 섹션이 있습니다.
쓰기 모드
너무 자주 사용하지는 않지만 많은 개발자가 오른쪽에서 왼쪽으로 쓰는 언어를 지원할 필요가 거의 없기 때문에 쓰기 모드가 존재합니다. 대시 보드 / 프레임 워크 및 다국어 사이트에 필수입니다. 예를 들어 margin-inline-start와 같은 방향 쓰기 속성에 대한 지원이 증가했기 때문에 RTL에 대해 margin-left를 margin-right로 덮어 쓸 필요가 없습니다.
CSS 서브 그리드
우리는 플렉스가 있었고 그리드가있었습니다. 이제 그리드 내부에 그리드가 있습니다. Subgrids는 Grid가 처음 지원되었을 때 개발자가 즉시 사용할 수있을 것으로 예상되는 것입니다. 글쎄, 이제 우리는 그것을 가지고 있으며 그것은 소리만큼 멋지고 유용합니다. 명예로운 언급 : Flexbox 간격 (그리드의 일부이기도 함). 그것은 그것이 말하는 것을한다. 안타깝게도 아직 잘 지원되지 않습니다.
:is
MDN에서 가져온 코드 조각으로 가장 잘 설명되는 속기 선택기 :
/ * 머리글 안에있는 모든 단락을 선택합니다.
또는 마우스로 가리키고있는 바닥 글 요소 * /
: is (머리글, 기본, 바닥 글) p : hover {
색상 : 빨간색;
커서 : 포인터;
} / * 위의 내용은 다음과 같습니다. * /
헤더 p : hover,
메인 p : hover,
footer p : hover {
색상 : 빨간색;
커서 : 포인터;
}