By aPOST in CSS —

CSS 반투명 유리 배경 효과 구현

앞의 만들어진 결과를 보면 반투명 유리 배경 효과가 어떤 것인지 대충 감이 올 겁니다.

몇 가지 CSS 속성과 적절한 속성 값을 조합하면 어렵지 않게 만들 수 있으므로 CSS 코드를 보고 순서대로 차근 차근 만들어 보도록 하겠습니다.

완성본은 다음 파일을 다운로드 받아서 압축을 풀면 볼 수 있습니다.

timer.zip0.45MB

먼저 기본으로 만들어진 HTML 코드를 확인하겠습니다.

"timerwrap" 클래스를 가진 "<div>" 태그가 반투명 배경을 만드는데 사용됩니다.

그 안의 "<ul>" 태그는 타이머 구현을 위한 태그로 반투명 배경 위에 표시되도록 처리만 하면 됩니다.

"<ul>" 태그 안의 목록 요소들은 타이머 구현을 위한 태그 들이므로 무시하면 됩니다.

<div class="timerwrap">
    <ul id="timer">
        <li>
            <span class="days">00</span>
            <p class="days_text">Days</p>
        </li>
        <li class="seperator">:</li>
        <li>
            <span class="hours">00</span>
            <p class="hours_text">Hours</p>
        </li>
        <li class="seperator">:</li>
        <li>
            <span class="minutes">00</span>
            <p class="minutes_text">Minutes</p>
        </li>
        <li class="seperator">:</li>
        <li>
            <span class="seconds">00</span>
            <p class="seconds_text">Seconds</p>
        </li>
    </ul>    
</div>

카운트다운 타이머 동작 구현 부분은 제외하고, 타이머 배경의 반투명 유리 효과를 만드는 CSS만 확인해보겠습니다.

CSS는 다음과 같습니다.

배경 이미지는 HTML "body" 태그에 붙여서 전체 페이지를 덮도록 하고, 반투명 이미지는 이 "body" 태그의 배경 이미지를 상속 받아서 그대로 사용합니다.

"#timer" 속성에서 중요한 것은 "position: absolute;" 입니다. 타이머 표시 내용이 유동되서 반투명 배경 효과에 묻혀서 가려지지 않도록 하는 역할을 합니다.

