고급 레이아웃 및 효과를 위한 8가지 CSS 팁

웹 프런트 엔드 개발 영역은 지난 몇 년 동안 상당한 발전을 이루었습니다. 그러나 사용자가 보는 웹 프론트엔드는 여전히 동일합니다. CSS로 스타일이 지정된 HTML 마크업입니다.

많은 레이아웃 문제는 처음에는 간단해 보이지만 종종 까다로울 수 있습니다. 특정 CSS 기능이 작동하는 방식에 대한 광범위한 지식 없이는 이러한 고급 레이아웃을 CSS만으로 달성하는 것이 불가능해 보일 수 있습니다.

이 기사에서는 잘 알려지지 않은 CSS 기능을 활용하여 이러한 고급 레이아웃 및 효과 중 일부를 구현하는 8가지 전문 CSS 팁과 트릭을 찾을 수 있습니다.

1. CSS 형제 선택자 최대화

문제: 형제 선택자를 사용하지 않아 최적화 기회를 놓치고 있습니다.

해결책: 의미가 있을 때마다 형제 선택자를 사용하십시오. 항목 목록으로 작업하고 첫 번째 항목과 마지막 항목을 다르게 처리해야 할 때마다 첫 번째 본능은 :first-child 및 :last-child 의사 CSS 선택기를 사용하는 것일 수 있습니다.

예를 들어 CSS 전용 햄버거 메뉴 아이콘을 만들 때:

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Maximizing CSS Sibling Selectors 1을 참조하십시오.

이것은 의미가 있습니다. 마지막 막대를 제외하고 각 막대에는 여백 하단이 있습니다.

그러나 인접한 형제 선택자(+)를 통해서도 동일한 효과가 가능합니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Maximizing CSS Sibling Selectors 2를 참조하십시오.

이것은 또한 의미가 있습니다. 첫 번째 막대 이후의 모든 항목에는 상단 여백이 있습니다. 이 CSS 트릭은 몇 개의 추가 바이트를 절약할 뿐만 아니라(중간 크기의 프로젝트에 쉽게 추가할 수 있음) 가능성의 세계를 열어줍니다.

다음 카드 목록을 고려하십시오.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Maximizing CSS Sibling Selectors 3을 참조하십시오.

각 항목에는 제목과 텍스트가 있으며 후자는 기본적으로 숨겨져 있습니다. 활성 카드의 텍스트( .active 클래스 포함)와 그 뒤에 오는 카드만 표시하려면 CSS만 사용하여 빠르게 수행할 수 있습니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Maximizing CSS Sibling Selectors 4를 참조하십시오.

약간의 JavaScript를 사용하면 이 작업도 상호 작용할 수 있습니다.

그러나 이 모든 것을 JavaScript에만 의존하면 다음과 같은 스크립트가 생성됩니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Maximizing CSS Sibling Selectors 5를 참조하십시오.

jQuery를 종속성으로 포함하면 다소 짧은 코드를 가질 수 있습니다.

2. 일관된 HTML 요소 크기 조정

문제: HTML 요소의 크기가 브라우저마다 다릅니다.

솔루션: 모든 요소 box-sizing 을 border-box 로 설정하십시오. 오랫동안 웹 개발자에게 골칫거리였던 Internet Explorer는 한 가지 일을 제대로 수행했습니다. 바로 상자 크기를 적절하게 조정했다는 것입니다.

다른 브라우저는 HTML 요소의 너비를 계산할 때 내용만 보고 나머지는 모두 잉여로 처리합니다. width: 200px div, 20px 20 2px 및 테두리 2픽셀은 너비가 242픽셀로 렌더링됩니다.

Internet Explorer는 패딩과 테두리를 너비의 일부로 간주합니다. 여기서 위의 div는 너비가 200픽셀입니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen CSS Box Model Demo 1을 참조하십시오.

일단 익숙해지면 표준을 따르지 않더라도 후자의 접근 방식이 더 논리적이라는 것을 알게 될 것입니다.

너비가 200px라고 말하면 젠장, 20px의 패딩이 있어도 200px 너비의 상자가 될 것입니다.

어쨌든 다음 CSS는 모든 브라우저에서 요소 크기(및 레이아웃)를 일관되게 유지합니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen CSS Box Model Demo 2를 참조하십시오.

두 번째 CSS 선택기 세트는 테두리 상자를 염두에 두지 않고 스타일이 지정된 HTML 요소를 레이아웃 중단으로부터 보호합니다.

box-sizing: border-box 는 매우 유용하여 Sanitize.css라는 비교적 인기 있는 CSS 프레임워크의 일부입니다.

3. 동적 높이 요소

문제: HTML 요소의 높이를 너비에 비례하게 유지합니다.

해결책: 세로 패딩을 높이 대신 사용하십시오.

HTML 요소의 높이가 항상 CSS 너비와 일치하기를 원한다고 가정해 보겠습니다. height: 100% 는 콘텐츠 높이와 일치하는 요소의 기본 동작을 변경하지 않습니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Dynamic Height Elements 1을 참조하십시오.

