콘텐츠마케팅

잘 모를 수 있는 CSS3 기능: Flexbox, 그리드 레이아웃, 사용자 정의 속성, 전환, 애니메이션 및 여러 배경

계단식 스타일 시트(CSS) 계속 발전하고 최신 버전에는 사용자가 알지 못하는 일부 기능이 있을 수 있습니다. 다음은 코드 예제와 함께 CSS3에 도입된 몇 가지 주요 개선 사항 및 방법론입니다.

  • 유연한 상자 레이아웃(Flexbox): 웹 페이지에 대해 유연하고 반응이 빠른 레이아웃을 만들 수 있는 레이아웃 모드입니다. flexbox를 사용하면 컨테이너 내에서 요소를 쉽게 정렬하고 배포할 수 있습니다. 이 예에서는 .container 수업 용도 display: flex flexbox 레이아웃 모드를 활성화합니다. 그만큼 justify-content 속성이로 설정되었습니다. center 컨테이너 내에서 자식 요소를 가로로 중앙에 배치합니다. 그만큼 align-items 속성이로 설정되었습니다. center 자식 요소를 세로로 중앙에 배치합니다. 그만큼 .item 클래스는 자식 요소의 배경색과 패딩을 설정합니다.

HTML

<div class="container">
  <div class="item">Centered Element</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

결과

중심 요소
  • 그리드 레이아웃: 웹 페이지에 대한 복잡한 그리드 기반 레이아웃을 만들 수 있는 또 다른 레이아웃 모드입니다. 그리드를 사용하면 행과 열을 지정한 다음 그리드의 특정 셀 내에 요소를 배치할 수 있습니다. 이 예에서 .grid-container 수업 용도 display: grid 그리드 레이아웃 모드를 활성화합니다. 그만큼 grid-template-columns 속성이로 설정되었습니다. repeat(2, 1fr) 너비가 같은 두 개의 열을 만듭니다. 그만큼 gap 속성은 그리드 셀 사이의 간격을 설정합니다. 그만큼 .grid-item 클래스는 그리드 항목의 배경색과 패딩을 설정합니다.

HTML

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

결과

항목 1
항목 2
항목 3
항목 4
  • 전환 : CSS3는 웹 페이지에서 전환을 만들기 위한 여러 가지 새로운 속성과 기술을 도입했습니다. 예를 들어, transition 속성은 시간이 지남에 따라 CSS 속성의 변경 사항을 애니메이션화하는 데 사용할 수 있습니다. 이 예에서 .box 클래스는 요소의 너비, 높이 및 초기 배경색을 설정합니다. 그만큼 transition 속성이로 설정되었습니다. background-color 0.5s ease ease-in-out 타이밍 기능을 사용하여 배경색 속성에 대한 변경 사항을 XNUMX초 이상 애니메이션화합니다. 그만큼 .box:hover 클래스는 마우스 포인터가 요소 위에 있을 때 요소의 배경색을 변경하여 전환 애니메이션을 트리거합니다.

HTML

<div class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

결과

호버
Here!
  • 애니메이션 : CSS3는 웹 페이지에서 애니메이션을 만들기 위한 여러 가지 새로운 속성과 기술을 도입했습니다. 이 예에서는 다음을 사용하여 애니메이션을 추가했습니다. animation 재산. 우리는 @keyframes 상자가 0초 동안 90도에서 0.5도까지 회전하도록 지정하는 애니메이션 규칙입니다. 상자 위로 마우스를 가져가면 spin 상자를 회전시키기 위해 애니메이션이 적용됩니다. 그만큼 animation-fill-mode 속성이로 설정되었습니다. forwards 애니메이션이 끝난 후에도 애니메이션의 최종 상태가 유지되도록 합니다.

HTML

<div class="rotate"></div>

CSS

.rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Add animation properties */
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Define the animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

.rotate:hover {
  animation-name: spin;
}

결과

호버
Here!
  • CSS 맞춤 속성: 라고도 CSS 변수, 맞춤 속성은 CSS3에 도입되었습니다. 이를 통해 스타일시트 전체에서 값을 저장하고 재사용하는 데 사용할 수 있는 CSS에서 고유한 사용자 정의 속성을 정의하고 사용할 수 있습니다. CSS 변수는 다음과 같이 두 개의 대시로 시작하는 이름으로 식별됩니다.
    --my-variable. 이 예에서는 –primary-color라는 CSS 변수를 정의하고 값을 지정합니다. #007bff, 많은 디자인에서 기본 색상으로 일반적으로 사용되는 파란색입니다. 이 변수를 사용하여 background-color 버튼 요소의 속성을 사용하여 var() 함수 및 변수 이름을 전달합니다. 그러면 변수 값이 버튼의 배경색으로 사용됩니다.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • 다양한 배경: CSS3를 사용하면 요소의 위치 지정 및 쌓임 순서를 제어하는 ​​기능과 함께 요소에 대한 여러 배경 이미지를 지정할 수 있습니다. 배경은 두 개의 이미지로 구성되어 있으며, red.pngblue.png, 다음을 사용하여 로드됩니다. background-image 재산. 첫번째 이미지, red.png, 요소의 오른쪽 하단 모서리에 배치되는 반면 두 번째 이미지는 blue.png, 요소의 왼쪽 상단 모서리에 위치합니다. 그만큼 background-position 속성은 각 이미지의 위치를 ​​제어하는 ​​데 사용됩니다. 그만큼 background-repeat 속성은 이미지가 반복되는 방식을 제어하는 ​​데 사용됩니다. 첫번째 이미지, red.png, 반복하지 않도록 설정(no-repeat), 두 번째 이미지는 blue.png, 반복하도록 설정됨(repeat).

    HTML

    <div id="multibackground"></div>

    CSS

    #multibackground {
      background-image: url(red.png), url(blue.png);
      background-position: right bottom, left top;
      background-repeat: no-repeat, repeat;
      height: 200px;
      width: 200px;
    }

    결과

    Douglas Karr

    Douglas Karr 의 CMO입니다. 오픈인사이트 그리고 설립자 Martech Zone. Douglas는 수십 개의 성공적인 MarTech 스타트업을 도왔고, Martech 인수 및 투자에서 5억 달러가 넘는 실사를 도왔으며, 기업이 판매 및 마케팅 전략을 구현하고 자동화하도록 지속적으로 지원하고 있습니다. Douglas는 국제적으로 인정받는 디지털 혁신이자 MarTech 전문가이자 연설가입니다. Douglas는 Dummie's Guide와 비즈니스 리더십 서적을 집필한 작가이기도 합니다.

    관련 기사

    맨 위로 가기 버튼
    닫기

    애드블록 감지됨

    Martech Zone 은(는) 광고 수익, 제휴 링크 및 후원을 통해 사이트에서 수익을 창출하기 때문에 이 콘텐츠를 무료로 제공할 수 있습니다. 사이트를 볼 때 광고 차단기를 제거해 주시면 감사하겠습니다.