body{
  background-image: url('./backup/809/img/timerbg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;    
}
/* 타이머 */
.timerwrap{
  position: absolute;
  background: inherit;
  left: 50%;
  top: 50%;
  margin: -135px 0 0 -310px;
  width: 620px;
  height: 270px;
  border-radius: 30px;
  overflow: hidden;
}
.timerwrap:before{
  content: "";
  position: absolute;
  background: inherit;
  width: 670px;
  height: 320px;
  left: -25px;
  top: -25px;
  box-shadow: inset 0 0 0 1000px rgba(255,255,255,0.3);
  filter: blur(15px);
}

#timer {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

요소의 수직/수평 가운데 정렬 방법은 다음 글을 보시면 됩니다.

-> CSS 수직/수평 가운데 정렬하기

1. 배경 이미지 붙이기

배경 이미지는 <body> 태그에 적용합니다. 배경 이미지 반복 없이 꽉 차 보이도록 속성을 추가하고, 배경 이미지가 스크롤 되지 않도록 고정 속성을 부여합니다.

예제는 전체 화면 가운데에 타이머가 돌아가는 구조이기 때문에 배경 이미지가 스크롤 되지 않도록 하는 것일뿐 반투명 배경 효과에 영향을 주는 것은 아닙니다.

body{
  background-image: url('./backup/809/img/timerbg.jpg'); /* 배경 이미지 지정 */
  background-repeat: no-repeat; /* 반복 없음 */
  background-attachment: fixed; /* 페이지 스크롤에 따라 배경이 스크롤 되지 않도록 고정 */
  background-size: cover; /* 현재 화면에 꽉차보이도록 배경 이미지 배율 조정 */
}

2. 타이머 요소를 가운데 배치하기

"timerwrap" 클래스가 적용된 "<div>"는 타이머 기능 전체를 감싸고 있는 블록 요소입니다.

일반적으로 절대 좌표인 요소를 수평/수평 수직 정렬을 하려면 다음과 같이 CSS를 적용합니다.

.timerwrap{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 620px;
    height: 270px;
}

단, 이렇게 transform 속성으로 가운데 정렬을 하게 되면, 타이머 영역의 배경 이미지가 "<body>" 태그의 배경 이미지와 위치가 일치하지 않는 문제가 발생합니다.

타이머 영역의 배경 이미지가 transform 으로 이동시키기 전의 배경 이미지 영역으로 고정이 되기 때문에 엉뚱한 이미지가 반투명 처리가 되는 현상이 발생합니다.

거기에 더해 현재 페이지 크기가  타이머 영역보다 충분히 크지 않을 경우 반투명 처리를 위한 이미지가 잘리는 현상까지 생기게 됩니다.

transform 속성으로 위치를 보정해 반투명 배경 오른쪽 부분이 효과가 적용되지 않은 예

반드시 마진(margin) 속성으로 반투명 효과 적용하는 타이머 영역 크기의 절반 만큼을 왼쪽 위로 이동 시켜서 가운데 정렬을 맞춰야 합니다.

예제에서는 620px x 270px 로 반투명 효과를 적용할 타이머 영역 크기를 정했으므로 "margin: -135px 0 0 -310px;" 로 지정해 이동시킵니다.

반투명 효과를 적용할 영역을 가운데 정렬할 때 transform을 사용할 때 발생하는 문제점

3. 반투명 효과 만들기

반투명 배경을 붙이는 원리는 <body> 태그의 배경 이미지를 "timerwrap" 클래스를 적용한 "<div>" 태그가 상속 받고, 다시 이 태그의 가상 클래스 ":before"가 "<div>" 태그의 배경 이미지를 상속 받아 최종적으로는 ":before" 가상 클래스의 배경 이미지로 반투명 효과를 만드는 것입니다.

"timewrap" 클래스와 ":before" 가상 클래스는 배경 이미지가 별도로 선언되어 있지 않으며, "b"ackground: inherit;" 속성으로 배경 속성을 상속받습니다.

여기서 아주 중요한 점이 있습니다.

반투명 효과라고 했지만, 실제로는 <body> 태그의 배경 이미지가 반 투명한 ":before" 가상 클래스를 통해 비쳐 보이는 것이 아닙니다.

앞서 언급한데로 ":before" 가상 클래스는 "<body>" 태그의 배경 이미지를 상속 받아 같은 배경 이미지를 별도로 가지고 있으며, 이 배경 이미지에 블러 효과를 적용해 이미지가 비쳐 보이는 것 같은 착시 효과를 만드는 것입니다.

"timerwrap" 클래스와 "timerwrap:before" 가상 클래스의 "background: inherit;" 속성을 삭제해 배경 상속을 제거하고, 다음과 같이 "timerwrap:before" 가상 클래스에 "<body>" 태그의 배경 이미지 선언을 그대로 복사&붙여넣기를 해도 동일한 결과를 만들어 냅니다.

.timerwrap:before{
    content: "";
    position: absolute;
    background-image: url('./backup/809/img/timerbg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;    
    width: 670px;
    height: 320px;
    left: -25px;
    top: -25px;
    box-shadow: inset 0 0 0 1000px rgba(255,255,255,0.5);
    filter: blur(15px);
}

앞서처럼 ":before" 가상 클래스에 배경 이미지를 직접 선언하고 "<body>" 태그의 배경 이미지를 삭제하면 다음과 같이 타이머 배경에만 반투명 이미지가 적용된 결과를 만들 수 있습니다.

실제 반투명 유리 효과를 만들어 내는 부분은 "timerwrap:before" 가상 클래스 입니다.

타이머 배경에만 반투명 배경이 적용된 화면

":before" 가상 클래스의 적용 속성들을 하나씩 확인해보겠습니다.

.timerwrap:before{
    content: "";
    position: absolute;
    background: inherit; /* 배경 속성을 상속 받음 */
    width: 670px; /* 반투명 효과 너비 - timerwrap 클래스 +50px */
    height: 320px; /* 반투명 효과 높이 - timerwrap 클래스 +50px */
    top: -25px; /* 반투명 효과 영역을 25px 왼쪽으로 이동 */
    left: -25px; /* 반투명효과 영역을 25px 위로 이동 */
    box-shadow: inset 0 0 0 1000px rgba(255,255,255,0.5); /* 반투명 흰색 그림자 효과를 영역 안쪽에 아주 크게 생성 */
    filter: blur(15px); /* 블러 효과로 배경 이미지를 흐리게 만듬 */
}

4. 반투명 효과 위치 및 영역 보정하기

"timerwrap" 클래스의 영역 크기는 620x270px 이고, 반투명 효과를 적용한 ":before" 가상 클래스의 영역 크기는 670x320px 로 각각 50px 씩 더 큽니다. 

반투명 효과를 만든 가상 클래스의 영역이 더 커야 하는 이유는 그림자 효과를 가상 클래스 영역 내부(inset)로 생성할 때 그림자 효과가 점진적으로 중심부를 향해서 진행되면서 그림자 효과가 서서히 진해지는 부분을 잘라내야 하기 때문입니다.

점진적으로 진행된 테두리 부분 크기가 25px 정도이고, 상하좌우 영역을 모두 잘라내야 하므로 ":before" 가상 클래스를 50px씩 크게 만든 후, 왼쪽 위로 25px씩 이동(top/left) 시키는 방식으로 "timerwrap" 영역 전체가 반투명 효과가 깨끗하게 적용되도록 만드는 것입니다.

테두리 영역을 잘라내지 않아 그림자 효과가 주변에 남은 반투명 유리 효과

"timerwrap" 영역 바깥의 25px 남는 영역은 "timerwrap" 클래스의 "overflow: hidden;" 속성으로 감추어서 잘라내면 깨끗하게 반투명 효과가 적용됩니다.

테두리를 잘라내 완성된 반투명 유리 효과

5. 타이머 표시하기

타이머("#timer") 요소는 반투명 효과를 적용한 ":before" 가상 클래스가 "position: absolute;" 속성으로 유동 상태이기 때문에 ":before" 가상 클래스 영역 뒤로 가려져 보이지 않게 됩니다.

따라서 타이머 요소 또한  "position: absolute;" 속성을 부여해 가상 클래스 앞으로 오도록 한 후, 화면 가운데로 정렬을 해야 합니다.

타이머를 화면 가운데에 유동시키기 위해서는 타이머 요소에 다음 속성들을 추가해야 합니다.

#timer {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

"position: absolute;" 속성으로 타이머 요소가 유동 상태가 되면 너비(width) 값을 "100%"로 추가로 지정해 "timerwrap" 클래스 영역 안에 타이머 요소가 채워지도록 해야 타이머가 정상 표시됩니다.

완성된 반투명 유리 배경 효과가 적용된 타이머

CSS 관련글
글 182 개 모두보기 →