component css 가 뭔가요?

component css는 웹 퍼블리싱 작업에 자주 사용되는 요소들의 스타일에 대한 가이드 라인을 제공합니다!

페이지마다 재사용될만한 구성요소들의 마크업 (html) 과 스타일 (css) 또는 js 코드들을 기록하여 번거롭게 직접 코딩하지 않고

필요한 코드만 긁어서 본인 프로젝트에 사용할 수 있습니다.

앞으로 더 많은 스타일 컴포넌트들을 기록할 예정이며, 추후에 추가될 mobile, keyframe, grid layout ,slide layout에 대한 가이드도 제공할 예정입니다.

라이센스

해당 프로젝트에 사용 된 라이브러리 및 플러그인들은 여기서 확인하세요.

더 많은 컴포넌트들

꾸준한 업데이트를 통해 현재보다 더 많은 컴포넌트들을 기록할 예정입니다. 조금만 기다려주세요!

업데이트 소식

특별한건 아니지만, 여기서 업데이트 로그를 작성하고 있습니다. 궁금하시다면 참고해보세요!

피드백

코드의 문제점 , 건의사항 등등 component css에 대한 피드백은 sky11916@naver.com 으로 부탁해요!

기본 세팅 가이드

해당 프로젝트에서 쓰인 HTML/SCSS/CSS/JS 기본 세팅 구조입니다.

                      
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="" type="text/css" />
    <script type="text/javascript" src=""></script>
    <title></title>
</head>
<body>
    <div id="wrap">
        
    </div>
</body>
</html>

                      
/* text color */
$c20 : #202020 !default;  
$c222 : #222 !default;
$c333 : #333 !default;
$c70 : #707070 !default;
$cddd : #ddd !default;
$c000 : #000 !default;
$c-ccc : #ccc !default;
$cfff : #fff !default;
$d-fz : 'Noto Sans';
$emphasisType01 : #266bf7 !default;
$emphasisType02: #1694d2 !default;

/* background */
$blueBg : $emphasisType01;
$whiteBg : $cfff;
$cccBg : $c-ccc;
$dddBg : $cddd;
$_222Bg : $c222;
$_333Bg : $c333;
$blackBg : $c000;

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(./font/notoSans/eot/NotoSansKR-Regular-Hestia.eot);
  src: url(./font/notoSans/eot/NotoSansKR-Regular-Hestia.eot?#iefix) format("embedded-opentype"), url(./font/notoSans/woff/NotoSansKR-Regular-Hestia.woff) format("woff");
}

/* reset */
:root{overflow-wrap: break-word;}
body,html{width: 100%;height: 100%;margin: 0;padding: 0; font-family:'Noto Sans DemLight', "맑은 고딕", "Malgun Gothic", Dotum, sans-serif;
font-size:13px;color: $c333;letter-spacing:-0.045em !important;}
:where(html, body, div, span, object,h1, h2, h3, h4, h5, h6, p, blockquote, a, button, abbr, address, 
img, q,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr,
th, td,article, aside, footer, header, section, summary){
  margin:0;padding:0;border:0;font:inherit;
}
:where(article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section){display: block;}
ol,ul,li{list-style: none;}
table{border-collapse: collapse;border-spacing: 0;}
a{text-decoration: none;color: inherit;}
address{font-style: normal;}
button{display: inline-block;border: none;background-color: transparent;cursor: pointer;}
input,button,a,select,option{font-family:inherit;font-size:inherit;}
button:focus{outline:none;}
caption,hr{display:none;}
pre{word-break:break-all;white-space:pre-line;margin: 0 !important;}

                      
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(./font/notoSans/eot/NotoSansKR-Regular-Hestia.eot);
  src: url(./font/notoSans/eot/NotoSansKR-Regular-Hestia.eot?#iefix) format("embedded-opentype"), url(./font/notoSans/woff/NotoSansKR-Regular-Hestia.woff) format("woff");
}

:root {
  overflow-wrap: break-word;
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans DemLight', "맑은 고딕", "Malgun Gothic", Dotum, sans-serif;
  font-size: 13px;
  color: #333;
  letter-spacing: -0.045em !important;
}

:where(html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, a, button, abbr, address, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, section, summary) {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}

:where(article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section) {
  display: block;
}

ol, ul, li {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

address {
  font-style: normal;
}

button {
  display: inline-block;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

input, button, a, select, option {
  font-family: inherit;
  font-size: inherit;
}

button:focus {
  outline: none;
}

caption, hr {
  display: none;
}

pre {
  word-break: break-all;
  white-space: pre-line;
  margin: 0 !important;
}

                      
$(function () {

});