프론트 개발의 시간을 덜어주는 유용한 HTML/CSS (Part 1)

 

웹을 구현함에 있어서 HTML과 CSS는 절대로 빠질 수 없는 부분입니다. 더욱이 CSS의 기능은 이전처럼 디자인 꾸밈 기능만 담당하던 시절과는 다르게 그 기능이 점점 강력해지고 있으며 JS로만 구현이 가능하던 기능들까지도 일부 기능들은 HTML과 CSS로만 구현이 가능하게 되어가고 있습니다. 

 

대분분의 프론트 개발을 하는 많은 분들이 자바스크립트와 React(난 사실 라이브러리🤣), Vue와 같은 프레임워크만을 중요하다고 생각하고 기본이 되는 HTML, CSS는 가볍게 생각을 하는 부분이 있습니다. 

 

하지만 오늘 알아볼 기능들을 살펴보게 되면 HTML, CSS의 기능에 놀라게 될 거라 생각합니다. 

 

💡 @supports

CSS3를 적용하려다 보면 브라우저마다 지원하는 스펙이 달라서 우리는 해당 브라우저에서 그 기능이 구현이 되는지 확인을 하고 브라우저가 지원하지 않으면 다른 방법을 통해 구현을 해야 하는데 @supports 기능을 사용하게 되면 지원하는 브라우저 체크가 가능하고 지원할 경우, 지원하지 않을 경우와 같이 분기가 필요한 경우에도 각각 적용할 수 있기 때문에 좀 더 유연하게 코드를 작성할 수 있습니다.

 

✅ Default : 유효하다고 여길 때 통과합니다

- 예시: 브라우저가 display:grid를 지원하다면

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

사용자 정의 부분도 조건으로 가능합니다.

@supports (--foo: green) {
  body {
    color: var(--varName);
  }
}

@supports (animation-name: test) {
    … /* 애니메이션 속성을 접두사 없이 사용할 수 있을 때 CSS 적용 */
    @keyframes { /* 다른 @-규칙을 중첩 가능 */
      …
    }
}

 

✅ not 연산자 : 유효하지 않다고 여길 때 통과합니다.

- 예시: 브라우저가 display:grid를 지원하지 않는다면 

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

 

아래 예시와 같이 조건을 좀 더 세분화해서 사용도 가능합니다.

@supports not (not (transform-origin: 2px)) {}
@supports (display: grid) and (not (display: inline-grid)) {}

 

✅ and 연산자 : 두 개의 구성 표현식이 동시에 참이어야만 통과합니다.

@supports (display: table-cell) and (display: list-item) {}

다수의 논리곱도 가능합니다.

@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}

 

✅ or 연산자 : 두 개의 구성 표현식 중 어느 한쪽이라도 참이면 통과합니다.

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

참고: and와 or 연산자를 같이 사용할 때는 괄호를 사용해 연산자 적용 순서를 정의해야 합니다. 그렇지 않으면 조건이 유효하지 않으므로 @-규칙 전체를 무시합니다.

 

💡 scroll-snap

브라우저에서 스크롤을 할 때 스크롤링의 끝나는 시점에 따라서 우리는 스크롤이 콘텐츠의 중간에 멈추게 되는 경우가 발생하거나 또는 주요 콘텐츠의 일부분만 보이게 되는 경우가 발생하게 됩니다.

하지만 만약 스크롤을 할 때 미리 설정한 위치(콘텐츠의 시작점)로 이동한다면 우리는 보다 자연스러운 스크롤 움직임과 보다 나은 유저 경험을 제공할 수 있습니다. Scroll snap이 적용된 코드와 예시는 mdn web docs 사이트를 방문하시어도 확인하실 수 있습니다.

 

다음은 Scroll snap을 적용하기 전/후의 화면입니다.

 

- 적용 전

 

- 적용 후

✅ scroll snap : 사용할 수 있는 속성은 아래 4가지 입니다.

• scroll-snap-type
• scroll-snap-align
• scroll-padding
• scroll-margin

1.scroll-snap-type : 부모 요소에 적용

snap position을 지정할 수 있는 축을 결정하는 Scroll Snap Axis, 스냅의 엄격도를 지정하는 Scroll Snap Strictness를 함께 선언합니다.

👉 scroll snap axis

• x: 수평(가로) 축으로 snap position 지정
• y: 수직(세로) 축으로 snap position 지정
• block: snap area의 block 축으로 지정
• inline: inline 축으로 지정
• both: 두 축의 위치를 개별적으로 스냅. 잠재적으로 각 축의 다른 요소에 스냅이 가능.

👉 scroll snap strictness

• none: 스냅 하지 않음.
• proximity: snap position을 지정하였다면 해당 설정에 맞춰 스냅, 미지정 상태라면 유저 에이전트에 따라 적용
• mandatory: 항상 스냅.
• 엄격도는 지정하지 않을 경우 proximity로 설정

- CSS

scroll-snap-type: x proximity; /* X축 스크롤, snap position 유무에 맞춰 스냅 */

 

2. scroll-snap-align

snap position은 snap area 안에서 원하는 정렬 방식을 설정할 수 있습니다. scroll-snap-type에서 지정한 축을 기준으로 snap area의 정렬을 정합니다.

• none: snap position을 지정하지 않음
• start: 축을 기준으로 snap area의 시작 부분에 맞춰 정렬
• end: snap area의 끝에 맞춰 정렬
• center: snap area의 가운데에 맞춰 정렬

