알아야 할 흥미로운 CSS 기능

지난 주에 우리는 CSS의 의사 요소와 의사 클래스에 대해 이야기했습니다. 해당 게시물에서 이러한 CSS 기능을 통해 보다 간결하고 이해하기 쉬우며 유지 관리하기 쉬운 코드를 생성할 수 있는 방법을 살펴보았습니다. 오늘 은 방문자의 선호도 를 고려한 적응형 웹사이트를 구축하기 위한 몇 가지 추가 CSS 속성을 공유하고자 합니다.

object-fit 및 object-position 가 있는 종횡비

object-fit 은 컨테이너에 맞게 대체 요소(예: 이미지)의 크기를 조정하는 방법을 설정할 수 있는 CSS 속성입니다. 구체적인 예를 들어 이것이 무엇을 의미하는지 볼까요?

다음과 같은 수직 이미지가 있다고 가정합니다.

다음 영역에 표시하려고 합니다.

높이가 15em 이고 사용 가능한 너비의 80% 를 차지합니다. 원칙적으로 이미지에 특정 width 와 height 를 설정하기만 하면 된다고 생각할 수 있습니다.

 .custom-size { height: 15em; width: 80%; }

그렇게 하면 이미지의 종횡비가 엉망인 것을 볼 수 있습니다.

특정 너비와 높이를 사용할 때 이미지가 왜곡되는 것을 방지하기 위해 개발자는 div 의 CSS background 속성에 의존했습니다(일부는 여전히 사용). 따라서 img 태그를 사용하여 이미지를 추가하는 대신 div 컨테이너를 만드는 데 사용했습니다.

 <div></div>

div 에 올바른 치수를 설정한 다음 background-size 및 background-position 속성을 사용하여 CSS를 통해 실제 이미지를 추가합니다.

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

여기에서 결과를 볼 수 있습니다.

div 태그에서 CSS background 속성을 사용하여 이미지 크기를 조정하고 자르는 것은 의미상 올바른 HTML 태그인 img 를 더 이상 사용하지 않기 때문에 나쁜 솔루션입니다. 게다가 img 태그에는 이미지를 설명하는 alt 속성, 반응형으로 만들기 위한 srcset , 지연 loading 를 위한 로드 등 더 빠르고 액세스 가능한 웹 사이트를 만드는 여러 가지 멋진 속성이 포함되어 있습니다.

이미지 자체를 왜곡하지 않고 특정 치수에 맞도록 이미지의 크기를 조정하고 자르려면 background-size 및 background-position 으로 작동하는 object-fit 및 object-position CSS 속성을 사용하기만 하면 됩니다. 하다:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

이전 규칙을 img 태그에 적용하는 경우:

 <img class="custom-size" src="…/image.jpg" />

이것은 당신이 얻는 결과입니다:

그게 바로 당신이 관심을 갖고 있었던 것입니다. 그렇지 않나요?

이 속성에 대해 더 알고 싶다면 여기에 필요한 모든 정보가 있는 링크가 있습니다.

미디어 쿼리를 사용한 적응형 디자인

미디어 쿼리는 방문자가 웹에 액세스하는 장치 또는 애플리케이션의 특성을 기반으로 웹사이트에 CSS 규칙을 추가할 수 있는 메커니즘입니다. 미디어 쿼리는 반응형 웹사이트 구축의 기초이기 때문에 어느 정도 익숙할 거라 확신합니다. 하지만 이것으로 할 수 있는 일이 훨씬 더 많습니다!

클래식 미디어 쿼리

CSS 스타일시트에서 미디어 쿼리를 사용하는 것은 @media 키워드를 두 가지와 함께 추가하는 것만큼 쉽습니다. 한편으로는 미디어 쿼리가 활성화될 때를 설명하는 조건이고 다른 한편으로는 다음을 수행해야 하는 CSS 규칙 세트입니다. 조건이 충족되면 로드됩니다. 이것이 바로 미디어 쿼리가 반응형 디자인을 구축하는 기반이 되는 이유입니다. 방문자의 브라우저 width 에 따라 한 가지 또는 다른 규칙 집합을 적용하기만 하면 됩니다.

예를 들어 다음 단락의 사이드바를 변경하려고 한다고 가정해 보겠습니다.

Lorem ipsum dolor sitmet, consectetur adipiscing elit. 베란다 위의 사자는 때론 부드러우면서도 떨리는 야외 요소입니다. 그러나 열 스트레스라고 불리는 기업가의 필요성. 전자레인지를 예약했지만 내 문은 항상 또는 때때로 대량 작성자입니다. Android 및 Nunc sodales interdum, tincidunt erat ac, tincidunt elit. 그러나 ultricies ac, arcu metus Sed congue. 편의상 두려움 레오 강화 단백질. Tellus orci, tempor id egestas nec, 최소한 몇 명의 플레이어를 얻으십시오.

브라우저의 너비에 따라 무지개의 모든 색상을 사용하도록 합니다. CSS를 통해 이 동작을 수행하는 방법은 다음과 같습니다.

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