대답은 높이를 0으로 설정하고 padding-top 또는 padding-bottom을 사용하여 대신 .container 의 실제 높이를 설정하는 것입니다. 두 속성 중 하나는 요소 너비의 백분율이 될 수 있습니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Dynamic Height Elements 2를 참조하십시오.

이제 .container 는 너비에 관계없이 정사각형으로 유지됩니다. overflow: hidden 은 긴 콘텐츠가 이 비율을 깨는 것을 방지합니다.

이 기술은 약간의 수정을 가하면 모든 크기에서 종횡비를 유지하는 비디오 임베딩을 만드는 데 유용합니다. Embed를 .container 의 상단 및 left through position: absolute 와 정렬하기만 하면 됩니다. .container .container padding-bottom 을 변경하여 비디오의 측면과 일치시킵니다. 비율.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Dynamic Height Elements 3를 참조하십시오.

position: relative for .container 는 iframe 절대 위치 지정이 제대로 작동하도록 합니다. 새로운 padding-bottom 은 가로 세로 비율의 높이를 너비로 나눈 값에 100을 곱한 것입니다. 예를 들어 비디오 삽입의 가로 세로 비율이 16:9인 경우 padding-bottom 비율은 9를 16으로 나눈 값(.5625)이어야 합니다. 100(56.25)을 곱합니다.

4. 동적 너비 요소

문제: HTML 요소의 너비를 높이에 비례하게 유지합니다.

솔루션: 요소 크기의 기준으로 font-size를 사용합니다.

이제 반대 또는 높이에 따라 너비가 변경되는 컨테이너는 어떻습니까? 이번에는 구조를 위한 font-size 입니다. 너비와 높이는 em 단위가 될 수 있음을 기억하십시오. 즉, 요소의 font-size 비율이 될 수 있습니다.

font-size 가 40px, 너비가 2em , 높이가 1em 인 요소는 너비가 80픽셀(40 x 2)이고 높이가 40픽셀(40 x 1)입니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Dynamic Width Elements를 참조하십시오.

.container 의 높이를 변경하고 싶습니까? 글꼴 크기 변경.

유일한 주의 사항은 CSS만으로 요소의 글꼴 크기를 상위 요소의 높이와 자동으로 일치시키는 것은 불가능하다는 것입니다. 그러나 이 기술을 사용하면 Javascript 크기 조정 스크립트를 다음에서 잘라낼 수 있습니다.

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

에게:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. 동적 콘텐츠의 수직 센터링

문제: HTML 요소(높이를 알 수 없음)를 다른 요소 내부의 세로 중앙에 유지합니다.

해결책: 외부 요소를 display: table 로 설정한 다음 내부 요소를 CSS table-cell 로 변환합니다. 또는 CSS Flexbox를 사용하십시오.

line-height 를 사용하여 한 줄의 텍스트를 세로로 가운데에 맞출 수 있습니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 동적 콘텐츠 1의 펜 수직 센터링을 참조하십시오.

여러 줄의 텍스트 또는 텍스트가 아닌 콘텐츠의 경우 CSS 테이블이 답입니다. .container 의 display 를 table 로 설정한 다음 display: table-cell 및 vertical-align: middle 을 .text 에 사용하십시오.

CodePen에서 Rico Mossesgeld(@ricotheque)가 작성한 동적 콘텐츠 2의 펜 수직 센터링을 참조하십시오.

이 CSS 트릭을 margin: 0 auto 의 수직적 등가물로 생각하십시오. Internet Explorer의 버그 지원이 허용되는 경우 CSS3의 Flexbox가 이 기술에 대한 훌륭한 대안입니다.

CodePen에서 Rico Mossesgeld(@ricotheque)가 작성한 동적 콘텐츠 3의 펜 수직 센터링을 참조하십시오.

6. 같은 높이 열

문제: 열을 같은 높이로 유지합니다.

솔루션: 각 열에 대해 큰 음수 margin-bottom 값을 사용하고 동일하게 큰 padding-bottom 으로 이를 취소합니다. CSS 테이블과 Flexbox도 작동합니다.

float 또는 display: inline-block 을 사용하면 CSS를 통해 나란히 열을 만들 수 있습니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Same-Height Columns 1을 참조하십시오.

box-sizing: border-box 를 사용하여 .cols 의 크기를 적절하게 조정하는 것을 참고하세요. 위의 일관된 HTML 요소 크기 조정을 참조하십시오.

첫 번째 열과 마지막 열의 경계가 완전히 내려가지 않습니다. 그들은 더 높은 두 번째 열의 높이와 일치하지 않습니다. 이 문제를 해결하려면 overflow: hidden 을 .row 에 추가하세요. 그런 다음 각 .col 의 margin-bottom 을 99999px로 설정하고 padding-bottom 을 100009px로 설정합니다(99999px + .col 의 다른 면에 적용된 10px 패딩).

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Same-Height Columns 2를 참조하십시오.

