Rail

Rail은 웹사이트의 메인 뷰포트 바깥쪽에 선택적인 보조 콘텐츠를 표시하는 요소예요. 블로그 글이나 사용자 프로필처럼 긴 단일 컬럼 콘텐츠 옆에 사이드 콘텐츠를 붙일 때 자주 쓰여요.

출처: Rail

본문

소개

언제 사용하나요?

Rail은 웹사이트의 메인 뷰포트 바깥쪽에 선택적으로 딸려 나오는 보조 콘텐츠를 표시해요. 사이트들은 often sticky 콘텐츠를 가진 rail을 활용해 페이지를 스크롤할 때 추가적이고 선택적인 콘텐츠를 뷰포트에 고정시키곤 해요.

Fomantic의 기본 rail은 300px 너비로, 많은 일반적인 광고 단위 크기를 수용할 만큼 크고, 서브 내비게이션 메뉴나 눈에 띄는 콜투액션을 넣을 만큼 넉넉해요.

크기 조절

Rail이 들어간 콘텐츠는 사용자 브라우저의 가로 너비를 초과하지 않도록 사이트 콘텐츠에 맞는 임의의 중단점(breakpoint)이 필요한 경우가 많아요.

Rail은 일반적으로 블로그 포스트, 기사, 사용자 프로필 같은 긴 단일 컬럼 컨테이너 옆에서 사용돼요. 일반적으로 메인 텍스트 컨테이너 너비는 가독성을 위한 줄 길이를 최적화하기 위해 글꼴 크기에 따라 약 600-800px 사이로 설정하는 게 좋아요.

이런 구성은 대부분의 태블릿 브라우저가 rail 하나만 수용할 수 있게 해요. 울트라북이나 저해상도 컴퓨터는 작은 rail 두 개, 더 큰 모니터는 보통 크기의 rail 두 개를 수용할 수 있어요. 이 구현의 세부 사항은 프로젝트에서 여러분이 결정하게 돼요.

다음 예시들은 중단점을 사용하지 않아서 작은 화면에서는 일부 rail 콘텐츠가 브라우저 뷰포트 밖으로 나갈 수 있어요.

Types

Rail

rail은 컨테이너의 왼쪽이나 오른쪽에 표시될 수 있어요

Left Rail Content
        
      
      
        
          Right Rail Content

Internal

rail은 컨테이너의 안쪽에 붙을 수 있어요

Left Rail Content
        
      
      
        
          Right Rail Content

Dividing

rail은 자신과 컨테이너 사이에 구분선을 만들 수 있어요

Left Rail Content
        
      
      
        
          Right Rail Content

Variations

Attached

rail은 메인 뷰포트에 붙어서 나타날 수 있어요

Left Rail Content
        
      
      
        
          Right Rail Content

Left Rail Content
        
      
      
        
          Right Rail Content

Close

rail은 메인 뷰포트에 더 가깝게 나타날 수 있어요

Left Rail Content
        
      
      
        
          Right Rail Content

Left Rail Content
        
      
      
        
          Right Rail Content

Size

rail은 다양한 크기를 가질 수 있어요

더 알아보기

Rail은 메인 콘텐츠 옆에 보조 콘텐츠를 배치할 때 유용해요. 사이드 콘텐츠를 스크롤 중에도 고정시키고 싶다면 Sticky 모듈과 함께 조합해서 사용해보세요.