프로그래밍기초/HTML CSS

[CSS] 기본 CSS 템플릿

임동까스 2021. 1. 29. 11:40
/* 폰트적용 시작 */
@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
}

@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
}

@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 300;
  src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
}

html {
  font-family: 'LotteMartDream', sans-serif;
}
/* 폰트적용 끝 */

/* 노말라이즈 시작 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}
/* 노말라이즈 끝 */

/* 라이브러리 */

/* 라이브러리 - 일반 시작 */
.con {
  margin-left:auto;
  margin-right:auto;
}

.padding-0-10 {
  padding-left:10px;
  padding-right:10px;
}

.block {
  display:block;
}

.flex {
  display:flex;
}

.height-100p {
  height:100%;
}
/* 라이브러리 - 일반 끝 */

/* 라이브러리 - 디버그 시작 */
.bd-red {
  border:2px solid red;
}

.bd-green {
  border:2px solid green;
}

.bd-blue {
  border:2px solid blue;
}

.bg-red {
  background-color:red;
}

.bg-green {
  background-color:green;
}

.bg-blue {
  background-color:blue;
}
/* 라이브러리 - 디버그 끝 */

/* 커스텀 시작 */
.con-min-width {
  min-width:320px;
}
/* 커스텀 끝 */