베이스 프로젝트 - 사용자 기본 틀 추가 / reset.css, font/font.css 공통 css 한곳에 추가

src/main/webapp/css/font.css

@@ -1,25 +1,316 @@
-/*
- * Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess
- */
+/* ================================
+   Noto Sans KR
+   ================================ */
+
 @font-face {
-  font-family: 'NanumGothic';
-  font-style: normal;
-  font-weight: 400;
-  src: url(../font/NanumGothic-Regular.eot);
-  src: url(../font/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
-       url(../font/NanumGothic-Regular.woff2) format('woff2'),
-       url(../font/NanumGothic-Regular.woff) format('woff'),
-       url(../font/NanumGothic-Regular.ttf) format('truetype');
+     font-family: 'Noto Sans KR';
+     font-style: normal;
+     font-weight: 300;
+     src: url('../font/NotoSansKR-Light.woff2') format('woff2'),
+          url('../font/NotoSansKR-Light.woff') format('woff'),
+          url('../font/NotoSansKR-Light.ttf') format('truetype');
+     font-display: block;
 }
 
 @font-face {
-  font-family: '나눔고딕';
-  font-style: normal;
-  font-weight: 400;
-  src: url(../font/NanumGothic-Regular.eot);
-  src: url(../font/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
-       url(../font/NanumGothic-Regular.woff2) format('woff2'),
-       url(../font/NanumGothic-Regular.woff) format('woff'),
-       url(../font/NanumGothic-Regular.ttf) format('truetype');
+     font-family: 'Noto Sans KR';
+     font-style: normal;
+     font-weight: 400;
+     src: url('../font/NotoSansKR-Regular.woff2') format('woff2'),
+          url('../font/NotoSansKR-Regular.woff') format('woff'),
+          url('../font/NotoSansKR-Regular.ttf') format('truetype');
+     font-display: block;
 }
- 
+
+@font-face {
+     font-family: 'Noto Sans KR';
+     font-style: normal;
+     font-weight: 500;
+     src: url('../font/NotoSansKR-Medium.woff2') format('woff2'),
+          url('../font/NotoSansKR-Medium.woff') format('woff'),
+          url('../font/NotoSansKR-Medium.ttf') format('truetype');
+     font-display: block;
+}
+
+@font-face {
+     font-family: 'Noto Sans KR';
+     font-style: normal;
+     font-weight: 700;
+     src: url('../font/NotoSansKR-Bold.woff2') format('woff2'),
+          url('../font/NotoSansKR-Bold.woff') format('woff'),
+          url('../font/NotoSansKR-Bold.ttf') format('truetype');
+     font-display: block;
+}
+
+@font-face {
+     font-family: 'Noto Sans KR';
+     font-style: normal;
+     font-weight: 800;
+     src: url('../font/NotoSansKR-ExtraBold.woff2') format('woff2'),
+          url('../font/NotoSansKR-ExtraBold.woff') format('woff'),
+          url('../font/NotoSansKR-ExtraBold.ttf') format('truetype');
+     font-display: block;
+}
+
+
+/* ================================
+     Pretendard
+     ================================ */
+
+/* Thin (100) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 100;
+     font-style: normal;
+     src: url('../font/Pretendard-Thin.woff2') format('woff2'),
+          url('../font/Pretendard-Thin.woff') format('woff'),
+          url('../font/Pretendard-Thin.ttf') format('truetype'),
+          url('../font/Pretendard-Thin.otf') format('opentype');
+     font-display: swap;
+}
+
+/* ExtraLight (200) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 200;
+     font-style: normal;
+     src: url('../font/Pretendard-ExtraLight.woff2') format('woff2'),
+          url('../font/Pretendard-ExtraLight.woff') format('woff'),
+          url('../font/Pretendard-ExtraLight.ttf') format('truetype'),
+          url('../font/Pretendard-ExtraLight.otf') format('opentype');
+     font-display: swap;
+}
+
+/* Light (300) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 300;
+     font-style: normal;
+     src: url('../font/Pretendard-Light.woff2') format('woff2'),
+          url('../font/Pretendard-Light.woff') format('woff'),
+          url('../font/Pretendard-Light.ttf') format('truetype'),
+          url('../font/Pretendard-Light.otf') format('opentype');
+     font-display: swap;
+}
+
+/* Regular (400) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 400;
+     font-style: normal;
+     src: url('../font/Pretendard-Regular.woff2') format('woff2'),
+          url('../font/Pretendard-Regular.woff') format('woff'),
+          url('../font/Pretendard-Regular.ttf') format('truetype'),
+          url('../font/Pretendard-Regular.otf') format('opentype');
+     font-display: swap;
+}
+
+/* Medium (500) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 500;
+     font-style: normal;
+     src: url('../font/Pretendard-Medium.woff2') format('woff2'),
+          url('../font/Pretendard-Medium.woff') format('woff'),
+          url('../font/Pretendard-Medium.ttf') format('truetype'),
+          url('../font/Pretendard-Medium.otf') format('opentype');
+     font-display: swap;
+}
+
+/* SemiBold (600) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 600;
+     font-style: normal;
+     src: url('../font/Pretendard-SemiBold.woff2') format('woff2'),
+          url('../font/Pretendard-SemiBold.woff') format('woff'),
+          url('../font/Pretendard-SemiBold.ttf') format('truetype'),
+          url('../font/Pretendard-SemiBold.otf') format('opentype');
+     font-display: swap;
+}
+
+/* Bold (700) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 700;
+     font-style: normal;
+     src: url('../font/Pretendard-Bold.woff2') format('woff2'),
+          url('../font/Pretendard-Bold.woff') format('woff'),
+          url('../font/Pretendard-Bold.ttf') format('truetype'),
+          url('../font/Pretendard-Bold.otf') format('opentype');
+     font-display: swap;
+}
+
+/* ExtraBold (800) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 800;
+     font-style: normal;
+     src: url('../font/Pretendard-ExtraBold.woff2') format('woff2'),
+          url('../font/Pretendard-ExtraBold.woff') format('woff'),
+          url('../font/Pretendard-ExtraBold.ttf') format('truetype'),
+          url('../font/Pretendard-ExtraBold.otf') format('opentype');
+     font-display: swap;
+}
+
+/* Black (900) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 900;
+     font-style: normal;
+     src: url('../font/Pretendard-Black.woff2') format('woff2'),
+          url('../font/Pretendard-Black.woff') format('woff'),
+          url('../font/Pretendard-Black.ttf') format('truetype'),
+          url('../font/Pretendard-Black.otf') format('opentype');
+     font-display: swap;
+}
+
+
+/* ================================
+     Gmarket Sans TTF
+     ================================ */
+
+@font-face {
+     font-family: 'Gmarket Sans TTF';
+     font-weight: 300;
+     font-style: normal;
+     src: url('../font/GmarketSansTTFLight.woff2') format('woff2'),
+          url('../font/GmarketSansTTFLight.woff') format('woff'),
+          url('../font/GmarketSansTTFLight.ttf') format('truetype'),
+          url('../font/GmarketSansTTFLight.eot?#iefix') format('embedded-opentype');
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'Gmarket Sans TTF';
+     font-weight: 500;
+     font-style: normal;
+     src: url('../font/GmarketSansTTFMedium.woff2') format('woff2'),
+          url('../font/GmarketSansTTFMedium.woff') format('woff'),
+          url('../font/GmarketSansTTFMedium.ttf') format('truetype'),
+          url('../font/GmarketSansTTFMedium.eot?#iefix') format('embedded-opentype');
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'Gmarket Sans TTF';
+     font-weight: 700;
+     font-style: normal;
+     src: url('../font/GmarketSansTTFBold.woff2') format('woff2'),
+          url('../font/GmarketSansTTFBold.woff') format('woff'),
+          url('../font/GmarketSansTTFBold.ttf') format('truetype'),
+          url('../font/GmarketSansTTFBold.eot?#iefix') format('embedded-opentype');
+     font-display: swap;
+}
+
+/* ================================
+     S-Core Dream 1
+     ================================ */
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-1Thin.eot');
+     src: url('../font/S-CoreDream-1Thin.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-1Thin.woff2') format('woff2'),
+          url('../font/S-CoreDream-1Thin.woff') format('woff'),
+          url('../font/S-CoreDream-1Thin.ttf') format('truetype');
+     font-weight: 100;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-2ExtraLight.eot');
+     src: url('../font/S-CoreDream-2ExtraLight.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-2ExtraLight.woff2') format('woff2'),
+          url('../font/S-CoreDream-2ExtraLight.woff') format('woff'),
+          url('../font/S-CoreDream-2ExtraLight.ttf') format('truetype');
+     font-weight: 200;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-3Light.eot');
+     src: url('../font/S-CoreDream-3Light.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-3Light.woff2') format('woff2'),
+          url('../font/S-CoreDream-3Light.woff') format('woff'),
+          url('../font/S-CoreDream-3Light.ttf') format('truetype');
+     font-weight: 300;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-4Regular.eot');
+     src: url('../font/S-CoreDream-4Regular.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-4Regular.woff2') format('woff2'),
+          url('../font/S-CoreDream-4Regular.woff') format('woff'),
+          url('../font/S-CoreDream-4Regular.ttf') format('truetype');
+     font-weight: 400;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-5Medium.eot');
+     src: url('../font/S-CoreDream-5Medium.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-5Medium.woff2') format('woff2'),
+          url('../font/S-CoreDream-5Medium.woff') format('woff'),
+          url('../font/S-CoreDream-5Medium.ttf') format('truetype');
+     font-weight: 500;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-6Bold.eot');
+     src: url('../font/S-CoreDream-6Bold.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-6Bold.woff2') format('woff2'),
+          url('../font/S-CoreDream-6Bold.woff') format('woff'),
+          url('../font/S-CoreDream-6Bold.ttf') format('truetype');
+     font-weight: 600;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-7ExtraBold.eot');
+     src: url('../font/S-CoreDream-7ExtraBold.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-7ExtraBold.woff2') format('woff2'),
+          url('../font/S-CoreDream-7ExtraBold.woff') format('woff'),
+          url('../font/S-CoreDream-7ExtraBold.ttf') format('truetype');
+     font-weight: 700;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-8Heavy.eot');
+     src: url('../font/S-CoreDream-8Heavy.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-8Heavy.woff2') format('woff2'),
+          url('../font/S-CoreDream-8Heavy.woff') format('woff'),
+          url('../font/S-CoreDream-8Heavy.ttf') format('truetype');
+     font-weight: 800;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-9Black.eot');
+     src: url('../font/S-CoreDream-9Black.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-9Black.woff2') format('woff2'),
+          url('../font/S-CoreDream-9Black.woff') format('woff'),
+          url('../font/S-CoreDream-9Black.ttf') format('truetype');
+     font-weight: 900;
+     font-style: normal;
+     font-display: swap;
+}

src/main/webapp/css/reset.css

@@ -1,42 +1,210 @@
-@charset "UTF-8";
+/* ========================================================================
+  reset.css — 2025
+   작성자: 정수빈 
+   날짜: 2025-10-17
+   ======================================================================== */
 
-html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+/* box-sizing & 기본 리셋 */
+*, *::before, *::after {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
-  border: 0;
-  font-weight: inherit;
-  font-style: inherit;
-  font-size: 100%;
-  font-family: inherit;
-  vertical-align: baseline;
 }
+
+/* HTML5 요소 기본 표시 보장 */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, main {
+  display: block;
+}
+
+/* root 설정 */
+html {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+  font-size: 16px;
+}
+
 body {
-  font:12px/1.5em Arial, dotum, AppleGothic, sans-serif 
+  min-height: 100vh;
+  line-height: 1.5;
+  font-family: 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: -0.35px;
+  color: #222;
+  background-color: #fff;
 }
+
+/* 텍스트 요소 */
+h1, h2, h3, h4, h5, h6, p {
+  font-weight: inherit;
+  font-size: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  display: inline-block;
+}
+a:focus-visible {
+  outline: 2px solid #222;
+  outline-offset: 3px;
+}
+
+/* 리스트 */
+ol, ul {
+  list-style: none;
+}
+
+/* 이미지 및 미디어 */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border: 0;
+  font-size: 0;
+}
+
+/* 표 */
 table {
   border-collapse: collapse;
   border-spacing: 0;
+  table-layout: fixed;
+  width: 100%;
 }
