You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

327 lines
4.5 KiB

  1. /**********************************************************************************************************************
  2. * RESET
  3. ***********************************************************************************************************************/
  4. *,
  5. *::before,
  6. *::after {
  7. box-sizing: border-box;
  8. }
  9. html {
  10. font-family: sans-serif; // 2
  11. line-height: 1.15; // 3
  12. -webkit-text-size-adjust: 100%; // 4
  13. -ms-text-size-adjust: 100%; // 4
  14. -ms-overflow-style: scrollbar; // 5
  15. -webkit-tap-highlight-color: rgba(#000, 0); // 6
  16. }
  17. // IE10+ 에서 viewport 메타 태그가 먹지않는경우를 대비
  18. @at-root {
  19. @-ms-viewport {
  20. width: device-width;
  21. }
  22. }
  23. article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  24. display: block;
  25. }
  26. body {
  27. margin: 0;
  28. font-family: $font-family-base;
  29. font-size: $font-size-base;
  30. font-weight: $font-weight-base;
  31. line-height: $line-height-base;
  32. color: $body-color;
  33. text-align: left;
  34. background-color: $body-bg-color;
  35. }
  36. [tabindex="-1"]:focus {
  37. outline: 0 !important;
  38. }
  39. hr {
  40. box-sizing: content-box;
  41. height: 0;
  42. overflow: visible;
  43. }
  44. h1, h2, h3, h4, h5, h6 {
  45. margin:0;
  46. font-family:$font-family-heading;
  47. }
  48. p {
  49. margin:0;
  50. }
  51. abbr[title],
  52. abbr[data-original-title] {
  53. text-decoration: underline;
  54. text-decoration: underline dotted;
  55. cursor: help; // 3
  56. border-bottom: 0; // 1
  57. }
  58. address {
  59. margin:0;
  60. font-style: normal;
  61. line-height: inherit;
  62. }
  63. ol,
  64. ul,
  65. dl {
  66. margin:0;
  67. }
  68. ol ol,
  69. ul ul,
  70. ol ul,
  71. ul ol {
  72. margin:0;
  73. }
  74. dt {
  75. font-weight: $font-weight-base;
  76. }
  77. dd {
  78. margin:0;
  79. }
  80. blockquote {
  81. margin:0;
  82. }
  83. dfn {
  84. font-style: italic;
  85. }
  86. b,
  87. strong {
  88. font-weight: $font-weight-bold;
  89. }
  90. small {
  91. font-size: 80%;
  92. }
  93. sub,
  94. sup {
  95. position: relative;
  96. font-size: 75%;
  97. line-height: 0;
  98. vertical-align: baseline;
  99. }
  100. sub { bottom: -.25em; }
  101. sup { top: -.5em; }
  102. // 링크
  103. a {
  104. color: $link-color;
  105. text-decoration: none;
  106. background-color: transparent;
  107. -webkit-text-decoration-skip: objects;
  108. &:hover {
  109. color: $link-hover-color;
  110. text-decoration:none;
  111. }
  112. &:not([href]):not([tabindedx]) {
  113. color: inherit;
  114. text-decoration: none;
  115. &:hover,
  116. &:focus {
  117. color: inherit;
  118. text-decoration: none;
  119. }
  120. &:focus {
  121. outline: 0;
  122. }
  123. }
  124. }
  125. // 코드 관련
  126. pre,
  127. code,
  128. kbd,
  129. samp {
  130. font-family: $font-family-base;
  131. font-size: 1em;
  132. }
  133. pre {
  134. margin:0;
  135. overflow: auto;
  136. -ms-overflow-style: scrollbar;
  137. }
  138. // 이미지 관련
  139. figure {
  140. margin: 0;
  141. }
  142. img {
  143. vertical-align: middle;
  144. border-style: none;
  145. }
  146. svg:not(:root) {
  147. overflow: hidden;
  148. }
  149. // 테이블 관련
  150. table {
  151. border-collapse: collapse;
  152. }
  153. caption {
  154. padding-top: $table-cell-padding;
  155. padding-bottom: $table-cell-padding;
  156. color: $body-color;
  157. text-align: left;
  158. caption-side: bottom;
  159. }
  160. th {
  161. text-align: inherit;
  162. }
  163. // 폼관련
  164. label {
  165. display: inline-block;
  166. margin:0;
  167. }
  168. button {
  169. border-radius: 0;
  170. &:focus {
  171. outline: 1px dotted;
  172. outline: 5px auto -webkit-focus-ring-color;
  173. }
  174. }
  175. input,
  176. button,
  177. select,
  178. optgroup,
  179. textarea {
  180. margin: 0;
  181. font-family: inherit;
  182. font-size: inherit;
  183. line-height: inherit;
  184. }
  185. button,
  186. input {
  187. overflow: visible;
  188. }
  189. button,
  190. select {
  191. text-transform: none;
  192. }
  193. button,
  194. html [type="button"],
  195. [type="reset"],
  196. [type="submit"] {
  197. -webkit-appearance: button;
  198. }
  199. button::-moz-focus-inner,
  200. [type="button"]::-moz-focus-inner,
  201. [type="reset"]::-moz-focus-inner,
  202. [type="submit"]::-moz-focus-inner {
  203. padding: 0;
  204. border-style: none;
  205. }
  206. input[type="radio"],
  207. input[type="checkbox"] {
  208. box-sizing: border-box;
  209. padding: 0;
  210. }
  211. input[type="date"],
  212. input[type="time"],
  213. input[type="datetime-local"],
  214. input[type="month"] {
  215. -webkit-appearance: listbox;
  216. }
  217. textarea {
  218. overflow: auto;
  219. resize: vertical;
  220. }
  221. fieldset {
  222. min-width: 0;
  223. padding: 0;
  224. margin: 0;
  225. border: 0;
  226. }
  227. legend {
  228. display: block;
  229. width: 100%;
  230. max-width: 100%;
  231. padding: 0;
  232. margin:0;
  233. font-size: 1.5rem;
  234. line-height: inherit;
  235. color: inherit;
  236. white-space: normal;
  237. }
  238. progress {
  239. vertical-align: baseline;
  240. }
  241. [type="number"]::-webkit-inner-spin-button,
  242. [type="number"]::-webkit-outer-spin-button {
  243. height: auto;
  244. }
  245. [type="search"] {
  246. outline-offset: -2px;
  247. -webkit-appearance: none;
  248. }
  249. [type="search"]::-webkit-search-cancel-button,
  250. [type="search"]::-webkit-search-decoration {
  251. -webkit-appearance: none;
  252. }
  253. ::-webkit-file-upload-button {
  254. font: inherit;
  255. -webkit-appearance: button;
  256. }
  257. output {
  258. display: inline-block;
  259. }
  260. summary {
  261. display: list-item;
  262. cursor: pointer;
  263. }
  264. template {
  265. display: none;
  266. }
  267. [hidden] {
  268. display: none !important;
  269. }