보다 직접적인 대안은 Flexbox입니다. 다시 말하지만, Internet Explorer 지원이 필수가 아닌 경우에만 이것을 사용하십시오.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Same-Height Columns 3을 참조하십시오.

더 나은 브라우저 지원을 제공하는 또 다른 대안: CSS 테이블( vertical-align: middle 없음).

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Same-Height Columns 4를 참조하십시오.

7. 상자를 넘어서

문제: 상자와 직선이 너무 진부합니다.

솔루션: transform: rotate(x) 또는 border-radius 사용합니다.

마케팅 또는 브로셔 웹 사이트에서 일반적인 일련의 창을 가져옵니다. 단일 지점이 있는 수직 슬라이드 스택입니다. 마크업과 CSS는 다음과 같을 수 있습니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 상자 1 너머의 펜을 참조하십시오.

마크업을 훨씬 더 복잡하게 만드는 대가로 이러한 상자 모양의 창을 평행 사변형 스택으로 바꿀 수 있습니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Looking Beyond the Box 2를 참조하십시오.

여기에서 많은 일이 일어나고 있습니다.

각 창의 높이는 .pane-container에 의해 제어됩니다. 음수 margin-bottom은 창이 잘 쌓이도록 합니다.

• .pane-background , 자식 .mask-box 및 손자 .image 는 모두 position: absolute 로 설정됩니다. 각 요소는 top , left , bottom , right 값이 다릅니다. 이렇게 하면 아래에 설명된 회전으로 인해 생성된 간격이 제거됩니다.
• .mask-box 는 2도(시계 반대 방향) 회전합니다.
• .image 는 .mask-box 의 회전에 대응하기 위해 -2도 회전됩니다.
• .mask-box 의 오버플로가 숨겨져 회전된 상단과 하단이 .image 요소를 잘립니다.

관련 메모에서 이미지를 원이나 타원으로 바꾸는 것은 매우 간단합니다. img 요소에 border-radius: 100% 를 적용하기만 하면 됩니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Looking Beyond the Box 3를 참조하십시오.

이와 같은 실시간 CSS 수정은 콘텐츠를 웹사이트에 게시하기 전에 준비해야 할 필요성을 줄여줍니다. Photoshop에서 사진에 원형 마스크를 적용하는 대신 웹 개발자는 원본 사진을 변경하지 않고 CSS를 통해 동일한 효과를 적용할 수 있습니다.

추가 이점은 콘텐츠를 그대로 두고 웹사이트의 현재 디자인에 의존하지 않음으로써 향후 재설계 또는 개조가 용이하다는 것입니다.

8. 야간 모드

문제: 새 스타일시트를 만들지 않고 야간 모드를 구현합니다.

해결책: CSS 필터를 사용하십시오.

일부 앱에는 어두운 곳에서 더 나은 가독성을 위해 인터페이스가 어두워지는 야간 모드가 있습니다. 최신 브라우저에서 CSS 필터는 Photoshop과 같은 효과를 적용하여 동일한 효과를 만들 수 있습니다.

유용한 CSS 필터는 invert 입니다. 이것은 (놀랍지 않게) 요소 내부의 모든 색상을 반전시킵니다. 따라서 새로운 스타일 세트를 만들고 적용할 필요가 없습니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Night Mode 1을 참조하십시오.

검정색 텍스트와 흰색 배경에 이 필터를 사용하면 야간 모드가 시뮬레이션됩니다. !important 는 이러한 새 색상이 기존 스타일을 재정의하도록 합니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Night Mode 2를 참조하십시오.

불행히도, 이미지의 색상이 다른 모든 것과 반전되었기 때문에 이미지가 이상해 보입니다. 좋은 소식은 여러 필터를 동시에 적용할 수 있다는 것입니다. 색조 회전 필터를 추가하면 이미지와 기타 시각적 콘텐츠가 다시 정상으로 전환됩니다.

CodePen에서 Rico Mossesgeld(@ricotheque)의 Pen Night Mode 3를 참조하십시오.

왜 작동합니까? hue-rotate(180deg) 는 invert(1) 과 동일한 효과를 생성합니다. 다음은 JavaScript 기반 버튼을 통해 전환할 때 야간 모드 CSS가 작동하는 방식에 대한 데모입니다.

CSS를 최대한 활용

브라우저나 웹사이트 구축 방식이 미래에 극적으로 바뀌지 않는 한 CSS에 대한 좋은 지식은 웹 개발 분야에서 기본적인 기술로 남을 것입니다.

이러한 CSS 팁은 모두 공통점이 있습니다. CSS를 스타일 지정 언어로 최대화하여 브라우저 자체에서 무거운 작업을 수행할 수 있도록 합니다. 그리고 올바르게 수행되면 항상 더 나은 결과, 더 나은 성능, 더 나은 사용자 경험을 얻을 수 있습니다.

아래 댓글 섹션에서 흥미롭고 유용하다고 생각하는 CSS 트릭이 있으면 알려주십시오.