아하
생활

생활꿀팁

쌈박한영양148
쌈박한영양148

부트스트랩 외에 디자인 편하게 할 수 있는 css있나요?

부트스트랩은 너무 흔하디 흔해서 다른 걸로 해보고 싶은데

부트스트랩 외에 요즘에 많이 쓰이거나 새로운 스타일시트가 있나요?

    55글자 더 채워주세요.
    4개의 답변이 있어요!
    • 차분한기러기89
      차분한기러기89

      Figma(https://www.figma.com/)

      라는 온라인툴을 사용하시면 원하시는 디자인을

      UI를 빠르게 디자인 해보실 수 있습니다.

      디자인하신 CSS를 다운로드, 스마트폰으로 내보내기도 가능합니다.

      CSS 라이브러리는

      TailwindCSS(https://tailwindcss.com)와 Bulma(https://bulma.io)를 추천드립니다.

    • 눈부신오색조18
      눈부신오색조18

      불라(bulma)

      다운로드 사이트: https://bulma.io/expo/
      3분도 안되는 Bulma 동영상을 보고나면 편리한 사용법에 깜짝 놀라게 될 것이다.
      장점: 가볍고 최소화된 곳/ 부트스트랩이 너무 많은 스타일이 있다면
      불라를 사용
      빠른 개발을 위해 무료 템플릿을 참조할 수도 있다.

      용량: bulma-0.6.1.zip 91K

      UIKit 프레임워크

      다운로드 사이트: https://getuikit.com/

      코코아 터치 프레임워크에 포함된 UIKit

      • UIKit은 iOS 애플리케이션 개발시 사용자에게 보여질 화면을 구성하고 사용자 액션의 대응에 관련된 다양한 요소를 포함

      • UIkit은 iOS 애플리케이션의 사용자 인터페이스를 구현하고 이벤트를 관리하는 프레임워크

      UIKit 프레임워크는 제스처 처리, 애니메이션, 그림 그리기, 이미지 처리, 텍스트 처리, 등 사용자 이벤트 처리를 위한 클래스를 포함한다.
      또한 테이블뷰, 슬라이더, 버튼, 텍스트 필드, 알림창 등 애플리케이션 화면을 구성하는 요소를 포함한다.
      UIKit에서 UIResponder에서 파생된 클래스나, 사용자 인터페이스에 관련된 클래스는 모두 애플리케이션의 메인 쓰레드(혹은 메인 디스패치 큐) 에서만 사용하라.
      UIKit 은 iOS와 tvOS 플랫폼에서 사용한다.

      새롭게 ViewController를 생성하면 상단에 import UIKit이 기본적으로 명시되어 있다.

      semantic ui

      다운로드 사이트: https://semantic-ui.com/elements/button.html

      • semantic UI는 UI Library의 카테고리에 속하는 제품입니다. 이 도구는 잘 만들어진 기본 부품(component)를 제공합니다. 이 부품들을 활용해서 빠르게 서비스를 구현할 수 있고, 필요에 따라서는 개조해서 사용할수도 있습니다.

      element ui

      다운로드 사이트: https://element.eleme.io/

      • 심플한 UI 참조

      pure css

      다운로드 사이트: https://purecss.io/layouts/

      • 레이아웃만 참조

      material design Lite

      다운로드 사이트: https://getmdl.io/

      • 레이아웃만 참조

      기타 프레임워크 순위 및 의견들 정리된 곳

      https://www.slant.co/

    • 꾸준한숲새205
      꾸준한숲새205

      ui컴포넌트 라이브러리를 고민하고 계시군요.

      가장 널리알려진게 bootstrap 과 vuetify 두가지입니다.

      부트스트랩도 유료버전을 검색하시면 새로운 스타일들이 많이 나오긴합니다.

      UI 컴포넌트 라이브러리

      UI 컴포넌트 라이브러리?
      디자인된 UI 구성요소들(버튼, 콤보박스, 리스트박스 등의 화면 구성요소들)의 모음

      • Bootstrap vs Vuetify

      • Bootstrap

        • 트위터가 개발한 역사와 전통의 UI 컴포넌트 라이브러리

        • 반응형 웹디자인 (모바일 화면과 데스크탑 화면을 적절히 지원)

      • Vuetify

        • 커뮤니티가 개발

        • 구글이 제안한 '머티리얼라이즈 디자인' 제공 (플랫 스타일 디자인)

      최근에 bit 도 있고 많이 있습니다.

      각각 비슷하지만 장단점이 있어서 검색하시고 선택하시기 바랍니다.

    • 하얀고슴도치236
      하얀고슴도치236

      부트스트랩 기반으로 색상표 등 스타일시트를 바꿔서 제공하는것들이 많이 있습니다.

      https://bootswatch.com/

      해당 사이트 등 많은 곳에서 이러한 자료들을 공유하고 있으니 참고 하여 사용하시면 될것 같습니다.

      또한 커스텀하여 공통적인 본인만의 스타일시트를 구성해두시는것도 좋다고 생각됩니다.