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인 요소에서만 작동합니다. .

<!DOCTYPE html>
<html>
<head>
<style>
p {
 font-family: Serif;
 font-size: 20px;
 margin-bottom: -15px;
}
h1 {
 font-family: Sans-serif;
 font-size: 3.1em;
 color: black;
}
body {
 padding: 10px;
}
div {
 width: 550px;
 line-height: 25px;
}
p:first-of-type:first-letter {
 background-color: black;
 color: white;
 float: left;
 font-size: 50px;
 margin-right: 10px;
 margin-top: 7px;
 padding: 18px;
 box-shadow: 0 0 10px -2px black;
}
</style>
</head>
<body>
<h1>About initial letter</h1>
<div>
<p>Only one who devotes himself to a cause with his whole strength and soul can be a true master. For this reason mastery demands all of a person"</p>
<p>"Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equation"</p>
</div>
</body>
</html>

Initial letter

2. 가변 글꼴

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

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

기울임꼴: 기울임꼴 축은 활성화 또는 비활성화되어 있기 때문에 다르게 작동합니다. 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.

<!DOCTYPE html>
<html>
<head>
<title>About variable fonts</title>
</head>
<style>
@font-face {
  font-family: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
  font-family: 'Avenir Next Variable', sans-serif;
}
p {
  font-variation-settings: 'wght' 630, 'wdth' 88;
}
</style>
<body>
<h1>About variable fonts</h1>
<h2>About variable fonts</h2>
<p>
	"Any intelligent fool can make things bigger and more complex… It takes a touch of genius – and a lot of courage to move in the opposite direction."
</p>
</body>
</html>

Variablefonts

3. 논리적 속성 및 값

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
html {
  font: 20px Sans-serif;
}
body {
  padding: 25px;
  background-color: lightyellow;
  color: black;
}
.box {
  border: 4px solid black;
  border-radius: 20px;
  padding: 20px;
  margin: 12px;
}
.one {
  block-size: 100px;
  inline-size: 200px;
}
.two {
  height: 100px;
  width: 200px;
}
</style>
</head>
<body>
</div>
<div id="container">
<div class="box one">
  My block-size is 100 pixels, my inline-size 200px.
</div>
<div class="box two">
  My height is 100 pixels, my width 200px.
</div>
</div>
</body>
</html>

Logical properties and values

4. 스크롤 스냅

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

<!DOCTYPE html>
<html>
<head>
<style>
html, body, .C {
  height: 50%;
}
.C {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: arial;
}
.container {
  display: flex;
  flex: none;
  overflow: auto
}
.container.x {
  width: 70%;
  height: 150px;
  flex-flow: row nowrap;
}
.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}
.x.container> div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}
.y.container> div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
.y.container>div:{
  line-height: 1.4;
  font-size: 80px;
}
.container >div:{
  background-color: white;
}
.container >div:{
  background-color: white;
}
</style>
</head>
<body>
<div class=".C">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>Scroll Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>About Scropp Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>

Scroll snapping

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

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

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Level 2 - subgrid</title>
</head>
<style>
body {
  margin: 20px;
}
.one {
  background-color: black;
  color: white;
  border-radius: 20px;
  padding: 20px;
  font-size: 120%;
}
.A .one {
  background-color: lightgrey;
}
.GRID {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3fr 1.5fr 2fr 1fr 1fr 2fr;
  background-color: white;
  color: black;
  margin: 1.5em 0;
}
.A {
  padding: 0;
  grid-gap: 15px;
  grid-column: auto / span 4;
  display: grid;
  grid-template-columns: 3fr 1.5fr 1.5fr;
}
</style>
<body>
<div class="GRID">
<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>
</body>
</html>

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 내부에 중첩될 수 있습니다.

@supports (display: grid) {
  div {
    display: grid;
  }
}

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

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

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

@media (max-width: 20em)

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

@media (min-width: 20em) and (max-width: 35em)

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

결론

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