-caption, th, td {
-  text-align: left;
-  font-weight: normal;
+
+/* 폼 요소 */
+button, input, select, textarea {
+  font: inherit;
+  color: inherit;
+  border: none;
+  background: none;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  
+  appearance: none;
 }
-table, td, th {
+
+/* 라디오, 체크박스는 appearance 제거 금지 (기본 표시 유지) */
+input[type="radio"],
+input[type="checkbox"] {
+  appearance: auto;
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  display: inline-block;
+  width: auto;
+  height: auto;
+  cursor: pointer;
   vertical-align: middle;
 }
-blockquote:before, blockquote:after, q:before, q:after {
-  content: "";
+
+button {
+  cursor: pointer;
+  background: transparent;
 }
-blockquote {
-  quotes: "" "";
+
+input::placeholder,
+textarea::placeholder {
+  color: #777;
+  font-weight: 400;
+  font-size:14px;
 }
-a img {
+
+input:disabled,
+input:read-only,
+textarea:disabled,
+textarea:read-only,
+select:disabled,
+select:read-only
+input.readonly,
+textarea.readonly,
+select.readonly{
+  background-color: var(--disable-fill-bg-color) !important;
+  color: var(--disable-fill-text-color) !important;
+  border: 1px solid var(--disable-fill-line-color) !important;
+  cursor: not-allowed;
+}
+
+/* 접근성 - label 숨김 처리 */
+caption,.caption, .label, .sr-only, .visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* 스크롤바 커스터마이징 */
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+::-webkit-scrollbar-thumb {
+  background: #adadad;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 인용, 기타 */
+blockquote, q {
+  quotes: none;
+}
+blockquote::before, blockquote::after,
+q::before, q::after {
+  content: '';
+}
+
+/* 폼 예외 처리 */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  appearance: none;
+}
+
+/* 주소, 이탤릭 등 */
+address, em, i {
+  font-style: normal;
+}
+
+/* hr */
+hr {
   border: none;
+  height: 1px;
+  background: #e0e0e0;
+  margin: 0;
 }
 
-a {text-decoration:none}
+/* 텍스트영역 기본 */
+textarea {
+  resize: vertical;
+  color: #333;
+}
 
+/* 접근성: 모션 줄이기 선호 시 */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
 
-/* Hides from IE5-mac \*/
-* html { height: 1%; }
-/* End hide from IE5-mac */
+/* 다크모드 기본 대응 */
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #e6e6e6;
+    background-color: #111;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #666;
+  }
+}

src/main/webapp/css/reset_bak.css

@@ -0,0 +1,42 @@
+@charset "UTF-8";
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+body {
+  font:12px/1.5em Arial, dotum, AppleGothic, sans-serif 
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+}
+table, td, th {
+  vertical-align: middle;
+}
+blockquote:before, blockquote:after, q:before, q:after {
+  content: "";
+}
+blockquote {
+  quotes: "" "";
+}
+a img {
+  border: none;
+}
+
+a {text-decoration:none}
+
+
+/* Hides from IE5-mac \*/
+* html { height: 1%; }
+/* End hide from IE5-mac */

src/main/webapp/css/style.css

@@ -0,0 +1,187 @@
+@charset "utf-8";
+
+/* 간격 */
+.p0 {padding: 0px!important;}
+.p5 {padding: 5px!important;}
+
+.pt5 {padding-top: 5px!important;}
+.pt10 {padding-top: 10px!important;}
+.pt15 {padding-top: 15px!important;}
+.pt20 {padding-top: 20px!important;}
+.pt25 {padding-top: 25px!important;}
+.pt30 {padding-top: 30px!important;}
+.pt35 {padding-top: 35px!important;}
+.pt40 {padding-top: 40px!important;}
+.pt45 {padding-top: 45px!important;}
+.pt50 {padding-top: 50px!important;}
+
+.pr0 {padding-right: 0px!important;}
+.pr20 {padding-right: 20px!important;}
+
+.pb5 {padding-bottom: 5px!important;}
+.pb10 {padding-bottom: 10px!important;}
+.pb15 {padding-bottom: 15px!important;}
+.pb20 {padding-bottom: 20px!important;}
+.pb25 {padding-bottom: 25px!important;}
+.pb30 {padding-bottom: 30px!important;}
+.pb35 {padding-bottom: 35px!important;}
+.pb40 {padding-bottom: 40px!important;}
+.pb45 {padding-bottom: 45px!important;}
+.pb50 {padding-bottom: 50px!important;}
+
+.pl0 {padding-left: 0px!important;}
+.pl15 {padding-left: 15px!important;}
+.pl20 {padding-left: 20px!important;}
+
+.m20 {margin: 20px!important;}
+
+.mt-1 {margin-top: -1px!important;}
+.mt0 {margin-top: 0px!important;}
+.mt5 {margin-top: 5px!important;}
+.mt10 {margin-top: 10px!important;}
+.mt15 {margin-top: 15px!important;}
+.mt20 {margin-top: 20px!important;}
+.mt25 {margin-top: 25px!important;}
+.mt30 {margin-top: 30px!important;}
+.mt35 {margin-top: 35px!important;}
+.mt40 {margin-top: 40px!important;}
+.mt45 {margin-top: 45px!important;}
+.mt50 {margin-top: 50px!important;}
+.mt60 {margin-top: 60px!important;}
+.mt70 {margin-top: 70px!important;}
+.mt80 {margin-top: 80px!important;}
+.mt90 {margin-top: 90px!important;}
+.mt100 {margin-top: 100px!important;}
+
+.mr0 {margin-right: 0px!important;}
+.mr3 {margin-right: 3px!important;}
+.mr5 {margin-right: 5px!important;}
+.mr10 {margin-right: 10px!important;}
+.mr15 {margin-right: 15px!important;}
+.mr20 {margin-right: 20px!important;}
+.mr25 {margin-right: 25px!important;}
+.mr30 {margin-right: 30px!important;}
+.mr35 {margin-right: 35px!important;}
+.mr40 {margin-right: 40px!important;}
+.mr45 {margin-right: 45px!important;}
+.mr50 {margin-right: 50px!important;}
+.mr60 {margin-right: 60px!important;}
+.mr70 {margin-right: 70px!important;}
+.mr80 {margin-right: 80px!important;}
+.mr90 {margin-right: 90px!important;}
+.mr100 {margin-right: 100px!important;}
+
+.mb-4 {margin-bottom: -4px!important;}
+.mb0 {margin-bottom: 0px!important;}
+.mb1 {margin-bottom: 1px!important;}
+.mb5 {margin-bottom: 5px!important;}
+.mb10 {margin-bottom: 10px!important;}
+.mb15 {margin-bottom: 15px!important;}
+.mb18 {margin-bottom: 18px!important;}
+.mb20 {margin-bottom: 20px!important;}
+.mb25 {margin-bottom: 25px!important;}
+.mb30 {margin-bottom: 30px!important;}
+.mb35 {margin-bottom: 35px!important;}
+.mb40 {margin-bottom: 40px!important;}
+.mb45 {margin-bottom: 45px!important;}
+.mb50 {margin-bottom: 50px!important;}
+.mb60 {margin-bottom: 60px!important;}
+.mb70 {margin-bottom: 70px!important;}
+.mb80 {margin-bottom: 80px!important;}
+.mb90 {margin-bottom: 90px!important;}
+.mb100 {margin-bottom: 100px!important;}
+
+.ml0 {margin-left: 0px!important;}
+.ml5 {margin-left: 5px!important;}
+.ml10 {margin-left: 10px!important;}
+.ml15 {margin-left: 15px!important;}
+.ml20 {margin-left: 20px!important;}
+.ml25 {margin-left: 25px!important;}
+.ml30 {margin-left: 30px!important;}
+.ml35 {margin-left: 35px!important;}
+.ml40 {margin-left: 40px!important;}
+.ml45 {margin-left: 45px!important;}
+.ml50 {margin-left: 50px!important;}
+.ml60 {margin-left: 60px!important;}
+.ml70 {margin-left: 70px!important;}
+.ml80 {margin-left: 80px!important;}
+.ml90 {margin-left: 90px!important;}
+.ml100 {margin-left: 100px!important;}
+
+/* 너비, 높이 */
+.w100per {width: 100% !important;}
+.w99per {width: 99%;}
+.w95per {width: 95%;}
+.w90per {width: 90%;}
+.w85per {width: 85%;}
+.w80per {width: 80%;}
+.w75per {width: 75%;}
+.w70per {width: 70%;}
+.w65per {width: 65%;}
+.w60per {width: 60%;}
+.w50per {width: 50%;}
+.w55per {width: 55%;}
+.w45per {width: 45%;}
+.w40per {width: 40%;}
+.w35per {width: 35%;}
+.w33per {width: 33.3333333%;}
+.w30per {width: 30%;}
+.w25per {width: 25%;}
+.w20per {width: 20%;}
+.w19per {width: 19%;}
+.w18per {width: 18%;}
+.w17per {width: 17%;}
+.w16per {width: 16%;}
+.w15per {width: 15%;}
+.w14per {width: 14%;}
+.w13per {width: 13%;}
+.w12per {width: 12%;}
+.w11per {width: 11%;}
+.w10per {width: 10%;}
+.w9per {width: 9%;}
+.w8per {width: 8%;}
+.w7per {width: 7%;}
+.w6per {width: 6%;}
+.w5per {width: 5%;}
+.w4per {width: 4%;}
+.w3per {width: 3%;}
+.w2per {width: 2%;}
+.w1per {width: 1%;}
+
+.w5 {width: 5px;}
+.w10 {width: 10px;}
+.w15 {width: 15px;}
+.w20 {width: 20px;}
+.w25 {width: 25px;}
+.w30 {width: 30px;}
+.w35 {width: 35px;}
+.w40 {width: 40px;}
+.w45 {width: 45px;}
+.w50 {width: 50px;}
+.w55 {width: 55px;}
+.w60 {width: 60px;}
+.w70 {width: 70px;}
+.w80 {width: 80px;}
+.w90 {width: 90px;}
+.w100 {width: 100px;}
+.w110 {width: 110px;}
+.w120 {width: 120px;}
+.w130 {width: 130px;}
+.w140 {width: 140px;}
+.w150 {width: 150px;}
+.w160 {width: 160px;}
+.w170 {width: 170px;}
+.w180 {width: 180px;}
+.w190 {width: 190px;}
+.w200 {width: 200px;}
+.w250 {width: 250px;}
+.w300 {width: 300px;}
+.w325 {width: 325px;}
+.w350 {width: 350px;}
+.w400 {width: 400px;}
+.w500 {width: 500px;}
+
+.mw100 {min-width: 100px;}
+
+.h100 {height: 100px;}
+.h100per {height: 100%;}