CSS 및 jQuery로 수직 리듬 유지

콘텐츠

• 레이아웃 유형
• 수직 리듬
• 리듬 지휘
• 이미지 다루기
• jQuery 개선
• 결론

• 필요한 지식: CSS, 기본 jQuery
• 필요: jQuery, CSS, HTML
• 프로젝트 시간: 30 분
• 소스 파일 다운로드

콘텐츠에서 디자인을한다고 가정하면 디자인에 영향을 미치는 첫 번째 결정 있다 유형과 관련된 것입니다. 심지어 아니 사이트에 영향을 미치는 작업을 수행 한 서체를 선택합니다. 문자는 인쇄 및 웹 디자인의 핵심이며 복잡합니다. 잘 사용되는 많은 축적 된 용어, 관행, 규칙 및 기술이 있습니다. 이 문서는 온라인에서 수행하기 어려웠지만 인쇄에서는 일상적인 유형의 한 측면을 관리하는 한 가지 기술에 관한 것입니다. 일관된 수직 리듬을 유지하여 전문적인 레이아웃을 얻을 수 있습니다.

레이아웃 유형

인쇄에서 상당한 양의 텍스트가있는 항목의 경우 디자인의 기초가 기준선 그리드 일 가능성이 높습니다. 페이지에 구조를 가져오고 콘텐츠의 수직 흐름을 안내하는 데 사용됩니다. 거의 모든 것이 해당 기준선 그리드를 기준으로 배치됩니다. 용어를 모르더라도 걱정하지 마십시오. 아무도 기준선이나 기준선 그리드에 익숙하지 않습니다. 당신은 이미 그들에 대해 알고 있습니다. 의심 할 여지없이 줄이 그어진 종이에 글을 썼을 때 학교를 떠올려보십시오. 글을 썼을 때 편지의 바닥을 종이의 각 줄에 깔끔하게 배치했습니다. 작동중인 기준선 및 기준선 그리드. 기준선은 글자 하단이 정렬되는 가상의 선입니다.지금이 기사를 살펴보면 실제로 선이 없더라도 기준선을 "볼"것입니다. 당신의 두뇌는 당신을 위해 거기에 하나를두기 때문에 문장을 읽을 수 있습니다. 줄이 그어진 종이에 선? 베이스 라인 그리드입니다. 똑바로하여 문장이 똑 바르고 일정한 간격으로 설정하여 텍스트가 규칙적인 수직 리듬을 갖도록합니다.

수직 리듬

수직 리듬은 페이지 텍스트의 위치를 ​​나타냅니다. 텍스트 블록을 스캔하고 읽는 능력에 영향을 미치는 요소 중 하나이며 감정적 반응을 알리는 데 도움이됩니다. 텍스트가 강한 수직 리듬과 좋은 간격을 가질 때 우리는 그것이 전문적이고, 고려되고, 권위 있고, 읽기에 편하다고 느낍니다. 텍스트의 리듬과 간격이 좋지 않을 때 우리는 덜 고려되고 덜 전문적이며 종종 읽기가 더 어렵다고 느낍니다. 수직 리듬은 한 부분의 유용성과 한 부분의 미학입니다.

리듬 지휘

불행히도 웹은 활자에 관한 몇 가지 기본 관행을 제정 할 수있는 능력 측면에서 여전히 인쇄의 형편없는 사촌입니다. 웹에서는 인쇄 디자이너 (또는 학교의 어린이)와 같은 방식으로 기준선 격자를 사용할 수 없습니다. 텍스트의 기준선을 문서의 기준선 격자에 맞출 수 없습니다. CSS에는 기준선 그리드의 개념이 없습니다. 따라서 텍스트는 기준선 격자 선에 정확히 배치되지 않습니다. 대신 선 사이의 간격에서 수직으로 중앙에 배치됩니다. 웹이 할 수있는 최선입니다.

예제 문서로 실용화 해 보겠습니다. 먼저, 가시적 인 기준선 격자를 만들어 비트를 설정합니다. 이를 위해 반복되는 배경 이미지를 사용하여 22px 간격으로 일정한 수평선을 그립니다.

