- UIKit : css framework
framework : 프로그램을 개발하기 위한 여러 요소들과 메뉴얼인 룰을 제공하는 프로그램, 처음부터 만들어야하는게 적다.
UIkit
UIkit, a lightweight and modular front-end framework for developing fast and powerful web interfaces.
getuikit.com
getting started 클릭
다운로드, cdn 둘다 가능하다. cdn코드를 복사해서 html에 link하기
마지막줄은 icons라서 필수는 아님!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- UIkit CDN -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/uikit@3.7.1/dist/css/uikit.min.css" />
<script
src="https://cdn.jsdelivr.net/npm/uikit@3.7.1/dist/js/uikit.min.js"></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/uikit@3.7.1/dist/js/uikit-icons.min.js"></script>
-->
</head>
연결을 하고 어떤 컴포넌트가 있는지 옆 사이드바에서 확인가능하다. 어코디언 클릭
어떻게 사용하는지 나와있다.
맨위에있는 가장 기본적인 형태를 복사하기
markup을 클릭하고 직접 복사해도 됨 (복사 후 인덴트 확인하기)
ul 안에 uk-accordion은 속성이자 값이다. 클래스명처럼 css에서 사용하면된다.
.uk-accordion { }
<ul uk-accordion>
</ul>
컴포넌트 옵션이 다양하게 있는데 기본값은 0.2초 멀티플 false이다.
한번에 한가지 섹션만 나오게 되어있음
// 인라인 스타일 넣는 방식과 같다.
// 0.5초, 멀티플true
<ul uk-accordion="duration: 500; multiple: true;">
</ul>
// css
.uk-accordion {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 20px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.178);
}
'Web > CSS' 카테고리의 다른 글
| CSS 변수 var() 사용하기 (0) | 2022.02.09 |
|---|---|
| CSS calc() 산술식(사칙연산) (0) | 2022.02.07 |
| [animation] 도형로딩 애니메이션 #2 (0) | 2021.08.02 |
| [animation] 도형로딩 애니메이션 #2 (0) | 2021.08.01 |
| display 속성 정리 (인라인, 블럭, 인라인블럭) (0) | 2021.07.23 |