scroll-snap-align: center; /* snap area의 가운데 스냅, 다음 이미지의 2번째 snap area에 해당 *

3.scroll-padding

Scroll Container에 선언하지만, 해당 요소의 padding 값이 변경되는 것이 아니고, 해당 뷰포트의 padding이 적용됩니다.
Scroll Contatiner에 선언한 수치만큼 snapport가 조정되기 때문에 스크롤 할 수 있는 영역이 줄어들고 레이아웃, 스크롤 원점, 요소의 위치, 실제로 보이는 것에는 영향을 주지 않습니다.

 

다음의 CSS를 적용해봤습니다.

scroll-snap-type:y mandatory;
scroll-padding: 50px;

 

4. scroll-margin

스냅 타깃이 되는 snap area에 지정하며, scroll-padding과 동일하게 실제 요소에 영향을 미치지 않습니다.

 

다음의 CSS 적용했습니다. (두 번째 상자에만 적용)

.snap-area:nth-of-type(2) { scroll-margin: 100px; }

scroll-padding, scroll-margin을 활용하면 이전 혹은 다음 콘텐츠에 대한 예상 시나리오를 사용자에게 제공할 수 있습니다.

 

 

 

✅ Progress

아래의 이미지와 같은 Progress bar를 구현하기 위해서는 태그 안에 태그가 중첩으로 마크업 해서 Progress의 배경이 되는 영역과 Value에 해당하는 영역을 각각 작업해야 하는 게 일반적인 코드 구현 방법이었습니다.

하지만 새로운 HTML 기능을 사용하게 되면 태그 단 한 줄로 위의 기능을 구현할 수 있습니다.

<progress max="100" value="70"> 70% </progress>

👉 max

<progress> 요소가 나타내는 작업에 필요한 작업량을 나타냅니다. 해당 값을 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.

 

👉 value

<progress> 요소가 나타내는 작업을 완료한 양을 나타내며 유효한 부동소수점 숫자여야 하고, max 특성을 지정한 경우 0 이상 max 이하, 그렇지 않으면 0 이상 1 이하여야 합니다. value 특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타냅니다.

 

👉 custom

아래의 속성 코드를 적용하면 Progress값이 초기화되고 디자이너가 원하는 대로 또는 자신이 원하는대로 높이값, 색상 등을 변경할 수 있습니다.

progress {
  -webkit-appearance: none;
   appearance: none;
}

progress::-webkit-progress-bar {
   background-color: red;
}

progress::-webkit-progress-value {
   background-color: blue;
}

✅ meter

알아두면 유용한 또 하나는 Meter입니다. 

얼핏 보면 Progress bar와 초기 컬러 값만 다를 뿐 그 외에는 굉장히 흡사하게 생겼습니다. 그럼에도 코드가 progress, meter로 구분되어 있다는 것은 사용용도가 분명히 다르기 때문에 구분이 되어 있겠죠. 

 

지금부터 그 차이점을 알아봅시다. 

아래의 이미지는 max값을 100으로 설정하고 value를 50으로 설정한 이미지입니다.

이제 value값을 80으로 변경해 보겠습니다. 

자동으로 색상값이 변경되네요. 와우(😱😱😱😱)

HTML 코드를 살펴볼게요. 이전의 progress에 비해 옵션 값이 많이 있습니다. 각 옵션 값의 역할에 대해 알아봅시다.

<meter min="0" max="100" low="33" high="66" optimum="80" value="80">at 50/100</meter>

👉 min

측정 범위의 가능한 최솟값으로 지정할 경우 최댓값(max 특성) 미만이어야 합니다. 지정하지 않은 경우 0입니다.

 

👉 max

측정 범위의 가능한 최댓값으로 지정할 경우 최솟값(min 특성)을 초과해야 합니다. 지정하지 않은 경우 1입니다.

 

👉 value

현재의 값을 나타냅니다.

최소와 최댓값(min과 max 특성)을 지정한 경우, 그 사이여야 합니다. 지정하지 않았거나 잘못된 값인 경우 0으로 간주합니다. 지정했으나 범위 바깥인 경우, 범위에 맞춰 나머지 값을 버립니다.

참고: value가 0 이상 1 이하가 아닌 이상, min과 max를 정의해 value 값이 그 안에 들어가도록 해야 합니다.

 

👉 low

측정 범위 중 낮은 범위의 최댓값으로 지정할 경우 전체 범위 최솟값(min 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 high와 max 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.

 

👉 high

측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(max 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 low와 min 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.

👉 optimum

이상적인 값을 나타내며 min과 max 특성으로 정의한 범위 내에 위치해야 합니다. low와 high 특성을 함께 사용한 경우, optimum은 어느 범위가 이상적인지 나타냅니다. 예를 들어, 값이 min과 low 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.

 

👉 custom

/* meter의 bar를 커스터마이징 합니다. */
meter::-webkit-meter-bar 

/* meter의 최적값에서 많이 부족한 색상을 설정합니다. */
meter::-webkit-meter-even-less-good-value 

/* meter의 최적값에 근접한 색상을 설정합니다. */
meter::-webkit-meter-suboptimum-value 

/* meter의 최적값 색상을 설정합니다. */
meter::-webkit-meter-optimum-value

 

👉 정리

위의 옵션 값을 기준으로 위의 예시를 다시 살펴보면 optimum 값이 "80"으로 설정되었고 value 값이 "80"이 되었기 때문에 이상적인 값이라고 판단하고 색상이 변경되었다는 것을 알 수 있습니다. 

정리해보면 meter는 일정 범위 안에서 값이나 분포 비율을 나타낼 때(정적인 값:결괏값) 적합하며 progress는 작업에 대한 진행상태 값(동적인 값)에 적합하며 이 점이 둘의 가장 큰 차이점입니다.

 

 

 

 

참고 :

• https://wit.nts-corp.com/2018/08/28/5317
• https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
• https://developer.mozilla.org/ko/docs/Web/CSS/@supports
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/meter
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress