RBB UI 설정

테마 설정

메인 컬러

텍스트 컬러

텍스트 크기

7.2rem
5.6rem
4.4rem
3.2rem
2.4rem
1.6rem
1.4rem
1.2rem

간격 (Padding)

2rem
1.4rem
1rem

라운딩 (Border Radius)

10rem
2rem
0.4rem

폰트 굵기 (Font Weight)

700
500
400

투명도 (Opacity)

1
0.5

CSS 추출


      

    


    
    

      

        

          
          

            
css :root 빠른 디자인 Rbb-UI 


            

              
Typography & Buttons


            


            
다양한 크기의 제목과 본문 텍스트, 그리고 버튼 스타일을 제공합니다.


            
제목1 (H1) - Main Color

            
제목2 (H2) - Section Title

            
제목3 (H3) - Subsection Title


            
일반 문장입니다. 본문 텍스트는 가독성을 위해 적절한 줄 간격과 자간을 가지고 있습니다. 긴 문장을 작성했을 때 자연스럽게 줄바꿈이 일어나며, 모바일 환경에서도 읽기 편하도록 최적화되어
              있습니다.


            

              
인용구(Blockquote) 예시입니다. 중요한 내용을 강조하거나 외부 출처를 인용할 때 사용합니다.

            


            

            

              칩 버튼
              활성화
              
            


            

              
              
            


            

              
              
              
            

            

              
              
              
            

            
            

              
            


            

              
              
              
            

          


          
          

            
Navigation

            

              

              
              

                

                  
                  
                

                
              

              

            

          


        


        
        

          
Modal & Alerts

          

            
            
            
          


          
          
        


        
        

          

            
Form Elements

            
          

          

            
            

            
            

              info
              이것은 정보 알림입니다.
            

            

              check_circle
              작업이 성공적으로 완료되었습니다.
            

            

              warning
              주의가 필요한 작업입니다.
            

            

              error
              오류가 발생했습니다.
            


            
            

              
Badges

              New
              Update
              Beta
              Hot
              Outline
              
            


            
            

              
Accordion

              

                

                  

                    아코디언 아이템 #1
                    expand_more
                  

                  

                    
아코디언 내용입니다. 여기에 원하는 콘텐츠를 넣을 수 있습니다.

                  

                

                

                  

                    아코디언 아이템 #2
                    expand_more
                  

                  

                    
두 번째 아이템의 내용입니다.

                  

                

                

                  

                    아코디언 아이템 #3
                    expand_more
                  

                  

                    
세 번째 아이템의 내용입니다.

                  

                

              

            


            
            

              
Steps

              

                

                  
check

                  
Step 1

                

                

                  
2

                  
Step 2

                

                

                  
3

                  
Step 3

                

              

            


            
            

              
Data Table

              

                

                  
                    

                      ID
                      Name
                      Status
                      Action
                    

                  
                  
                    

                      1
                      Project A
                      Active
                      
                        
                      
                    

                    

                      2
                      Project B
                      Pending
                      
                        
                      
                    

                    

                      3
                      Project C
                      Done
                      
                        
                      
                    

                  
                

              


              
            


            

              
              
            


            

              
              

                

                  선택해주세요
                

                
    
                  
  • 선택해주세요
    • 
                  
  • 옵션1
    • 
                  
  • 옵션2
    • 
                  
  • 옵션3
    • 
                

                
              


              
            


            

              
              
            


            

              전화번호
              
            


            

              
              
            


            

              
            


            

              
            


            

              
    
                
  • 
                
    • 
                
    • 
                
    • 
              

            


            

              
    
                
    • 
                
    • 
                
    • 
              

            


            

              
                
                
              
              토글 스위치
            

          

        


        
        

          
카드 레이아웃

          

            

              
              카드 제목
              카드 설명 텍스트
            

            

              
              카드 제목
              카드 설명 텍스트
            

          


          
웹진 레이아웃

          

            

              
              

                웹진 스타일 제목
                웹진 스타일의 설명 텍스트입니다.
              

            

            

              
              

                웹진 스타일 제목
                웹진 스타일의 설명 텍스트입니다.
              

            

          


          
갤러리 레이아웃

          

            

              
              

                갤러리
                설명
              

            

            

              
              

                갤러리
                설명
              

            

            

              
              

                갤러리
                설명