아하
생활

생활꿀팁

쌈박한영양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/

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

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