Header

Header는 섹션이나 콘텐츠의 제목·계층을 나타내는 요소예요. 페이지 헤더, 콘텐츠 헤더, 아이콘 헤더, 서브헤더 등 다양한 유형과 첨부·색상 변형을 지원해요.

출처: 문서

본문

Types (유형)

Page Headers (페이지 헤더)

헤더는 페이지 맥락에서 섹션의 계층을 보여주도록 방향을 정할 수 있어요.

Page headings are sized using rem and are not affected by surrounding content size.
    First header (첫 번째 헤더)
    
    Second header (두 번째 헤더)
    
    Third header (세 번째 헤더)
    
    
    
    Fifth header (다섯 번째 헤더)

페이지 제목은 rem으로 크기가 정해지며 주변 콘텐츠 크기의 영향을 받지 않아요.

Content Headers (콘텐츠 헤더)

헤더는 주변 콘텐츠 맥락에서 섹션의 중요도를 보여주도록 방향을 정할 수 있어요.

Content headings are sized with em and are based on the font-size of their container.
    
    
      Huge Header (휴즈 헤더)
      
      Large Header (라지 헤더)
      
      Medium Header (미디엄 헤더)
      
      Small Header (스몰 헤더)
      
      Tiny Header (타이니 헤더)

콘텐츠 헤더는 em으로 크기가 정해지며 컨테이너의 font-size에 기반해요.

Icon Headers (아이콘 헤더)

헤더는 아이콘을 강조하도록 포맷할 수 있어요.

Account Settings (계정 설정)
        Manage your account settings and set e-mail preferences. (계정 설정을 관리하고 이메일 환경설정을 지정하세요.)

Friends (친구)

Sub Headers (서브 헤더)

헤더는 더 작거나 덜 강조된 콘텐츠를 라벨링하도록 포맷할 수 있어요.

Price (가격)
    
    
    $10.99

Molly
          Coordinator (코디네이터)
        
        
        
          Elyse
          Developer (개발자)
        
        
        
          Eve
          Project Manager (프로젝트 매니저)

Content (콘텐츠)

Image (이미지)

헤더는 이미지를 포함할 수 있어요.

Learn More (더 알아보기)

Patrick

Plug-ins (플러그인)
        Check out our plug-in marketplace (우리 플러그인 마켓플레이스를 확인하세요)

Icon (아이콘)

헤더는 아이콘을 포함할 수 있어요.

Uptime Guarantee (가동 시간 보장)

Account Settings (계정 설정)
        Manage your preferences (환경설정 관리)

Subheader (서브헤더)

헤더는 서브헤더를 포함할 수 있어요.

Account Settings (계정 설정)
      Manage your account settings and set e-mail preferences. (계정 설정을 관리하고 이메일 환경설정을 지정하세요.)

H4 (H4)

  Sub Header (서브 헤더)

H1
      Sub Header (서브 헤더)
    
    
      H2
      Sub Header (서브 헤더)
    
    
      H3
      Sub Header (서브 헤더)
    
    
    
      H5
      Sub Header (서브 헤더)

States (상태)

Disabled (비활성)

헤더는 비활성 상태임을 보여줄 수 있어요.

Disabled Header (비활성 헤더)

Variations (변형)

Dividing (구분)

헤더는 아래 콘텐츠로부터 자신을 구분하도록 포맷할 수 있어요.

Dividing Header (구분 헤더)

Block (블록)

헤더는 콘텐츠 블록 안에 나타나도록 포맷할 수 있어요.

Block Header (블록 헤더)

Attached (부착)

헤더는 세그먼트 같은 다른 콘텐츠에 부착될 수 있어요.

Top Attached (상단 부착)
    
    
      
    
    
      Attached (부착)
    
    
      
    
    
      Bottom Attached (하단 부착)

Seamless attached (이음새 없는 부착)

상단 헤더는 관련 부착 테두리 없이 이음새 없이 부착될 수 있어요.

Seamless Top Attached (이음새 없는 상단 부착)

Seamless Bottom Attached (이음새 없는 하단 부착)

Floating (플로팅)

헤더는 다른 콘텐츠의 왼쪽이나 오른쪽에 놓일 수 있어요.

Go Forward (앞으로)
      
      
        Go Back (뒤로)

Text Alignment (텍스트 정렬)

헤더는 텍스트를 한쪽으로 정렬할 수 있어요.

Right (오른쪽)
      
      
        Left (왼쪽)
      
      
        This should take up the full width even if only one line (한 줄이어도 전체 너비를 차지해야 해요)
      
      
        Center (가운데)

Colored (색상)

헤더는 다른 색상으로 포맷할 수 있어요.

Inverted (반전)

헤더는 대비를 위해 색상이 반전될 수 있어요.

더 알아보기 (Learn more)

Header는 콘텐츠의 제목과 계층을 만드는 기본 요소예요. 페이지 수준에서는 rem 기반 크기를, 콘텐츠 안에서는 em 기반 크기를 사용해 크기 체계를 유연하게 잡을 수 있어요. attached, dividing, block 변형으로 배치를 다듬어 보세요.