소개

몇 년 전까지만 해도 배경 모양이나 직사각형 이외의 웹 사이트 섹션을 원할 경우 필요에 따라 추가할 정적 PNG 또는 JPEG 이미지를 제공하는 디자이너가 필요했을 가능성이 높았지만 CSS는 그 이후로 먼 길을 왔습니다, 친구들.

페이지의 내용을 순백색과 부드러운 회색을 번갈아 가며 다양한 색상의 배경 섹션으로 나누는 웹사이트 업데이트 작업을 할 때 디자인 모형에는 아래쪽 가장자리가 위로 기울어진 섹션 하나가 포함되어 있었습니다. 일반적인 블록 요소처럼 페이지를 완벽한 90도 각도로 가로지르는 대신 오른쪽으로 이동합니다.

이제 이 작업을 위해 디자이너에게 배경 이미지를 만들어 달라고 요청할 수도 있었지만 대신 CSS의 힘을 사용하여 스스로 할 수 있는지 확인하고 싶었습니다. 그리고 CSS 클립 경로를 사용하면 가능합니다.

DOM의 흥미로운 모양과 시각적 요소는 더 이상 순전히 디자이너의 영역이 아닙니다. CSS 클립 경로와 같은 도구를 사용하면 개발자가 요소의 모양을 바꿀 수 있으며 그 방법을 보여드리겠습니다.

CSS 클립 경로

나처럼 CSS 클립 경로 속성에 익숙하지 않은 경우 표시해야 할 요소의 부분을 설정하는 클리핑 영역을 생성합니다. 영역 내부에 있는 부분은 표시되고 외부에 있는 부분은 숨겨집니다.

MDN 클립 경로 문서의 데모입니다. 다양한 클립 경로 옵션은 열기구와 텍스트의 다양한 보기를 제공합니다.

clip-path 속성은 매우 다양한 값을 허용할 수 있습니다:

• 클리핑 경로가 정의된 SVG 요소에 대해 url과 같은 값을 허용하는 .
• margin-box 및 border-box와 같은 값을 허용하는 .
• : Circle() 및 ect()와 같은 값을 허용합니다.
• 상속 및 되돌리기와 같은 값을 허용하는 전역 값.

및 값은 하나의 클립 경로로 함께 결합될 수도 있습니다.

/* this CSS combines two different clip path properties */
clip-path: padding-box circle(50px at 0 100px);

이 게시물에서는 클립 경로가 허용할 수 있는 모든 속성과 이 속성을 결합하여 매우 복잡한 모양을 만드는 방법에 대해 자세히 설명하지 않습니다. 더 많은 정보와 Clip=path 실행 예시를 보려면 Mozilla 문서부터 시작하는 것이 좋습니다.

clip-path가 허용하는 속성 중 하나는 polygon()이며, 이는 기울어진 배경 섹션에 필요한 솔루션이 되었습니다.

CSS로 다시 만드는 데 필요한 다각형

CSS로 만들어야 했던 회색 다각형 배경.

위 이미지는 CSS 클립 경로의 폴리곤() 속성을 사용하여 다시 만드는 데 필요한 회색 배경 섹션의 스크린샷입니다. 그리고 가장 먼저 해야 할 일은 CSS를 적용할 HTML 요소를 만드는 것이었습니다.

다각형() 클립 경로 대 ect() 클립 경로

클립 경로에 ret() 속성 대신에 다각형() 속성을 사용하기로 선택한 이유가 궁금할 것입니다. 두 가지가 유사하지만, 다각형()은 더 복잡한 다각형 모양을 만들 수 있고 다각형의 각 꼭지점을 정의하기 위해 좌표 쌍을 허용하여 고급 디자인에 더 큰 다양성을 제공하는 반면, ret()는 직사각형 모양만 처리할 수 있습니다.

HTML 및 CSS 설정

제가 작업하고 있던 사이트는 Go 기반 프레임워크인 정적 사이트 생성기 Hugo에 의존했습니다. Hugo는 템플릿을 사용하여 사이트의 HTML을 렌더링하므로 HTML을 알고 있는 경우 아래 예제 코드가 비교적 친숙해 보일 것입니다.

템플릿에 대한 참고 사항:

JSX 구성 요소, Pug 또는 Handlebars가 포함된 Node.js 또는 Jekyll을 사용한 적이 있다면 Hugo의 템플릿은 유사합니다. Go 변수가 포함된 HTML 요소와 {{ }}가 뿌려진 함수는 템플릿이 어디에 있든 올바른 정보를 렌더링합니다. 주입됩니다.

다음은 이 섹션의 전경에 있는 퍼즐 조각으로 인해 페이지의 "퍼즐 섹션"이라는 별명을 붙인 코드입니다. 이 기사의 목적과 명확성을 위해 템플릿에 삽입된 Go 변수를 생성된 HTML로 대체했습니다.

single.html

  

    

    

      

        

          

              

                Lorem ipsum dolor
              
              

                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque.
              
              

                Duis aute irure dolor in reprehenderit
              
              

                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et.
              
          
          

            
          
        
      
    

     
  

이 코드 섹션은 비교적 간단하지만 논의할 가치가 있습니다. HTML 요소 외에도 반응형 웹 디자인을 위한 원래 오픈 소스 CSS 프레임워크 중 하나인 Bootstrap 라이브러리에서 가져온 CSS 클래스가 꽤 많이 있습니다.

커스텀 스타일을 추가하기 위해 사용한 about-body와 같은 커스텀 클래스 중에는 컨테이너, 행, col-12 또는 col-md-6, mb-5, mb-3과 같은 클래스가 있습니다.

후자의 모든 클래스는 뷰포트가 특정 너비(col-md-6)를 초과할 때 화면의 텍스트 및 이미지 요소가 페이지 너비를 공유하도록 하거나 여백 하단을 적용하는 데 사용되는 부트스트랩 클래스입니다.

태그(mb-3 또는 mb-5)에 일정 금액을 추가합니다.

부트스트랩 클래스는 이 게시물의 요점에서 벗어났습니다. 집중할 클래스는 모든 텍스트와 퍼즐 조각 이미지를 래핑하는 퍼즐 섹션입니다.

이 퍼즐 섹션 클래스에서는 약간 기울어진 오른쪽 위 디자인으로 텍스트와 이미지 뒤에 밝은 회색 배경을 표시하기 위해 클립 경로 속성을 추가할 것입니다.

CSS 클립 경로를 추가하여 퍼즐 섹션 모양 만들기

일반 직사각형

.about-body {
  // this white sets the white background color for the whole webpage
  background-color: white; 

  .puzzle-section {
    // clip-path code copied from the clip-path maker website
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    background-color: light-grey;
    padding: 2rem 0 10rem 0;
  }
}