2019년을 위한 7가지 놀라운 새로운 CSS 기술

게시 됨: 2019-05-01

지금이 직업 옵션으로 웹 개발을 선택하기에 적기입니다. 웹 디자이너와 마찬가지로 웹 개발자도 새로운 CSS 기술을 시도하고 CSS가 할 수 있는 일의 한계를 뛰어넘는 방법에 매료되었습니다.

여기에서는 창의적인 디자인에 적용되고 있는 몇 가지 새로운 CSS 기술과 전체 사양을 살펴보겠습니다. 잘 설명된 CSS로 디자인의 거의 모든 측면을 제어할 수 있습니다. 또한 보다 깨끗하고 일관된 코드로 전반적인 사용자 경험을 향상시킬 수 있습니다.

1. 이니셜

Initial letter는 CSS 속성으로 요소의 첫 글자를 선택하고 해당 글자가 차지하는 줄 수를 지정하는 속성입니다. 대부분 인쇄 매체 및 정보 사이트, 뉴스 사이트에서 사용되며 단락의 첫 글자가 나머지 콘텐츠보다 훨씬 높습니다.

initial-letter 속성은 스타일화된 단락 시작표시문자를 만드는 데 필요한 줄 수와 글꼴 크기를 모두 자동으로 조정합니다. 이니셜은 다음 값을 승인합니다.

<숫자>는 음수 값이 허용되지 않는 문자가 차지하는 행 수를 나타냅니다.
normal은 캐스케이드에서 상속될 수 있고 첫 번째 문자에 스케일링 효과가 적용되지 않은 경우 값을 재설정하려는 경우에 유용합니다.
<integer>는 크기가 미리 설정되어 있을 때 글자가 가라앉아야 하는 줄 수를 결정합니다. 값은 0보다 커야 하며 값을 지정하지 않으면 크기 값이 중복되어 가장 가까운 양의 정수로 내림됩니다.

::first-letter pseudo-element 는 초기 문자로 서식이 지정될 문자를 선택하는 데 사용할 수 있습니다. ::first-letter pseudo-element 는 display: inline이 있는 요소의 첫 번째 문자를 선택하지 않고 표시 값이 block, table-cell, table-caption 또는 list-item인 요소에서만 작동합니다. .

[xhtml]
<!DOCTYPE HTML>
<html>
<머리>
<스타일>
피 {
글꼴 패밀리: Serif;
글꼴 크기: 20px;
여백 하단: -15px;
}
h1 {
글꼴 패밀리: Sans-serif;
글꼴 크기: 3.1em;
검정색;
}
신체 {
패딩: 10px;
}
div {
너비: 550px;
줄 높이: 25px;
}
p:first-of-type:first-letter {
배경색: 검정;
색상: 흰색;
왼쪽으로 뜨다;
글꼴 크기: 50px;
오른쪽 여백: 10px;
여백 상단: 7px;
패딩: 18px;
상자 그림자: 0 0 10px -2px 검정;
}
</스타일>
</head>
<본체>
<h1>이니셜 소개</h1>
<div>
<p>온 힘과 정성을 다해 일에 몰두하는 사람만이 진정한 주인이 될 수 있다. 이러한 이유로 숙달은 모든 사람에게 요구됩니다."</p>
<p>"인간과 인간의 운명에 대한 관심은 항상 모든 기술적 노력의 주요 관심을 형성해야 합니다. 다이어그램과 방정식의 한가운데에서 이것을 잊지 마십시오"</p>
</div>
</바디>
</html>
[/xhtml]

Initial letter

2. 가변 글꼴

가변 글꼴은 OpenType 사양의 일부로 정의된 새로운 기능 집합을 나타내며 글꼴 파일이 가변 글꼴이라고 하는 단일 파일에 글꼴의 여러 변형을 포함할 수 있도록 합니다. 실제로는 @ font-face 참조 하나만으로 글꼴 파일에 포함된 변수에 액세스할 수 있습니다. 또한 가변 글꼴을 사용하면 글꼴 스타일 전환, 사용자 정의 글꼴 스타일 및 애니메이션과 같은 기능을 사용할 수 있습니다. 가변 글꼴을 사용하면 사용 가능한 모든 스타일, 두께 및 너비에 액세스할 수 있다는 이점이 있습니다.