1. html {배경 : #fff url (baseline_22.png); }

만세, 우리는 줄이 그어진 종이가 있습니다!

아무것도 줄이 없다는 것을 알 수 있습니다. 모든 것을 정렬하기 위해 모든 요소의 아래쪽 가장자리가 해당 선 중 하나에 닿도록합니다. 이를 수행하는 가장 쉬운 방법은 모든 요소가 22의 배수 인 세로 높이 (여백 포함)를 차지하는지 확인하는 것입니다. 다음은이를 수행하는 몇 가지 CSS입니다. REM 장치를 사용하고 있지만 REM을 이해하지 못하는 브라우저를 위해 EM 폴백을 제공합니다. 주석에 PX 장치에 해당하는 내용도 포함하고 있습니다. 아직 REM / EM을 이해하지 못한다면 대신 px 값을 사용할 수 있습니다. 모두 동일합니다.

1. html {/ * font-size : 16px, line-height : 22px * /
2. 글꼴 : 100 % / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. 배경 : #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top 및 bottom 모두 22px * /
6. / * em 폴백 * / margin : 1.375em 0;
7. 여백 : 1.375rem 0; }
8. h1 {/ * font-size는 32px, line-height는 44px입니다. * /
9. / * em fallback * / font-size : 2em;
10. 글꼴 크기 : 2rem; 줄 높이 : 1.375; }
11. h2 {/ * font-size는 26px, line-height는 44px입니다. * /
12. / * em 폴백 * / font-size : 1.75em;
13. 글꼴 크기 : 1.75rem; 라인 높이 : 1.5714285714; }
14. h3, h4, h5, h6 {/ * font-size is 22px, line-height is 22px * /
15. / * em 폴백 * / font-size : 1.375em;
16. 글꼴 크기 : 1.375rem; 줄 높이 : 1; }
17. p, ul, blockquote {/ * 하단 여백은 22px, 줄 높이는 html (22px)에서 상 속됨 * /
18. / * em fallback * / margin-top : 0; margin-bottom : 1.375em;
19. 여백-상단 : 0; margin-bottom : 1.375rem; }

그것이 우리에게주는 것을 살펴 보겠습니다. 모든 텍스트가 어떻게 잘 정렬되는지 확인하십시오. 기준선에 있지는 않지만 예측 가능한 수직 리듬이 있습니다. 멋지고 깔끔합니다.

이미지 다루기

이미지는 상황을 더 복잡하게 만듭니다. 일부를 포함 할 때 우리의 리듬에 어떤 일이 일어나는지 살펴보십시오. 레코드의 스킵처럼 방해합니다. 템포는 맞지만 타이밍이 맞지 않습니다. 정렬이 이동됩니다. 이미지의 높이가 기준선의 배수 인 것 같지 않아 하단 가장자리가 기준선 그리드와 일치하지 않기 때문입니다.

이 문제를 해결하기 위해 우리가해야 할 일은 각 이미지에 여백을 추가하여 여백의 하단이 그리드와 일직선이되도록하는 것입니다. 약간의 자바 스크립트로 자동화하기에 충분히 간단합니다. 기본 계획은 다음과 같습니다.

1. 각 이미지의 높이를 계산합니다.
2. 기준 값이 현재 이미지가 차지하는 세로 공간으로 몇 번이나 분할되는지 확인하고 나머지를 가져옵니다.
3. 기준선에서 나머지를 빼서 이미지에 적용해야하는 오프셋을 제공합니다.
4. 오프셋을 이미지 하단에 여백으로 적용합니다.

이제 이미지의 수직 공간 하단이 기준선 격자에 올바르게 정렬됩니다. 다음은이를 수행하는 jQuery의 기본 기능입니다.

1. $ (window) .bind (’load’, function () {
2. $ ( "img"). each (function () {
3. /* 변수 */
4. var this_img = $ (this);
5. var baseline = 22;
6. var img_height = this_img.height ();
7. / * 수학 * /
8. var 나머지 = parseFloat (img_height % baseline);
9. / * 얼마나 추가해야합니까? * /
10. var offset = parseFloat (baseline-remainder);
11. / * 이미지에 여백 적용 * /
12. this_img.css ( "margin-bottom", offset + "px");
13. });
14. });

왜 window.bind 선? 이미지가로드 될 때까지 기다려야 크기를 안정적으로 얻을 수 있기 때문입니다. 다음은이 기본 코드가 실행되는 예입니다.

jQuery 개선

세상은 거의 간단하지 않습니다. 그래서 여기서 밝혀졌습니다. 우리는 구현 세부 사항을 상당히 다루어야합니다. 우리가 가진 기능에 어떤 문제가 있습니까? 많은:

• 플로팅 또는 블록이 아닌 인라인 이미지로 불쾌한 결과를 생성합니다.
• 일부 이미지, 특히 컨테이너의 이미지에서 버그가있는 것처럼 보입니다.
• 유동적 인 레이아웃은 다루지 않습니다.
• 그다지 재사용 할 수 없습니다.

예제의 웃는 얼굴처럼 인라인 이미지에는이 동작을 적용하지 않습니다. 인라인 이미지는 정렬되어 아래쪽 가장자리가 텍스트와 동일한 기준선에 놓입니다 (아니 기준선 그리드). 즉, 이미지가 수직으로 오프셋됩니다. CSS 나 JS 모두 텍스트 요소의 기준선이 어디에 있는지 알아내는 방법을 제공하지 않으므로 오프셋을 알 수 없습니다. 인라인 이미지를 무시하고 다음으로 설정된 이미지에만 수정 사항을 적용해야합니다. 표시 : 블록 (다행히 플로팅 된 이미지는 자동으로 표시 블록으로 설정됩니다.)

이미지가 컨테이너에있는 경우 컨테이너의 오버플로 설정으로 인해 이미지에 적용된 여백이 숨겨 질 수 있습니다. 또한 이미지의 여백이 아니라 컨테이너 요소에 대한 여백을 원할 수도 있습니다. 이 예에서는 상자 내부의 이미지보다 흰색 상자에 여백을 두는 것이 더 좋으므로 상자에 나타나는 이상한 간격이 생기는 것을 방지 할 수 있습니다.

이 기능은 한 번만 실행되지만 액체 디자인에서는 브라우저의 크기가 조정될 때 이미지의 높이가 변경됩니다 (이를 보려면 예제의 크기를 매우 좁은 것으로 조정 해보십시오). 크기를 조정하면 리듬이 다시 끊어집니다. 브라우저의 크기가 조정 된 후 및 페이지가로드 된 후에도 실행되는 함수가 필요합니다. 유동적 레이아웃은 또한 다른 문제를 야기합니다. 이미지는 분수 픽셀 높이 일 수 있습니다 (예 : 132.34px). 결과적으로 분수 마진을 적용하더라도 예기치 않은 결과가 발생할 수 있습니다 (관심이있는 경우 이유 : trac.webkit.org/wiki/LayoutUnit). 따라서 분수 픽셀로 인한 레이아웃 버그를 피하기 위해 이미지를 전체 픽셀 높이로 마사지해야합니다.

마지막으로, 더 재사용 가능한 기능으로 만들어야합니다. 사실 이론적 솔루션보다 실용적인 솔루션이 필요로하는 복잡성으로 인해 다른 프로젝트에서 재사용 할 수있는 플러그인을 만들어야합니다.

마지막 예에서이 모든 것을 달성하는 코드를 찾을 수 있습니다. 플러그인 JavaScript는 많은 주석이 달려 있으므로 따라 할 수 있습니다. 다음과 같이 호출하여 플러그인을 사용할 수 있습니다.

1. $ (window) .bind (’load’, function () {
2. $ ( "img"). baselineAlign ();
3. });

또는 이미지의 부모로 존재하는 경우 이름이 지정된 컨테이너에 여백을 적용하도록 플러그인에 지시 할 수 있습니다.

1. $ (window) .bind (’load’, function () {
2. $ ( "img"). baselineAlign ({container :’. popup’});
3. });

결론

좋은 수직 리듬을 유지하는 것은 인쇄에서 정기적으로 사용되는 미묘하지만 효과적인 디자인 관행입니다. 이제 기본 원칙을 알고, 기준선 및 기준선 그리드에 대한 실무 지식을 갖추고 있으며 CSS 텍스트 레이아웃과 인쇄의 몇 가지 제한 사항을 알고 있습니다. 또한 이러한 제한 사항을 해결하고 원하는 수직 리듬에 맞게 문서를 작성하는 방법을 알고 있으며 파괴적인 이미지 콘텐츠를 처리하는 데 도움이되는 도구가 있습니다.

CSS가 성숙 해짐에 따라 우리는 인쇄 사촌들과 함께 더 많은 기능을 계속해서 얻습니다. 따라서 양질의 웹 사이트를 만드는 데있어 유형을 잘 이해하는 것이 더 중요해질 것입니다. 일반적으로 활자체에 대해 자세히 알고 싶다면 www.thinkingwithtype.com을 적극 추천합니다 (그리고 함께 사용할 책을 구입). 유형 처리에 대한 CSS 기사를 찾고 있다면 여기와 웹의 다른 곳에서 수많은 기사가 있습니다. 또한 Mark Boulton과 Elliot Jay Stocks의 최신 소식을 접하는 것이 좋습니다. 두 사람 모두 웹 디자인과 관련하여 유형에 대해 자주 이야기합니다.

즐기세요!