웹 레이아웃을 변화시키는 10가지 놀라운 CSS 트릭
CSS로 웹 레이아웃을 변화시키고 싶으십니까? 당신은 바로 이곳에 있습니다.
DIY 웹사이트 빌더를 사용해 본 적이 있거나 처음부터 사이트를 만들어 본 경험이 있는 사람이라면 누구나 CSS에 대해 들어본 적이 있을 것입니다. 이 믿을 수 없을 만큼 강력한 도구를 사용하면 웹 레이아웃을 변환하여 웹 사이트를 제어하고 창의적인 비전을 달성할 수 있는 힘을 얻을 수 있습니다. 하지만 계단식 스타일 시트를 사용하여 다음 웹 사이트의 잠재력을 어떻게 활용할 수 있습니까?
이 가이드에서는 위 이미지에서 볼 수 있는 헤더를 만드는 데 사용된 다양한 CSS 속성에 대해서만 자세히 설명합니다. 여기 CodePen에서 이 프로젝트를 찾아 직접 시도해 볼 수 있습니다.
CSS 이미지 조작
헤더 섹션을 구축하기 위해 취해야 할 첫 번째 단계는 페이지에 이미지를 추가하는 것입니다. 이 목표를 달성하기 위해 다양한 방법을 사용할 수 있으므로 가장 인기 있는 방법과 이미지 조작에 도움이 되는 몇 가지 요령을 다루었습니다.
1. CSS 배경 이미지
우리는 헤더에 전체 화면 배경 이미지를 사용하고 싶고 background-image CSS 속성이 이상적입니다. 먼저 이미지(및 헤더 내의 나머지 요소)에 대한 컨테이너를 만들어야 합니다.
클래스로 "header"가 있는 div 태그를 추가한 다음 높이를 100vh로, 너비를 100vw로 설정했습니다. 이는 뷰포트와 정확히 동일한 크기의 상자를 제공합니다. 또한 오버플로가 숨김으로 설정되고 여백이 0px로 설정된 CSS 규칙을 페이지 본문에 추가했습니다.
컨테이너가 있으면 배경 이미지를 추가할 수 있으며 이 목표를 달성하려면 세 가지 CSS 규칙이 필요합니다. 첫 번째 배경 이미지에는 배경 이미지의 소스 역할을 하는 URL이 필요하며 이를 위해 편리한 Unsplash 카탈로그를 사용했습니다. 또한 덮을 배경 크기와 배경 위치를 맨 아래로 설정해야 하지만 최상의 결과를 위해 이를 실험해 볼 수도 있습니다.
2. CSS 배경-블렌드-모드
CSS 블렌드 모드를 사용하면 Adobe Photoshop과 같은 소프트웨어의 블렌드 기능과 마찬가지로 이미지와 텍스트를 블렌딩할 수 있습니다. 블렌드 모드가 배경 이미지와 작동하도록 하려면 사용하려는 블렌드 모드를 추가하기 전에 배경색을 반투명 흰색으로 설정합니다.
그런 다음 Background-Blend-Mode를 Soft-Light로 설정하여 이미지를 부드럽게 만들었습니다.
3. CSS 클립 경로
다음 트릭에서는 클립 경로라는 규칙을 사용할 것입니다. img HTML 태그를 사용할 때 작업 중인 이미지의 일부를 숨기는 경로를 설정할 수 있습니다. 이를 위해 일반적인 모양을 사용하도록 선택할 수도 있지만 SVG 생성 앱을 사용하여 보다 복잡한 디자인을 만들 수도 있습니다.
세 개의 이미지에 대한 컨테이너 역할을 하기 위해 "flex_image_box"가 포함된 div 태그를 추가했으며, 디스플레이 CSS 속성을 사용하여 이를 flexbox로 전환했습니다(이에 대해서는 나중에 설명하겠습니다). 3개의 img 태그가 div 태그 내부에 추가되었으며 ID는 "img1", "img2" 및 "img3"으로 설정되었습니다. 각 이미지의 너비를 600px로 설정하면 이미지의 가로세로 비율을 변경하지 않고도 높이 속성을 비워 둘 수 있습니다. 이제 클립 경로를 추가할 시간입니다!
세 개의 삼각형을 만들기 위해 img1과 img3에는 동일한 다각형 클립 경로를 사용하고 img2에는 반전된 버전을 사용했습니다. 또한 이미지가 화면의 올바른 위치에 있는지 확인하기 위해 플렉스박스 컨테이너의 위치를 조정해야 했습니다. 클립 경로 규칙은 아래에서 볼 수 있습니다.
4. CSS 불투명도
불투명도는 HTML 요소의 투명도 수준을 설정합니다. 이미지의 불투명도를 90%로 설정하여 배경과 잘 어울리도록 이미지를 약간 불투명하게 만듭니다.
CSS 반응형 텍스트 및 이미지
우리는 과거에 HTML, CSS 및 JavaScript를 사용하여 멋진 반응형 웹 사이트를 만드는 기술을 이미 탐구했지만 이미 이해하고 있는 원칙을 바탕으로 웹 사이트 레이아웃을 마스터하는 데 필요한 기술에 대한 더 깊은 통찰력을 제공할 수 있습니다.
1. CSS 반응/상대 단위
px, pt, cm 등의 CSS 단위는 절대 단위이므로 웹 브라우저는 해당 단위가 차지하는 창의 너비와 높이에 관계없이 동일한 크기로 렌더링합니다. 상대 단위는 다르므로 브라우저 창이나 상위 요소와 같은 다른 측정값에 상대적인 높이와 길이를 생성합니다. 아래의 상대 단위는 일반적으로 사용되며 반응형 웹 디자인에 필수적입니다.
- em: 이 단위는 일반적으로 텍스트와 함께 사용됩니다. 현재 요소의 글꼴 크기에 상대적이므로 4em은 설정된 글꼴 크기의 4배가 됩니다.
- rem: em과 마찬가지로 rem은 요소의 글꼴 크기에 상대적입니다. 계층 구조의 루트 요소는 출력 크기를 정의하는 데 사용됩니다.
- vw/vh: 뷰포트 크기에 따라 너비와 높이를 결정합니다. 2vw는 브라우저 너비의 2%에 해당하고 2vh는 브라우저 높이의 2%에 해당합니다.
- %: % 단위는 요소의 상위 요소 크기를 기준으로 크기를 계산합니다.
- vmin/vmax: 이 단위는 뷰포트의 최소 또는 최대 크기의 1%에 상대적인 크기를 생성하여 브라우저 창 크기에 직접 반응하는 수단을 요소에 제공합니다.
2. CSS 글꼴 크기
이 속성은 웹 사이트의 기본 스타일시트나 사용자의 웹 브라우저에서 미리 정의된 기본값을 사용하여 설정할 수 있습니다. 이러한 값에는 중간, xx-소형, x-소형, 소형, 대형, x-대형 및 xx-대형이 포함되며 글꼴 크기 CSS 태그가 없는 모든 텍스트의 경우 중간이 기본값으로 설정됩니다. 또는 글꼴 크기 CSS 속성을 사용할 때 상대 값을 사용할 수 있으며, 이는 헤더 섹션의 텍스트 크기가 모든 뷰포트에 적합하도록 보장하는 데 사용한 방법입니다.
HTML에 두 개의 제목 태그를 추가하여 프로젝트에 텍스트를 추가할 수 있었습니다. 하나는 주요 대형 헤더이고 다른 하나는 하위 헤더이며 둘 다 상대 단위를 사용합니다.
관련: CSS에서 HTML 글꼴 크기를 변경하는 방법
3. CSS 너비 및 높이
모든 HTML 요소에는 div, img, a 또는 기타 유형의 태그에 관계없이 높이 및 너비 치수가 있습니다. 이러한 치수는 자동으로 기본값으로 설정될 수 있지만 웹 디자이너가 올바른 규칙을 사용하여 지시할 수도 있습니다. 우리는 이 헤더에 이 두 가지 방법을 모두 사용했습니다.
반응형 단위는 높이가 100vh로, 너비가 100vw로 설정된 배경 이미지에 사용되었지만 세 개의 이미지에는 절대 단위도 사용했습니다. 상위 요소의 크기를 채택하는 수단을 제공하는 "상속"과 같은 옵션을 사용하여 CSS 너비 및 높이 단위를 탐색하고 실험해 볼 가치가 있으며 이와 같은 다른 트릭도 사용할 수 있습니다.
4. CSS 믹스 블렌드 모드
CSS 혼합 혼합 모드는 배경 혼합 모드와 매우 유사하지만 배경에만 적용되는 것이 아니라 모든 요소에 적용할 수 있다는 점만 다릅니다. 우리는 텍스처를 추가하고 프로젝트를 더욱 흥미롭게 만들기 위해 H1 제목에 이 속성을 사용했습니다. 먼저 텍스트 색상을 검정색으로 설정한 다음 혼합 혼합 모드를 오버레이로 설정했습니다.
고유한 색상 프로필이 있는 배경은 사용하는 설정에 따라 다르게 반응하므로 텍스트를 처리할 때 사용할 수 있는 다양한 혼합 옵션을 살펴보는 것이 좋습니다.
5. CSS 텍스트 변환
CSS 텍스트 변환은 디자이너가 검색 엔진이 텍스트를 읽는 방식에 영향을 주지 않고 웹사이트에서 텍스트의 대소문자를 변경할 수 있게 해주는 영리한 속성입니다. 예를 들어, H1 제목에 text-transform을 대문자로 설정하여 HTML에 어떻게 입력하든 각 문자를 대문자로 만듭니다.
CSS 오버플로 속성
HTML은 웹 사이트 콘텐츠에 대한 엄격한 경계를 설정하는 엄격한 프레임워크처럼 보일 수 있지만 오버플로 속성이 사용되는 경우에는 그렇지 않습니다.
CSS 오버플로 및 텍스트 오버플로
오버플로와 텍스트 오버플로는 매우 유사한 CSS 속성입니다. 오버플로는 모든 요소에 적용할 수 있으므로 해당 경계를 벗어날 수 있는 콘텐츠를 제어할 수 있습니다. 텍스트 오버플로도 유사하지만 텍스트에만 적용되며 규칙에 추가 매개변수를 추가할 수 있는 기능을 제공합니다. 우리는 이 프로젝트에서 오버플로만 사용했지만(페이지 본문의 크기를 제한하기 위해 이를 사용했습니다) W3Schools 웹사이트에서 텍스트 오버플로에 대해 읽을 수 있습니다.
웹 레이아웃에 CSS 사용
CSS는 웹 디자이너와 개발자가 코드를 사용하여 멋진 웹사이트를 만들 수 있게 해주는 매우 강력한 도구입니다. 기사 시작 부분에서 제공한 CodePen을 살펴보는 것이 좋습니다. 이를 통해 이러한 모든 도구의 작동 방식에 대한 더 깊은 통찰력을 얻을 수 있습니다. 또한, 우리가 만든 헤더를 사용하여 자신만의 마무리 작업을 추가할 수 있습니다.