가변 글꼴은 변형 축을 통해 변형을 정의하며 5개의 표준 축이 있습니다.

ital: 기울임꼴 축은 활성화 또는 비활성화되어 있기 때문에 다르게 작동합니다. 그 사이에는 아무 것도 없습니다. font-style CSS 속성을 사용하여 값을 설정할 수 있습니다. 또한 font-synthesis: none을 도입하여 브라우저에서 실수로 변형 축과 합성 기울임꼴을 적용하는 것을 방지합니다.
wght: 글꼴의 두께를 제어하고 font-weight CSS 속성을 사용하여 값을 설정할 수 있습니다.
wdth: 글꼴의 너비를 제어하고 font-width CSS 속성을 사용하여 값을 설정할 수 있습니다. font-stretch 속성을 사용하는 CSS에서 글꼴 너비를 백분율 값으로 설정할 수 있으며 글꼴 외부에 있는 값을 제공하면 인코딩된 도메인에서 브라우저는 글꼴을 가장 가까운 허용 값으로 만듭니다.
opsz: 광학적 크기 조정은 글꼴의 광학적 크기를 변경하는 관행을 말하며 값은 CSS font-optical-sizing을 사용하여 설정할 수 있습니다. 광학적 크기 값은 글꼴 크기에 따라 자동으로 적용되지만 font-variation을 사용하여 조작할 수 있습니다. -settings. font-optical-sizing을 사용할 때 허용되는 값은 auto 또는 none이며, font-variation-settings를 사용할 때 숫자 값이 제공됩니다.
slnt: 글꼴의 기울기를 조절하며 font-style CSS 속성을 사용하여 값을 설정할 수 있습니다. 숫자 범위로 표현되어 가변적이며, 이를 통해 해당 축을 따라 글꼴이 어디에서나 변경될 수 있습니다.

@font-face와 함께 가변 글꼴 사용 – 웹에서 가변 글꼴을 사용하는 경우 가변 글꼴 파일을 나타내는 @ font-face 규칙을 정의해야 합니다. 다음은 가변 글꼴을 찾을 수 있는 2개의 링크입니다. axis-praxis.org 및 v -fonts.com.