아주 쉽죠? 브라우저의 너비가 특정 임계값을 초과할 때마다 다른 색상을 적용하기만 하면 됩니다. 화면이 커질수록 "새로운" 규칙이 적용되기 때문에 모바일 우선 접근 방식을 사용하여 이를 구현합니다. 창의 너비를 변경하면 결과가 표시됩니다.

CSS로 다크 모드를 구현하는 방법

이제 모바일과 데스크톱 모두에서 다크 모드가 유행하고 있습니다. 사용자가 다크 모드를 선호하는지 확인하는 미디어 쿼리가 있다는 것을 알고 계셨습니까? 미디어 쿼리 prefers-color-scheme 을 사용하면 사용자가 light 색 구성표를 선호하는지 dark 색 구성표를 선호하는지 확인할 수 있습니다. 즉, 이제 모든 방문자의 선호도와 일치하도록 두 가지 버전의 웹사이트를 구축할 수 있습니다.

예를 들어 다음 HTML 스니펫을 고려하십시오.

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

다음 CSS 규칙:

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

설정에 따라 이전 HTML 스니펫의 "동적" 부분이 밝은 테마 또는 어두운 테마처럼 보이는 것을 볼 수 있습니다.

꽤 멋지죠? 그리고 간단합니다!

미디어 쿼리에 대한 기타 흥미로운 사용 사례

사용할 수 있는 미디어 쿼리가 많이 있지만(여기에 전체 목록이 있습니다) 특히 하나에 집중하고 싶습니다. 구체적으로 페이지가 브라우저에 표시되는지 아니면 인쇄될지 여부에 따라 다른 스타일을 적용하는 방법을 설명하고 싶습니다. 다음과 같이 미디어 쿼리에 print 또는 screen 키워드를 사용하기만 하면 됩니다.

 @media print { … } @media screen { … }

또는 각 사용 사례에 대해 하나씩 두 개의 개별 CSS 파일을 만들고 link 태그의 media 속성을 사용하여 HTML에 포함합니다.

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

흥미로운 점은 사이트를 인쇄용으로 설계된 콘텐츠로 변환하는 스타일시트를 만들 수 있다는 것입니다. 따라서 예를 들어 인쇄된 버전(예: 메뉴 또는 양식)에서 의미가 없는 웹의 동적 부분을 숨길 수 있습니다. 또는 예를 들어 링크의 대상 URL과 같이 인쇄할 때 손실된 일부 항목이 표시되도록 할 수도 있습니다.

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

결과는 다음과 같습니다.

Lorem ipsum dolor sitmet, consectetur adipiscing elit. turpis interdum의 Vestibulum mollis leo, pharetra velit elementum. Nam Eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac 돌로 메투스. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

CSS 변수

마지막으로 또 다른 놀라운 CSS 기능인 CSS 사용자 정의 속성(CSS 변수라고도 함)에 대해 이야기해 보겠습니다. 복잡한 웹 사이트에는 매우 많은 양의 CSS가 있으며 동일한 값이 계속해서 반복되는 것은 매우 일반적입니다. 예를 들어 색상 팔레트, 테두리, 패딩 등이 여기저기서 사용됩니다. 글쎄요, CSS 변수는 이러한 복잡성을 단순화합니다. 그리고 다크 모드를 쉽게 구현하는 데 매우 유용합니다!

CSS 변수는 여러분이 생각하는 바로 그 것입니다. 의미 있는 이름 뒤에 특정 CSS 값을 저장하고 재사용하는 방법입니다. --main-text-color 가 #333 보다 훨씬 이해하기 쉽죠?

사용자 정의 속성 선언은 이중 하이픈( -- )으로 시작하는 사용자 정의 속성 이름과 유효한 CSS 값이 될 수 있는 속성 값을 사용하여 수행됩니다. 다른 속성과 마찬가지로 이것은 다음과 같이 규칙 세트 내부에 작성됩니다.

 element { --main-color: red; --main-padding: 2em 1em; }

CSS 변수를 정의한 규칙 블록에서 사용하는 선택기가 범위를 결정합니다. 즉, div.banner 규칙 내에서 변수를 정의하면 해당 변수는 해당 범위에서만 사용할 수 있습니다. 그러나 가장 일반적인 것은 의사 클래스 :root 를 사용하여 전역 범위에서 변수를 만드는 것입니다.

 :root { --main-color: red; --main-padding: 2em 1em; }

CSS 변수를 사용하려면 var 함수 안에 이름을 지정하기만 하면 됩니다.

 p { color: var(--main-color); padding: var(--main-padding); }

CSS는 당신을 돕기 위해 여기 있습니다

웹 페이지의 HTML 구조는 집의 기초와 같습니다. 건전한 것을 구축하려면 견고한 기초가 필요합니다. 웹 페이지를 생성할 때 의미적으로 정확하고 깨끗한 HTML 트리를 사용해야 합니다. 이렇게 하면 모든 방문자의 모든 브라우저에서 작동하는 페이지가 생성되고 그 위에 CSS 트릭을 적용하는 것이 간단하고 효과적입니다.

오늘 포스팅이 마음에 드셨으면 좋겠습니다. 하셨다면 친구들과 공유해보세요

Unsplash의 William Daigneault의 추천 이미지.