공돌이인 내가 심심해서 각종 페이지를 만들다 보면
css 스타일을 만들기가 정말 힘들다 ㅠ_ㅠ
제일 많이 쓰는것이 Bootstrap 인데 <DIV> <DIV> 천국인데 너무 어렵다..
(쉽게 나온 것인데 왜이렇게 어려운지)
그래서 이것 저것 알아보다가
METRO UI 4.0 이란걸 찾아보았는데 open source 에 몇가지 '깰끔' 하면서
편해보여 한번 정리해보고자 한다.
https://metroui.org.ua/index.html 로 접속하면 이런 그림이 보인다.
적용방법은 2가지가 있는데 매우 간단하다.
표로 정리해보면
| 적용방식 | 특징 | 적용방법 |
| CDN |
페이지를 여는 사용자가 페이지 열때마다 CDN 페이지에서 css, js를 다운로드 하는 방식
버전관리 불필요 웹페이지 트래픽 감소 |
1) <head> 테그에 아래의 줄을 붙여넣는다 <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
2) 옵션으로 몇몇 항목만 제한적으로 사용하고 싶다면 아래중에 필요한것만 <head> 테그에 붙여넣어 쓴다.
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro.min.css"> <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-colors.min.css"> <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-rtl.min.css"> <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-icons.min.css">
3) 바디 테그를 닫는 </body> 바로 앞에 아래의 줄을 복사해서 붙여넣는다
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
이때 주의점은 순서대로 해야한다. |
| 다운로드 |
다운로드 링크에서 css, js 파일을 다운받아 페이지에 기술해줌
버전을 일관적으로 관리할 수 있는 장점이 있음 |
다운로드에서 관련 파일 다운로드 후 페이지에 넣어줌
https://metroui.org.ua/download.html
|
기본페이지
헬로우 월드 페이지 테스트
test.jsp
<!DOCTYPE html>
<head>
<!-- 필수 meta 테그 -->
<meta charset="utf-8">
<!-- 반응형 웹을 위한 meta 테그 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Metro 4 용 css -->
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
</head>
<body>
<h1>헬로우 월드!</h1>
<!-- jQuery 를 먼저 적어줘야 한다. -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>