[xhtml]
<!DOCTYPE HTML>
<html>
<머리>
<title>가변 글꼴 정보</title>
</head>
<스타일>
@글꼴 얼굴 {
font-family: 'Avenir 다음 변수';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
HTML {
font-family: 'Avenir 다음 변수', sans-serif;
}
피 {
글꼴 변형 설정: 'wght' 630, 'wdth' 88;
}
</스타일>
<본체>
<h1>가변 글꼴 정보</h1>
<h2>가변 글꼴 정보</h2>
<p>
"어떤 똑똑한 바보라도 일을 더 크고 복잡하게 만들 수 있습니다. 천재의 손길이 필요하고 반대 방향으로 움직이려면 많은 용기가 필요합니다."
</p>
</바디>
</html>
[/xhtml]

Variablefonts

3. 논리적 속성 및 값

논리적 속성 및 값은 논리적 방향 및 차원 매핑을 통해 모양을 제어할 수 있도록 하는 논리적 속성 및 값을 소개하는 CSS 모듈입니다. 논리적 속성 및 값은 블록 및 인라인과 같은 용어를 사용하여 흐름 방향을 설명합니다.The 논리적 속성 및 값 사양은 논리적 관계에서 물리적 값에 대한 매핑을 특성화합니다.

인라인 치수 - 사용된 쓰기 유형으로 텍스트 줄이 작성되는 치수입니다. 따라서 임의의 영어 문서에서는 텍스트가 가로로, 왼쪽에서 오른쪽으로, 다른 아랍어 문서에서는 쓰기도 가로로 되어 있지만 오른쪽에서 왼쪽으로, 일본어 문서를 고려하면 인라인 치수가 세로로 되어 있기 때문입니다. 쓰기 모드는 세로로 실행됩니다.

블록 차원 – 페이지에 블록이 표시되는 순서에 해당합니다. 영어와 아랍어에서는 세로로 실행되지만 세로 쓰기 모드에서는 가로로 실행됩니다.

[xhtml]
<!DOCTYPE HTML>
<html>
<머리>
<스타일>
HTML {
글꼴: 20px 산세리프;
}
신체 {
패딩: 25px;
배경색: 밝은 노란색;
검정색;
}
.상자 {
테두리: 4px 단색 검정;
테두리 반경: 20px;
패딩: 20px;
여백: 12px;
}
.하나 {
블록 크기: 100px;
인라인 크기: 200px;
}
.둘 {
높이: 100px;
너비: 200px;
}
</스타일>
</head>
<본체>
</div>
<div id="컨테이너">
<div class="box one">
내 블록 크기는 100픽셀이고 인라인 크기는 200픽셀입니다.
</div>
<div class="박스 2">
내 높이는 100픽셀이고 너비는 200픽셀입니다.
</div>
</div>
</바디>
</html>
[/xhtml]

Logical properties and values

4. 스크롤 스냅

scroll-snap-type CSS 속성은 첨부 지점이 스크롤 컨테이너에 적용되는 강성을 결정합니다. 즉, 사용자가 스크롤을 완료한 후 뷰포트를 특정 요소 또는 위치로 잠급니다. 이미지 갤러리를 표시하는 훌륭한 방법입니다. .이전에는 JavaScript와 함께 사용할 수 있었지만 새로운 CSS Scroll Snap 모듈 덕분에 CSS에서 효과를 제어할 수 있습니다. 컨테이너 내에 정의된 규칙.Scroll-snap-type 속성은 컨테이너 요소에 적용되는 가장 중요한 속성입니다. 스크롤 스냅 축 x, y, 블록, 인라인 또는 둘 다를 정의하고 스크롤 스냅 엄격도 없음, 근접 또는 필수를 정의합니다.

[xhtml]
<!DOCTYPE HTML>
<html>
<머리>
<스타일>
HTML, 본문, .C {
높이: 50%;
}
.씨 {
디스플레이: 플렉스;
항목 정렬: 가운데;
justify-content: 사이의 공백;
flex-flow: 컬럼 nowrap;
글꼴 패밀리: arial;
}
.컨테이너 {
디스플레이: 플렉스;
플렉스: 없음;
오버플로: 자동
}
.container.x {
너비: 70%;
높이: 150px;
flex-flow: row nowrap;
}
.container.y {
너비: 256px;
높이: 256px;
flex-flow: 컬럼 nowrap;
}
.y.mandatory-scroll-snapping {
스크롤 스냅 유형: y 필수;
}
.x.proximity-scroll-snapping {
스크롤 스냅 유형: x 근접성;
}
.container > div {
텍스트 정렬: 가운데;
스크롤 스냅 정렬: 중앙;
플렉스: 없음;
}
.x.container> div {
줄 높이: 128px;
글꼴 크기: 64px;
너비: 100%;
높이: 128px;
}
.y.container> div {
줄 높이: 256px;
글꼴 크기: 128px;
너비: 256px;
높이: 256px;
}
.y.container>div:{
줄 높이: 1.4;
글꼴 크기: 80px;
}
.container >div:{
배경색: 흰색;
}
.container >div:{
배경색: 흰색;
}
</스타일>
</head>
<본체>
<div 클래스=".C">
<div class="컨테이너 x 필수 스크롤 스냅" dir="ltr">
<div>스크롤 스냅</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="컨테이너 y 필수 스크롤 스냅" dir="ltr">
<div>Scropp 스냅 정보</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</바디>
</html>
[/xhtml]

Scroll snapping

5. 그리드 레벨 2 및 하위 그리드

레벨 2 사양에는 레벨 1의 모든 것과 몇 가지 새로운 기능이 포함되어 있습니다. 그리드 사양의 레벨 2는 CSS 그리드의 서브그리드 기능을 생성합니다. 다음 줄에서는 현재 에디터의 그리드 레벨 2 초안에 자세히 설명되어 있는 서브그리드 기능을 살펴보겠습니다. 그리드 레이아웃 옵션, 그리드 요소는 display: grid를 설정하여 그리드 컨테이너로 변환할 수 있습니다. 아래 예에서 그리드의 3개의 열 트랙을 포함하는 항목이 있고 3개의 열 트랙이 있는 컨테이너 그리드이며, 이들은 부모의 트랙과 일치하지 않습니다.

[xhtml]
<!DOCTYPE HTML>
<html>
<머리>
<title>CSS 그리드 레벨 2 – 하위 그리드</title>
</head>
<스타일>
신체 {
여백: 20px;
}
.하나 {
배경색: 검정;
색상: 흰색;
테두리 반경: 20px;
패딩: 20px;
글꼴 크기: 120%;
}
.일 {
배경색: 밝은 회색;
}
.그리드 {
디스플레이: 그리드;
격자 간격: 10px;
그리드 템플릿 열: 3fr 1.5fr 2fr 1fr 1fr 2fr;
배경색: 흰색;
검정색;
여백: 1.5em 0;
}
.ㅏ {
패딩: 0;
격자 간격: 15px;
그리드 열: 자동 / 스팬 4;
디스플레이: 그리드;
그리드 템플릿 열: 3fr 1.5fr 1.5fr;
}
</스타일>
<본체>
<div 클래스="그리드">
<div class="one 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="one A">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</바디>
</html>
[/xhtml]

Grid level 2 and subgrid

오픈 소스 프로젝트이기 때문에 GitHub에서 CSS 그룹에서 작업이 어떻게 발전하는지 볼 수 있습니다. 브라우저 사양 개발 및 구현은 순환 프로세스입니다. 따라서 이 서브그리드 기능이 어떻게 진행되고 있으며 새롭게 등장하는 브라우저 구현을 볼 수 있습니다.

6. CSS를 사용하여 브라우저 지원 테스트

CSS는 새로운 기능에 대한 브라우저 지원을 테스트하는 방법을 개발했습니다. 기본적으로 브라우저가 특정 CSS 기능을 허용하는지 알아보기 위해 질문을 하십시오. 이렇게 하면 새 기능을 안전하고 간결하게 사용할 수 있습니다. 새 CSS 기능을 사용할 때 브라우저가 해당 기능을 지원하는지 확인해야 합니다. 이 줄에서 caniuse.com의 데이터를 참조하는 것이 좋습니다. 여기서 위치에 대한 데이터를 가져올 수 있습니다.

Use CSS to test browser support

@supports CSS를 사용하면 CSS 기능에 대한 브라우저 지원에 의존하는 선언을 지정할 수 있습니다. 이를 기능 쿼리라고 합니다. 이 규칙은 코드의 맨 위에 작성되거나 다른 조건부 그룹 at-rule 내부에 중첩될 수 있습니다.

[css]
@supports (디스플레이: 그리드) {
div {
디스플레이: 그리드;
}
}
[/css]

7. 미디어 쿼리 구문 개선 – 레벨 4

미디어 쿼리 레벨 4 사양에는 높이 및 너비와 같은 범위 유형이 있는 기능을 사용하여 미디어 쿼리를 만드는 구문에 대한 몇 가지 개선 사항이 포함되어 있습니다.

예를 들어 너비에 최대 기능을 사용합니다.

[css]
@media(최대 너비: 20em)
[/css]

최소값과 최대값을 사용하여 두 임의 값 사이의 너비를 시도할 수 있습니다.

[css]
@media(최소 너비: 20em) 및 (최대 너비: 35em)
[/css]

더 나은 이해를 위해 위의 예에서 너비가 20em보다 크거나 같고 35em보다 작거나 같다고 말하고 싶습니다.

결론

웹사이트 개발자는 새로운 CSS 기술을 알고 향후 프로젝트에 적용해야 합니다. 그들은 작업 수준을 높이고 고객은 향상된 웹 사이트 모양에 만족할 것입니다.